<!-- 委托方意见反馈表-编辑 -->
<script lang="ts" setup name="ClientOpinionFormEdit">
import type { FormInstance, FormRules, UploadUserFile } from 'element-plus'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import dayjs from 'dayjs'
import ApprovalDialog from './ApprovalDialog.vue'
import useUserStore from '@/store/modules/user'
import { getDictByCode } from '@/api/system/dict'
import { getUserDept } from '@/api/system/user'
import { addOpinion, cancelOpinion, delOpinion, detailOpinion, submitOpinion } from '@/api/eqpt/MeasurementBusiness/opinion'
import { delTextBtn, editBtn, submitBtn } from '@/utils/applyBtns'
import { SCHEDULE } from '@/utils/scheduleDict'
const $route = useRoute()
const $router = useRouter()
const userStore = useUserStore()
const ruleFormRef = ref<FormInstance>() // from组件
const tableRef = ref()
const statusName = $route.query.statusName as string
// 显示标题
const textMap: { [key: string]: string } = {
  update: '编辑',
  create: '新增',
  detail: '详情',
}
// 对话框类型：create,update
const dialogStatus = ref('create')
const ruleForm = ref({
  appealUserId: '',
  appealUserName: '',
  approvalStatus: '',
  approvalStatusName: '',
  createTime: '',
  createUserId: '',
  createUserName: '',
  customerDeptId: '',
  customerDeptName: '',
  customerId: '',
  customerName: '',
  decisionItem: '',
  formName: '',
  formNo: '',
  id: '',
  labCode: '',
  processId: '',
  remark: '',
  suggestContent: '',
  taskId: '',
  updateTime: '',
}) // 表单
const rules = ref<FormRules>({
  appealUserName: [{ required: true, message: '申诉人', trigger: ['blur', 'change'] }],
  labCode: [{ required: true, message: '实验室必选', trigger: ['blur', 'change'] }],
  formName: [{ required: true, message: '文件名称必填', trigger: ['blur', 'change'] }],
}) // 表单验证规则
// 弹窗初始化
const initDialog = () => {
  dialogStatus.value = $route.params.type as string
  ruleFormRef.value?.resetFields()
  if ($route.params.type !== 'create') {
    // const data = JSON.parse($route.query.row as string)
    // console.log(data)
    // ruleForm.value = data
    detailOpinion({ id: $route.query.id }).then((res) => {
      // console.log(res.data, '111')
      ruleForm.value = res.data
    })
  }
  if ($route.params.type === 'create') {
    ruleForm.value.formName = ''
    ruleForm.value.createTime = dayjs().format('YYYY-MM-DD HH:mm:ss') // 创建时间
    ruleForm.value.createUserId = userStore.id
    ruleForm.value.createUserName = userStore.name
    ruleForm.value.customerDeptId = userStore.deptId
    ruleForm.value.customerDeptName = userStore.deptName
    // 获取当前用户所在单位
    getUserDept().then((res) => {
      ruleForm.value.customerId = res.data.id
      ruleForm.value.customerName = res.data.fullName
    })
  }
}
onMounted(() => {
  initDialog()
})

// 关闭弹窗
const close = () => {
  $router.back()
}
// 编辑
const update = () => {
  addOpinion(ruleForm.value).then((res) => {
    ElMessage.success('添加成功')
    close()
  })
}
// 保存
// const saveForm = async (formEl: FormInstance | undefined) => {
//   if (!formEl) { return }
//   await formEl.validate((valid, fields) => {
//     if (valid) {
//       if (!ruleForm.value.suggestContent) {
//         ElMessage.warning('请先填写意见内容')
//         return
//       }
//       ElMessageBox.confirm(
//         '确认保存吗？',
//         '提示',
//         {
//           confirmButtonText: '确认',
//           cancelButtonText: '取消',
//           type: 'warning',
//         },
//       ).then((res) => {
//         update()
//       })
//     }
//   })
// }
// 取消
const resetForm = (formEl: FormInstance | undefined) => {
  formEl?.resetFields()
  close()
}
const { proxy } = getCurrentInstance() as any
const permUrl = ref({
  agree: '/tested/pmetering/plan/agree',
  reject: '/tested/pmetering/plan/reject',
})
// 审批
const approvalDialogRef = ref()
const apply = (type: string) => {
  const data = JSON.parse($route.query.row as string)
  approvalDialogRef.value.initDialog(type, data.taskId, data.processId, ruleForm.value.id)
}
// 编辑
const editForm = () => {
  $router.push({
    params: { ...$route.params, type: 'update' },
    query: { ...$route.query },
  })
}
// 保存
const submitId = ref('')
const saveForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) { return }
  await formEl.validate((valid, _fields) => {
    if (!valid) { return }
    ElMessageBox.confirm(
      '确认保存吗？',
      '提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      },
    ).then((_res) => {
      if (submitId.value) {
        ruleForm.value.id = submitId.value
      }
      addOpinion(ruleForm.value).then((res) => {
        submitId.value = res.data
        // close()
        if (statusName === '已取消' || statusName === '未通过') {
          submitOpinion({ id: submitId.value, formId: SCHEDULE.CUSTOMER_OPINION_APPROVAL }).then((res) => {
            ElMessage.success('已提交')
            close()
          })
        }
        else {
          ElMessage.success('保存成功')
        }
      })
    })
  })
}
// 提交
const submitForm = () => {
  if (!submitId.value) {
    ElMessage.warning('请先保存')
    return false
  }
  ElMessageBox.confirm(
    '确认提交吗？',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    },
  ).then((_res) => {
    submitOpinion({ id: submitId.value, formId: SCHEDULE.CUSTOMER_OPINION_APPROVAL }).then((_res) => {
      ElMessage.success('已提交')
      close()
    })
  })
}
// 删除
const delForm = () => {
  ElMessageBox.confirm(
    '确认删除此记录吗?',
    '确认',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    },
  ).then(() => {
    const row = JSON.parse($route.query.row as string)
    delOpinion({ id: row.id, taskId: row.taskId }).then((res) => {
      ElMessage.success('操作成功')
      close()
    })
  })
}
// 取消
const cancelForm = () => {
  ElMessageBox.confirm(
    '确认取消此申请吗?',
    '确认',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    },
  ).then(() => {
    const row = JSON.parse($route.query.row as string)
    cancelOpinion({ id: row.id, processInstanceId: row.processId, comments: '' }).then((res) => {
      ElMessage.success('操作成功')
      // close()
      close()
    })
  })
}
// 详情
const processId = ref()
// detailPlan(data.id).then((res) => {
//   processId.value = res.data.processId
//   console.log(processId.value, 'processId.value')
// })
const labCodeList = ref<{ id: string; value: string; name: string }[]>()
getDictByCode('bizLabCode').then((res) => {
  labCodeList.value = res.data
})
const activeName = ref('基本信息')
</script>

<template>
  <app-container style="overflow: hidden;">
    <approval-dialog ref="approvalDialogRef" @on-success="() => { $router.back() }" />
    <detail-page :title="`委托方意见登记表-${textMap[dialogStatus]}`">
      <template #btns>
        <el-button v-if="statusName === '待审批' && proxy.hasPerm(permUrl.agree) " type="primary" @click="apply('agree')">
          同意
        </el-button>
        <el-button v-if="statusName === '待审批' && proxy.hasPerm(permUrl.reject)" type="primary" @click="apply('refuse')">
          拒绝
        </el-button>
        <el-button v-if="editBtn(statusName, dialogStatus)" type="primary" @click="editForm()">
          编辑
        </el-button>
        <el-button v-if="submitBtn(statusName, dialogStatus) && statusName !== '已取消' && statusName !== '未通过' " type="primary" @click="submitForm()">
          提交
        </el-button>
        <el-button v-if="submitBtn(statusName, dialogStatus)" type="primary" @click="saveForm(ruleFormRef)">
          保存
        </el-button>
        <el-button v-if="delTextBtn(statusName)" type="info" @click="delForm()">
          删除
        </el-button>
        <el-button v-if="statusName === '审批中'" type="info" @click="cancelForm()">
          取消
        </el-button>
        <el-button type="info" @click="resetForm(ruleFormRef)">
          关闭
        </el-button>
      </template>
    </detail-page>
    <detail-block-com v-if="statusName !== '草稿箱' && $route.path.includes('detail')">
      <el-radio-group v-model="activeName">
        <el-radio-button label="基本信息">
          基本信息
        </el-radio-button>
        <el-radio-button label="审批详情">
          审批详情
        </el-radio-button>
      </el-radio-group>
    </detail-block-com>
    <template v-if="activeName === '基本信息'">
      <detail-block-com>
        <el-form ref="ruleFormRef" :model="ruleForm" :class="$route.path.includes('detail') ? 'isDetail' : ''" :rules="rules" label-position="right" label-width="120px" class="form" :disabled="$route.path.includes('detail')">
          <el-row :gutter="24" class="marg">
            <el-col :span="6">
              <el-form-item label="文件编号" prop="formNo">
                <el-input v-model.trim="ruleForm.formNo" placeholder="系统自动生成" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="标题" prop="formName">
                <el-input v-model.trim="ruleForm.formName" placeholder="标题" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="单位" props="senderName">
                <el-input v-model.trim="ruleForm.customerName" placeholder="单位" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="部门">
                <el-input v-model.trim="ruleForm.customerDeptName" placeholder="部门" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="marg">
            <el-col :span="6">
              <el-form-item label="申诉人" prop="appealUserName">
                <el-input v-model.trim="ruleForm.appealUserName" placeholder="申诉人" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="创建人" prop="createUserName">
                <el-input v-model.trim="ruleForm.createUserName" placeholder="创建人" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="创建时间" prop="createTime">
                <el-input v-model.trim="ruleForm.createTime" placeholder="创建时间" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="实验室代码" prop="labCode">
                <!-- <el-input v-model.trim="ruleForm.labCode" placeholder="创建时间" disabled /> -->
                <el-select v-model="ruleForm.labCode" filterable placeholder="实验室代码" style="width: 100%;">
                  <el-option
                    v-for="item in labCodeList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </detail-block-com>
      <detail-block-com>
        <detail-block-switch title="意见内容">
          <el-row :gutter="24" class="marg">
            <el-col :span="1" />
            <el-col :span="22">
              <el-input
                v-model.trim="ruleForm.suggestContent" :rows="4" :disabled="$route.path.includes('detail')"
                type="textarea" placeholder="意见内容"
              />
            </el-col>
            <el-col :span="1" />
          </el-row>
        </detail-block-switch>
      </detail-block-com>
    </template>
    <approval-record-table v-if="activeName === '审批详情'" :process-id="ruleForm.processId" />
  </app-container>
</template>

<style lang="scss" scoped>
// 详情页面隐藏小红点
.isDetail {
  ::v-deep {
    .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap > .el-form-item__label::before,
    .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label::before {
      content: "";
      display: none;
    }
  }
}
</style>