<!-- 质量监督报告新建 -->
<script name="QualityReportAdd" lang="ts" setup>
import { ElMessage, ElMessageBox, type FormInstance, type FormRules, type UploadUserFile } from 'element-plus'
import dayjs from 'dayjs'
import recordDialog from './recordDialog.vue'
import type { TableColumn } from '@/components/NormalTable/table_interface'
import { getDictByCode } from '@/api/system/dict'
import { getSearchDept } from '@/api/quality/supervise/record'
import useUserStore from '@/store/modules/user'
import ApprovalDialog from '@/components/ApprovalCustom/ApprovalDialog.vue'
import { SCHEDULE } from '@/utils/scheduleDict'
import { AGREE, TASKNAME } from '@/views/quality/agree'
import selectUser from '@/views/quality/components/selectUser.vue'
import { differenceArray } from '@/utils/Array'
import { addQualityReport, approvalDelete, cancelApproval, delteQualityReport, detailQualityReport, draftDelete, refuseApproval, submitQualityReport, updateQualityReport, updateQualityReportStatus } from '@/api/quality/supervise/report'
const $route = useRoute()
const $router = useRouter()
const userStore = useUserStore()
const approvalStatusName = $route.query.approvalStatusName as string
const ruleFormRef = ref<FormInstance>() // from组件
const labelList = ref<{ id: string; value: string; name: string }[]>()// 实验室代码
const deptList = ref<{ deptName: string; deptId: string;groupNo: string }[]>([]) // 部门列表
const ruleForm = ref({
  id: '',
  taskId: '',
  bizLabCode: '', // 实验室
  supDepId: '', // 部门
  fileCode: '', // 文件编号
  fileName: '质量监督报告', // 文件名称
  creatorName: '', // 创建者
  creator: '', // 创建者
  logTime: '', // 记录时间
  records: [] as any[], // 关联监督记录
  processInfo: '', // 监督的过程统计
  problemProcessDesc: '', // 存在问题过程综述
  betterProcessDesc: '', // 运行情况较好过程综述
  reps: [],
  groupNo: '',
  // assignees: [] as any[],
}) // 表单

const rules = ref<FormRules>({
  bizLabCode: [{ required: true, message: '实验室必选', trigger: ['blur', 'change'] }],
  supDepId: [{ required: true, message: '部门必选', trigger: ['blur', 'change'] }],
  logTime: [{ required: true, message: '时间必选', trigger: ['blur', 'change'] }],
}) // 表单验证规则
const columns = ref<TableColumn[]>([
  { text: '文件编号', value: 'fileCode', align: 'center' },
  { text: '文件名称', value: 'fileName', align: 'center' },
  { text: '质量监督员', value: 'createName', align: 'center' },
  { text: '部门', value: 'deptName', align: 'center' },
  { text: '不符合标准', value: 'standard', align: 'center' },
  { text: '监督时间', value: 'supervisionTime', align: 'center' },
])
// 获取字典值
const fetchDict = () => {
// 获取实验室代码字典
  getDictByCode('bizLabCode').then((res) => {
    labelList.value = res.data
  })
  getSearchDept({ labCode: '' }).then((res) => {
    deptList.value = res.data
  })
}
fetchDict()
const watchFlag = ref(true)
watch(() => ruleForm.value.bizLabCode, (newVal) => {
  if (newVal) {
    if ($route.path.includes('detail') || watchFlag.value) { return }
    ruleForm.value.supDepId = ''
    getSearchDept({ labCode: newVal }).then((res) => {
      deptList.value = res.data
    })
  }
  else {
    getSearchDept({ }).then((res) => {
      deptList.value = res.data
    })
  }
}, {
  deep: true,
})
watch(() => ruleForm.value.supDepId, (newVal) => {
  if ($route.path.includes('detail') || watchFlag.value) { return }
  ruleForm.value.groupNo = ''
  if (newVal) {
    ruleForm.value.groupNo = deptList.value.filter((item: any) => item.deptId === newVal)[0].groupNo
  }
})
const infoId = ref('')
onMounted(() => {
  if ($route.path.includes('create')) {
    watchFlag.value = false
    ruleForm.value.creator = userStore.id
    ruleForm.value.creatorName = userStore.name
    ruleForm.value.logTime = dayjs().format('YYYY-MM-DD HH:mm')
  }
  else {
    rules.value.fileCode = [{ required: true, message: '文件编号必填', trigger: ['blur', 'change'] }]
    detailQualityReport({ id: $route.params.id as string }).then((res) => {
      ruleForm.value = res.data
      infoId.value = res.data.id
      setTimeout(() => {
        watchFlag.value = false
      }, 500)
      nextTick(() => {
        ruleFormRef.value.clearValidate()
      })
    })
  }
})
// 质量监督记录弹窗
const recordRef = ref()
// 选择质量监督记录
const selectRecord = () => {
  recordRef.value.initDialog()
}
// 确认选择质量监督记录
const confirmRecord = (val: any) => {
  console.log(val, '选中')
  // ruleForm.value.records.push(val)
  // 监督的过程统计预置
  // ruleForm.value.processInfo += `${val.}。`
  let str = ''
  val.forEach((ele: any) => {
    const data = JSON.parse(JSON.stringify(ele))
    for (const i in data) {
      if (typeof data[i] === 'object') {
        data[i] = []
      }
    }
    if (!ruleForm.value.records.filter((item: any) => item.id === data.id).length) {
      ruleForm.value.records.push(data)
    }
    ele.processRecords.forEach((item: any) => {
      if (!ruleForm.value.processInfo.includes(item.processInfo)) {
        str += `${item.processInfo}\n`
      }
    })
    ruleForm.value.processInfo += str
  })
}
const checkoutList = ref<any[]>([])
// 多选发生改变时
function handleSelectionChange(e: any) {
  checkoutList.value = e
}
// 删除质量监督记录
const delRecord = () => {
  if (!checkoutList.value.length) {
    ElMessage.warning('请选择需要删除的数据')
    return
  }
  ruleForm.value.records = differenceArray(ruleForm.value.records, checkoutList.value)
}
const createRow = () => {
  addQualityReport(ruleForm.value).then((res) => {
    ElMessage.success('操作成功')
    infoId.value = res.data
  })
}
const updateRow = () => {
  ruleForm.value.reps = []
  updateQualityReport({ ...ruleForm.value, id: infoId.value }).then((res) => {
    ElMessage.success('操作成功')
    // infoId.value = res.data
    if (approvalStatusName === '已取消' || approvalStatusName === '未通过') {
      handleSubmit()
    }
  })
}
const saveForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) { return }
  await formEl.validate((valid, fields) => {
    if (valid) {
      if ($route.path.includes('create') && !infoId.value) {
        createRow()
      }
      else if ($route.path.includes('update') || infoId.value) {
        updateRow()
      }
    }
  })
}
// ---------------------------------------------审批--------------------------------------
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.QUALITY_SUPERVISION_RECORD_APPROVAL,
    // processId: infoId.value,
    id: infoId.value || ruleForm.value.id,
    assignees: data,
  }).then(() => {
    ElMessage.success('提交成功')
    $router.go(-1)
  })
}
// 点击编辑
const handleEdit = () => {
  // pageType.value = 'edit' // 编辑模式
  $router.push({
    // params: { ...$route.params, type: 'update' },
    path: `/supervisereport/update/${ruleForm.value.id}`,
    query: { ...$route.query },
  })
}
const del = () => {
  if (approvalStatusName === '草稿箱') {
    draftDelete({ id: ruleForm.value.id }).then(() => {
      ElMessage.success('已删除')
      $router.go(-1)
    })
  }
  else if (approvalStatusName === '已取消') {
    approvalDelete({ id: ruleForm.value.id, taskId: ruleForm.value.taskId }).then(() => {
      ElMessage.success('已删除')
      $router.go(-1)
    })
  }
  else if (approvalStatusName === '全部') { // 全部的删除
    // delRef.value.initDialog(row)
    delteQualityReport({ id: ruleForm.value.id }).then(() => {
      ElMessage.success('已删除')
      $router.go(-1)
    })
  }
}
const showMenu = ref('基本信息')
defineExpose({
  ruleForm, showMenu,
})
const { proxy } = getCurrentInstance() as any
</script>

<template>
  <app-container style="overflow: hidden;">
    <!-- 监督记录弹窗 -->
    <record-dialog ref="recordRef" @add="confirmRecord" />
    <!-- 审批弹窗 -->
    <approval-dialog ref="approvalDialog" :agree="AGREE.QUALITY_SUPERVISION_RECORD_APPROVAL" :last-name="TASKNAME.QUALITY_SUPERVISION_RECORD_APPROVAL" @on-success="approvalSuccess" @refuse="refuse" />
    <!-- 选择审批人 -->
    <select-user ref="userRef" @confirm="confirmUser" />
    <detail-page title="质量监督报告" class="info-header">
      <template #btns>
        <el-button v-if="$route.path.includes('detail') && approvalStatusName === '待审批' && showApprovalButton && proxy.hasPerm('/quality/supervise/report/agree')" type="primary" @click="handleApprove('同意')">
          同意
        </el-button>
        <el-button v-if="$route.path.includes('detail') && approvalStatusName === '待审批' && showApprovalButton && proxy.hasPerm('/quality/supervise/report/reject')" type="danger" @click="handleApprove('拒绝')">
          拒绝
        </el-button>
        <el-button v-if="$route.path.includes('detail') && approvalStatusName === '审批中' && showApprovalButton && proxy.hasPerm('/quality/supervise/report/cancel')" type="info" @click="handleApprove('取消')">
          取消
        </el-button>
        <!-- :disabled="!infoId" -->
        <el-button
          v-if="($route.path.includes('create') || ($route.path.includes('update') && approvalStatusName !== '未通过' && approvalStatusName !== '已取消')) && proxy.hasPerm('/quality/supervise/report/submit')"
          type="primary"
          @click="handleSubmit"
        >
          提交
        </el-button>
        <el-button v-if="approvalStatusName !== '已审批' && $route.path.includes('detail') && approvalStatusName === '未通过' && proxy.hasPerm('/quality/supervise/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="!$route.path.includes('detail')" type="primary" @click="bind">
          rfid标签绑定
        </el-button> -->
        <el-button v-if="approvalStatusName === '已取消'" type="danger" @click="del">
          删除
        </el-button>
        <el-button type="info" @click="$router.go(-1)">
          关闭
        </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>
    <el-form v-show="showMenu === '基本信息'" 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="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-col :span="6">
            <el-form-item label="部门" prop="supDepId">
              <el-select
                v-model="ruleForm.supDepId"
                placeholder="部门"
                class="short-input"
                filterable
                style="width: 100%;"
              >
                <el-option v-for="item in deptList" :key="item.deptId" :label="item.deptName" :value="item.deptId" />
              </el-select>
            </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-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="6">
            <el-form-item label="文件名称">
              <el-input v-model.trim="ruleForm.fileName" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="质量监督员">
              <el-input v-model.trim="ruleForm.creatorName" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="记录时间" prop="logTime">
              <el-date-picker
                v-model="ruleForm.logTime"
                type="datetime"
                style="width: 100%;"
                format="YYYY-MM-DD HH:mm"
                value-format="YYYY-MM-DD HH:mm"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </detail-block>
      <detail-block title="" class="info-body">
        <el-row :gutter="24" class="marg">
          <el-col :span="20">
            <el-form-item label="关联质量监督记录" label-width="160px">
              <div style="width: 100%;display: flex;justify-content: space-between;">
                <el-button v-if="!$route.path.includes('detail')" type="primary" @click="selectRecord">
                  选择质量监督记录
                </el-button>
                <el-button v-if="!$route.path.includes('detail')" type="info" @click="delRecord">
                  删除行
                </el-button>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="20">
            <el-form-item label="" label-width="160px">
              <normal-table
                :data="ruleForm.records" :columns="columns" :pagination="false"
                :is-showmulti-select="$route.path.includes('detail') ? false : true" :is-multi="true"
                @multi-select="handleSelectionChange"
              >
                <template #preColumns>
                  <el-table-column label="序号" align="center" width="60">
                    <template #default="scope">
                      {{ scope.$index + 1 }}
                    </template>
                  </el-table-column>
                </template>
              </normal-table>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="20">
            <el-form-item label="监督的过程统计" label-width="160px">
              <el-input v-model="ruleForm.processInfo" type="textarea" :rows="5" placeholder="监督的过程统计" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="20">
            <el-form-item label="运行情况较好过程综述" label-width="160px">
              <el-input v-model="ruleForm.betterProcessDesc" type="textarea" :rows="5" placeholder="运行情况较好过程综述" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="20">
            <el-form-item label="存在问题过程综述" label-width="160px">
              <el-input v-model="ruleForm.problemProcessDesc" type="textarea" :rows="5" placeholder="存在问题过程综述" />
            </el-form-item>
          </el-col>
        </el-row>
      </detail-block>
    </el-form>
    <!-- 审批详情 -->
    <approval-record-table-custom v-if="showMenu === '审批详情'" :process-id="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;
    }
  }
}

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