<!-- 内部审核报告编辑页面 -->
<script name="InternalReportHandler" lang="ts" setup>
import type { FormInstance, FormRules, UploadUserFile } from 'element-plus'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import dayjs from 'dayjs'
import internalCheckList from './internalCheckList.vue'
import preventProcessForm from './preventProcessForm.vue'
import { getDictByCode } from '@/api/system/dict'
import useUserStore from '@/store/modules/user'
import { getUserList } from '@/api/system/user'
import { AGREE, TASKNAME } from '@/views/quality/agree'
import { SCHEDULE } from '@/utils/scheduleDict'
import ApprovalDialog from '@/components/ApprovalCustom/ApprovalDialog.vue'
import { detailWork, getWorkList } from '@/api/quality/internal/workManage'
import { getInternalPlanList } from '@/api/quality/internal/internalPlan'
import { getDissatisfiedList } from '@/api/quality/internal/dissatisfied'
import { addQualityReport, approvalDelete, cancelApproval, delteQualityReport, detailQualityReport, draftDelete, internalAuditRepSearch, refuseApproval, submitQualityReport, updateQualityReport } from '@/api/quality/internal/report'
import selectUser from '@/views/quality/components/selectUser.vue'
import { valiateWork } from '@/utils/valiateWork'
import quality from '/public/config/quality.json'
import { filterUser } from '@/views/quality/internal/workManage/components/filterUser'
import { getStaffList } from '@/api/resource/register'
const $route = useRoute()
const $router = useRouter()
const userStore = useUserStore()
const ruleFormRef = ref<FormInstance>() // from组件
// 当前审批状态名字
const approvalStatusName = $route.query.approvalStatusName as string
const ruleForm = ref({
  createTime: '',
  creatorName: '',
  creator: '',
  fileCode: '',
  bizLabCode: '',
  yearNum: '',
  yearTime: '',
  repDeptList: '',
  endTime: '',
  beginTime: '',
  groupLeaderId: '',
  repUserList: [] as any[],
  auditObjective: '',
  auditScope: '',
  auditBasis: '',
  summarize: '',
  resultEvaluation: '',
  measuresRecommended: '',
  measureRequirements: '',
  id: '',
  taskId: '',
}) // 表单
const userList1 = ref<any[]>([])
const userList2 = ref<any[]>([])

const rules = ref<FormRules>({
  yearTime: [{ required: true, message: '年份必选', trigger: ['blur', 'change'] }],
  yearNum: [{ required: true, message: '月份必选', trigger: ['blur', 'change'] }],
  bizLabCode: [{ required: true, message: '实验室必选', trigger: ['blur', 'change'] }],
  repDeptList: [{ required: true, message: '部门必选', trigger: ['blur', 'change'] }],
  beginTime: [{ required: true, message: '审核开始日期必选', trigger: ['blur', 'change'] }],
  endTime: [{ required: true, message: '审核结束日期必选', trigger: ['blur', 'change'] }],
}) // 表单验证规则

onMounted(() => {
  if ($route.path.includes('create')) {
    ruleForm.value.createTime = dayjs().format('YYYY-MM-DD HH:mm')
    // ruleForm.value.beginTime = dayjs().format('YYYY-MM-DD')
    ruleForm.value.creator = userStore.id
    ruleForm.value.creatorName = userStore.name
    // 自动填充数据
    if ($route.query.data) {
      const data = JSON.parse($route.query.data as string)
      // console.log(data, 'data')
      ruleForm.value.yearNum = data.yearNum
      ruleForm.value.yearTime = data.yearTime
      ruleForm.value.bizLabCode = data.bizLabCode
    }
  }
  else {
    rules.value.fileCode = [{ required: true, message: '文件编号必填', trigger: ['blur', 'change'] }]
    detailQualityReport({ id: $route.query.id as string }).then((res) => {
      // console.log(res.data, '详情')
      ruleForm.value = res.data
      setInfoId(res.data.id)
      if (ruleForm.value.repUserList.length) {
        ruleForm.value.repUserList = ruleForm.value.repUserList.map((item: any) => item.userName)
      }
      nextTick(() => {
        ruleFormRef.value?.clearValidate()
      })
    })
  }
})
const labelList = ref<{ id: string; value: string; name: string }[]>()// 实验室代码+
const yearList = ref<{ id: string; value: string; name: string }[]>([])// 年度
const monthList = ref<{ id: string; value: string; name: string }[]>([])// 月份
// 获取字典值
const fetchDict = async () => {
  // 获取实验室代码字典
  getDictByCode('bizLabCode').then((res) => {
    labelList.value = res.data
  })
  // 循环出最近十年的year
  // 获取当前年份
  const year = new Date().getFullYear() + 5
  for (let i = year; i > year - 10; i--) {
    yearList.value?.push({
      name: String(i),
      value: String(i),
      id: String(i),
    })
  }
  yearList.value?.reverse()
  // 月份
  for (let i = 1; i < 13; i++) {
    monthList.value?.push({
      name: String(i),
      value: String(i),
      id: String(i),
    })
  }
  // 用户
  // getUserList({ offset: 1, limit: 99999 }).then((res) => {
  //   userList1.value = res.data.rows.filter((item: any) => item.roleName.includes('组长'))
  //   userList2.value = res.data.rows.filter((item: any) => item.roleName.includes('组员'))
  // })
  const res = await getUserList({ limit: 9999, offset: 1 })
  const allUserList = res.data.rows
  // 获取内审员
  getStaffList({ limit: 9999, offset: 1 }).then((res) => {
    userList1.value = res.data.rows.filter((item: any) => item.auditorCertificate === 1).map((item: any) => ({
      deptName: item.deptName,
      name: item.staffName,
      id: allUserList.filter(citem => citem.account === item.account)[0]?.id,
    }))
  })
  // userList1.value = await filterUser(quality.roleTips['内审组长'])
  userList2.value = await filterUser(quality.roleTips['内审组员'])
}
onBeforeMount(() => {
  fetchDict()
})
const internalAuditRep = ref<any[]>([])
const internalCheck = ref<any[]>([])
watch(
  [() => ruleForm.value.yearTime, () => ruleForm.value.yearNum, () => ruleForm.value.bizLabCode],
  (newVal, oldVal) => {
    if (newVal[0] && newVal[1]) {
      if (!$route.path.includes('create')) {
        return
      }
      // console.log(newVal, 'newVal')
      // 获取对应内审计划
      getInternalPlanList({ limit: 1, offset: 1, fileName: `${newVal[0]}年第${newVal[1]}次` }).then((res) => {
        // console.log(res.data, '内审计划')
        if (res.data.rows.length) {
          ruleForm.value.bizLabCode = res.data.rows[0].bizLabCode
          ruleForm.value.beginTime = res.data.rows[0].createTime
        }
      })
      // 获取对应内审工作
      getWorkList({ yearTime: '', limit: 1000, offset: 1, bizLabCode: ruleForm.value.bizLabCode }).then((res) => {
        const data = res.data.rows.filter((item: any) => item.workName.includes(`${newVal[0]}年第${newVal[1]}次`))
        if (data.length) {
          // ruleForm.value.repDeptList = res.data.rows[0].deptId
          detailWork({ id: data[0].id }).then((res) => {
            ruleForm.value.repUserList = res.data.teamMembers.split(',')
            ruleForm.value.groupLeaderId = userList1.value.filter((item: any) => item.name === res.data.groupLeader)[0]?.id
          })
        }
      })

      if (!$route.path.includes('create')) {
        // 获取对应 预防措施处理单
        internalAuditRepSearch({ repId: $route.query.id }).then((res) => {
          console.log(res.data, '预防措施处理单')
          internalAuditRep.value = res.data
        })
        // 不符合
        getDissatisfiedList({ offset: 1, limit: 9999, formId: SCHEDULE.INTERNAL_AUDIT_NONCONFORMITIES_APPROVAL }).then((res) => {
          // console.log(res.data.rows, '1111111111')
          const data = res.data.rows.filter((item: any) => item.yearNo === ruleForm.value.bizLabCode + newVal[0] + newVal[1])
          internalCheck.value = data
        })
      }
    }
  }
  , {
    deep: true,
  },
)
// ---------------------------------------------保存相关--------------------------------------
const infoId = ref('')
function setInfoId(id: string) {
  infoId.value = id
}
const createRow = (data: any) => {
  addQualityReport(data).then((res) => {
    ElMessage.success('操作成功')
    infoId.value = res.data
  })
}
const updateRow = (data: any) => {
  updateQualityReport(data).then((res) => {
    ElMessage.success('操作成功')
    // infoId.value = res.data
    if (approvalStatusName === '已取消' || approvalStatusName === '未通过') {
      handleSubmit()
    }
    if (approvalStatusName === '全部') {
      close()
    }
  })
}
const saveForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) { return }
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      const ress = await valiateWork(ruleForm.value.yearTime, ruleForm.value.yearNum, ruleForm.value.bizLabCode, '内部审核')
      if (!ress) { return }
      const data = {
        ...ruleForm.value,
        fileName: `${ruleForm.value.yearTime}年第${ruleForm.value.yearNum}次内部审核报告`,
        repUserList: ruleForm.value.repUserList.map((item: any) => {
          return {
            userId: userList2.value.filter((citem: any) => citem.name === item)[0].id,
            userName: item,
          }
        }),
      }
      if ($route.path.includes('create') && !infoId.value) {
        createRow(data)
      }
      else if ($route.path.includes('update') || infoId.value) {
        updateRow({ ...data, id: infoId.value })
      }
    }
  })
}
// ---------------------------------------------审批--------------------------------------
const taskId = ref($route.query.taskId as string || '') // 任务id，用于同意、驳回、拒绝审批
const processId = ref($route.query.processId as string || '') // 流程实例id
const approvalDialog = ref() // 审批组件ref
const showApprovalButton = ref(true) // 是否展示审批按钮
// 审批结束回调
const approvalSuccess = () => {
  showApprovalButton.value = false
}
// 审批
const handleApprove = (val: string) => {
  if (val === '取消') {
    const params = {
      processInstanceId: processId.value!,
      comments: '',
      id: ruleForm.value.id,
    }
    ElMessageBox.confirm(
      '确认取消该审批吗？',
      '提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      },
    )
      .then(() => {
        cancelApproval(params).then((res) => {
          ElMessage({
            type: 'success',
            message: '已取消',
          })
          showApprovalButton.value = false
        })
      })
  }
  else if (val === '同意') {
    approvalDialog.value.initDialog('agree', taskId.value, ruleForm.value.id, processId.value)
  }
  else if (val === '拒绝') {
    approvalDialog.value.initDialog('refuse', taskId.value, ruleForm.value.id, processId.value)
  }
}
// 拒绝
const refuse = (comments: string, taskId: string, id: string) => {
  const params = {
    id,
    taskId, // 任务id
    comments, // 拒绝原因
  }
  refuseApproval(params).then((res) => {
    ElMessage({
      type: 'success',
      message: '已拒绝',
    })
    showApprovalButton.value = false
  })
}
// 选择审批人
const userRef = ref()
// 点击提交
function handleSubmit() {
  if (infoId.value || ruleForm.value.id) {
    // 选择审批人
    userRef.value.initDialog()
  }
  else {
    ElMessage.warning('请先保存')
  }
}
// 确认审批人
const confirmUser = (data: any) => {
  // ruleForm.value.assignees = data
  submitQualityReport({
    formId: SCHEDULE.INTERNAL_AUDIT_APPROVAL,
    // processId: infoId.value,
    id: infoId.value || ruleForm.value.id,
    assignees: data,
  }).then(() => {
    ElMessage.success('提交成功')
    // $router.go(-1)
    close()
  })
}
// 点击提交
// function handleSubmit() {
//   if (infoId.value || ruleForm.value.id) {
//     submitQualityReport({
//       formId: SCHEDULE.INTERNAL_AUDIT_APPROVAL,
//       // processId: infoId.value,
//       id: infoId.value || ruleForm.value.id,
//     }).then(() => {
//       ElMessage.success('提交成功')
//       close()
//     })
//   }
//   else {
//     ElMessage.warning('请先保存')
//   }
// }
// 点击编辑
const handleEdit = () => {
  $router.push({
    path: `/internalreport/update/${ruleForm.value.id}`,
    query: { ...$route.query },
  })
}
const del = () => {
  if (approvalStatusName === '草稿箱') {
    draftDelete({ id: ruleForm.value.id }).then(() => {
      ElMessage.success('已删除')
      close()
    })
  }
  else if (approvalStatusName === '已取消') {
    approvalDelete({ id: ruleForm.value.id, taskId: ruleForm.value.taskId }).then(() => {
      ElMessage.success('已删除')
      close()
    })
  }
  else if (approvalStatusName === '全部') { // 全部的删除
    delteQualityReport({ id: ruleForm.value.id }).then(() => {
      ElMessage.success('已删除')
      close()
    })
  }
}
// 关闭页面
function close() {
  if ($route.query.data) {
    $router.go(-1)
  }
  else {
    $router.push({
      path: '/internal/internalreport',
    })
  }
}
const showMenu = ref('基本信息')
defineExpose({
  ruleForm, showMenu,
})
const { proxy } = getCurrentInstance() as any
</script>

<template>
  <app-container style="overflow: hidden;">
    <!-- 审批弹窗 -->
    <approval-dialog ref="approvalDialog" :agree="AGREE.INTERNAL_AUDIT_APPROVAL" :last-name="TASKNAME.INTERNAL_AUDIT_APPROVAL" @on-success="approvalSuccess" @refuse="refuse" />
    <!-- 选择审批人 -->
    <select-user ref="userRef" @confirm="confirmUser" />
    <detail-page title="内部审核报告">
      <template #btns>
        <el-button v-if="$route.path.includes('detail') && approvalStatusName === '待审批' && showApprovalButton && proxy.hasPerm('/quality/internal/report/agree')" type="primary" @click="handleApprove('同意')">
          同意
        </el-button>
        <el-button v-if="$route.path.includes('detail') && approvalStatusName === '待审批' && showApprovalButton && proxy.hasPerm('/quality/internal/report/reject')" type="danger" @click="handleApprove('拒绝')">
          拒绝
        </el-button>
        <el-button v-if="$route.path.includes('detail') && approvalStatusName === '审批中' && showApprovalButton && proxy.hasPerm('/quality/internal/report/cancel')" type="info" @click="handleApprove('取消')">
          取消
        </el-button>
        <!-- :disabled="!infoId" -->
        <el-button
          v-if="($route.path.includes('create') || ($route.path.includes('update') && approvalStatusName !== '未通过' && approvalStatusName !== '已取消' && approvalStatusName !== '全部')) && proxy.hasPerm('/quality/internal/report/submit')"
          type="primary"
          @click="handleSubmit"
        >
          提交
        </el-button>
        <el-button v-if="approvalStatusName !== '已审批' && $route.path.includes('detail') && approvalStatusName === '未通过' && proxy.hasPerm('/quality/internal/report/update')" type="primary" @click="handleEdit">
          编辑
        </el-button>
        <el-button v-if="!$route.path.includes('detail')" type="primary" @click="saveForm(ruleFormRef)">
          保存
        </el-button>
        <el-button v-if="approvalStatusName === '已取消'" type="danger" @click="del">
          删除
        </el-button>
        <el-button type="info" @click="close">
          关闭
        </el-button>
      </template>
    </detail-page>
    <detail-page v-if="approvalStatusName !== '草稿箱' && !$route.path.includes('create')" title="" class="info-radio">
      <el-radio-group v-model="showMenu">
        <el-radio-button label="基本信息" />
        <el-radio-button label="审批详情" />
      </el-radio-group>
    </detail-page>
    <div v-show="showMenu === '基本信息'">
      <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')">
        <detail-block title="">
          <el-row :gutter="24" class="marg">
            <el-col :span="7">
              <el-form-item label="工作名称" style="display: flex;">
                <el-form-item label="" label-width="0px" prop="yearTime">
                  <el-select
                    v-model="ruleForm.yearTime"
                    placeholder="年份"
                    class="short-input"
                    filterable
                    style="width: 80px;"
                  >
                    <el-option v-for="item in yearList" :key="item.id" :label="item.name" :value="item.value" />
                  </el-select>
                  年第
                </el-form-item>
                <el-form-item label="" label-width="0px" prop="yearNum">
                  <el-select
                    v-model="ruleForm.yearNum"
                    placeholder="次数"
                    class="short-input"
                    filterable
                    style="width: 80px;"
                  >
                    <el-option v-for="item in monthList" :key="item.id" :label="item.name" :value="item.value" />
                  </el-select>
                  次内部审核报告
                </el-form-item>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="文件编号" prop="fileCode">
                <el-input v-model.trim="ruleForm.fileCode" :placeholder="$route.path.includes('create') ? '系统自动生成' : ''" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="实验室" prop="bizLabCode">
                <el-select
                  v-model="ruleForm.bizLabCode"
                  placeholder="实验室"
                  class="short-input"
                  filterable
                  style="width: 100%;"
                >
                  <el-option v-for="item in labelList" :key="item.id" :label="item.name" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="marg">
            <el-col :span="6">
              <el-form-item label="创建人" prop="creatorName">
                <el-input v-model.trim="ruleForm.creatorName" placeholder="创建人" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="1" />
            <el-col :span="6">
              <el-form-item label="创建时间" prop="createTime">
                <el-date-picker
                  v-model="ruleForm.createTime"
                  type="datetime"
                  placeholder="创建时间"
                  value-format="YYYY-MM-DD HH:mm"
                  format="YYYY-MM-DD HH:mm"
                  style="width: 100%;"
                  disabled
                />
              </el-form-item>
            </el-col>
          </el-row>
        </detail-block>
        <detail-block title="">
          <!-- <el-row :gutter="24" class="marg">
          <el-col :span="6">
            <el-form-item label="受审核部门" prop="repDeptList">
              <el-select
                v-model="ruleForm.repDeptList"
                placeholder="请选择部门"
                class="short-input"
                filterable
                style="width: 100%;"
              >
                <el-option v-for="item in repDeptList" :key="item.id" :label="item.name" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row> -->
          <el-row :gutter="24" class="marg">
            <el-col :span="6">
              <el-form-item label="审核开始日期" prop="beginTime">
                <el-date-picker
                  v-model="ruleForm.beginTime"
                  type="date"
                  placeholder="审核开始日期"
                  value-format="YYYY-MM-DD"
                  format="YYYY-MM-DD"
                  style="width: 100%;"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="审核结束日期" prop="endTime">
                <el-date-picker
                  v-model="ruleForm.endTime"
                  type="date"
                  placeholder="审核结束日期"
                  value-format="YYYY-MM-DD"
                  format="YYYY-MM-DD"
                  style="width: 100%;"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="marg">
            <el-col :span="6">
              <el-form-item label="内审组长" prop="groupLeaderId">
                <el-select v-model="ruleForm.groupLeaderId" filterable clearable placeholder="内审组长" style="width: 100%;">
                  <el-option v-for="(item) in userList1" :key="item.id" :label="item.name" :value="item.id">
                    <span style="float: left;">{{ item.name }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px;">{{ item.deptName }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="marg">
            <el-col :span="6">
              <el-form-item label="内审员" prop="repUserList">
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  :content="`${ruleForm.repUserList ? ruleForm.repUserList?.join() : ''}`"
                  placement="bottom"
                >
                  <el-select v-model="ruleForm.repUserList" multiple filterable clearable placeholder="内审组组员" style="width: 100%;">
                    <el-option v-for="(item) in userList2" :key="item.id" :label="item.name" :value="item.name">
                      <span style="float: left;">{{ item.name }}</span>
                      <span style="float: right; color: #8492a6; font-size: 13px;">{{ item.deptName }}</span>
                    </el-option>
                  </el-select>
                </el-tooltip>
              </el-form-item>
            </el-col>
          </el-row>
        </detail-block>
        <detail-block title="">
          <el-row :gutter="24" class="marg">
            <el-col :span="24">
              <el-form-item label="审核目的" prop="auditObjective">
                <el-input v-model="ruleForm.auditObjective" placeholder="审核目的" :rows="3" type="textarea" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="marg">
            <el-col :span="24">
              <el-form-item label="审核范围" prop="auditScope">
                <el-input v-model="ruleForm.auditScope" placeholder="审核范围" :rows="3" type="textarea" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="marg">
            <el-col :span="24">
              <el-form-item label="审核依据" prop="auditBasis">
                <el-input v-model="ruleForm.auditBasis" placeholder="审核依据" :rows="3" type="textarea" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="marg">
            <el-col :span="24">
              <el-form-item label="审核情况综述" prop="summarize">
                <el-input v-model="ruleForm.summarize" placeholder="审核情况综述" :rows="6" type="textarea" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="marg">
            <el-col :span="24">
              <el-form-item label="措施制定要求" prop="measureRequirements">
                <el-input v-model="ruleForm.measureRequirements" placeholder="措施制定要求" :rows="3" type="textarea" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="marg">
            <el-col :span="24">
              <el-form-item label="应采取预防措施建议" prop="measuresRecommended">
                <el-input v-model="ruleForm.measuresRecommended" placeholder="应采取预防措施建议" :rows="3" type="textarea" />
              </el-form-item>
            </el-col>
          </el-row>
        </detail-block>
        <detail-block title="">
          <el-row :gutter="24" class="marg">
            <el-col :span="24">
              <el-form-item label="审核结果评价" prop="resultEvaluation">
                <el-input v-model="ruleForm.resultEvaluation" placeholder="审核结果评价" :rows="3" type="textarea" />
              </el-form-item>
            </el-col>
          </el-row>
        </detail-block>
      </el-form>
      <internal-check-list v-if="!$route.path.includes('create')" :data="internalCheck" />
      <prevent-process-form v-if="!$route.path.includes('create')" :data="internalAuditRep" />
    </div>
    <!-- 审批详情 -->
    <approval-record-table-custom v-if="showMenu === '审批详情'" :process-id="processId" />
  </app-container>
</template>

<style lang="scss" scoped>
.user-container {
  width: 100%;
  height: 120px;
  overflow-y: scroll;
  border: 1px solid #dcdfe6;
  border-radius: 5px;
}

.mx-1 {
  margin-top: 5px;
  margin-right: 5px;
  margin-left: 5px;
}

.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;
    }
  }
}

.info-radio {
  ::v-deep(.header) {
    display: none !important;
  }
}
</style>