<script setup lang="ts" name="DistributeDialog">
import { Aim } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getDictByCode } from '@/api/system/dict'
import type { dictType } from '@/global'
import { allocate, executiveDetail } from '@/api/business/schedule/task'
// 实验室任务分发弹窗

// 自定义方法：close关闭弹窗
const emit = defineEmits(['close'])
const dialogVisible = ref(false) // 弹窗显示
const sampleId = ref('') // 样品id
const orderId = ref('') // 委托单id

// 委托书-证书类别列表
const certificationTypes = ref<dictType[]>([])
// 获取字典值
function getDict() {
  getDictByCode('certificationType').then((response) => {
    certificationTypes.value = response.data
  })
}
// 样品详情
const sampleDetail = ref({
  sampleName: '',
  measureContent: '',
  certifications: [] as any,
  remark: '',
  laboratoryId: '',
  deptId: '',
  deptName: '',
})

const processNode = ref({
  id: '', // 检测节点id
  executiveItem: '', // 检测项目
  executiveDept: '', // 检测部门
  executiveDeptName: '', // 检测部门
  executivePerson: '', // 检测人员
  executivePersonName: '', // 检测人员
  measureState: '0', // 检测状态:待分发，待分配，待检测，检测中，检测完，退回，取消
  measureStateName: '', // 检测状态
  currentCertifications: '', // 当前证书数
  requireCertifications: '', // 应出具证书数
  updateTime: '', // 更新时间
  backPerson: '', // 退回人
  backReason: '', // 退回原因
  backTime: '', // 退回时间
  distributePerson: '', // 分配人
  distributeTime: '', // 分配时间
  startTime: '', // 检测开始时间
  overTime: '', // 检测结束时间
  measurePersonId: '', // 检定人员id
  measureSegmentId: '', // 实验室id
})
const _selectStaffDialog = ref()

// 初始化弹窗
const initDialog = (id: string, sampleid: string, orderid: string) => {
  dialogVisible.value = true
  sampleId.value = sampleid
  orderId.value = orderid
  executiveDetail({ orderId: orderid, sampleId: sampleid }).then((res) => {
    if (res.data) {
      sampleDetail.value = res.data
      sampleDetail.value.laboratoryId = id
      // 证书类别
      console.log(res.data)
      sampleDetail.value.certifications = [res.data.measureType]
      // sampleDetail.value.deptName = res.data.measureProcessList[0].measureSegment
      const ItemInfo = res.data.measureProcessList.filter((item: { measurePerson: any; measureSegmentId: any }) => {
        return item.measurePerson == localStorage.name
      })
      console.log(ItemInfo)
      sampleDetail.value.deptId = ItemInfo[0].measureSegmentId
      // 延迟使用，因为还没挂载
      nextTick(() => {
        _selectStaffDialog.value.fetchData()
      })
      // 接口未提供字段,默认先使用1
      // sampleDetail.value.certifications = res.data.certifications.split(',')
    }
  })
}

// 选择人员
const choosePersonShow = ref(false)
const choosePerson = () => {
  choosePersonShow.value = true
}
// 人员选择完毕
const choosePersonOver = (person: { id: string; name: string; measurePersonId: string; measureSegmentId: string }) => {
  console.log(person)
  processNode.value.executivePerson = person.id
  processNode.value.executivePersonName = person.name
  processNode.value.measurePersonId = person.measurePersonId
  processNode.value.measureSegmentId = person.measureSegmentId
  choosePersonShow.value = false
}

// 流程配置组件
const processConfigRef = ref()
// 保存流程按钮点击分配
const saveProcess = () => {
  // ctx.emit('fetchData') // fatherMethod 是想要调用父组件的一个方法

  const postData = {
    id: sampleDetail.value.laboratoryId, // 实验室检测id
    measurePersonId: processNode.value.executivePerson, // 分配检定人员id（在本部门下的计量人员列表中选择）
    requireCertifications: processNode.value.requireCertifications, // 应出具证书总数
  }
  allocate(postData).then((res: { code: number }) => {
    if (res.code == 200) {
      ElMessage.success('分配成功')
    }
  })
  emit('close')
}

function cancel() {
  dialogVisible.value = false
}
getDict()

// ----------------------- 以下是暴露的方法内容 ----------------------------
defineExpose({ initDialog })
</script>

<template>
  <el-dialog v-model="dialogVisible" title="任务分发" width="700" @close="cancel">
    <div class="simple-info">
      <div class="simple-info-line">
        <span class="label">样品名称:</span>
        <el-input v-model="sampleDetail.sampleName" disabled style="width: 280px;" />
      </div>
      <div class="simple-info-line">
        <span class="label">证书类别:</span>
        <el-checkbox-group v-model="sampleDetail.certifications" disabled>
          <el-checkbox v-for="item in certificationTypes" :key="item.value" :label="item.value">
            {{ item.name }}
          </el-checkbox>
        </el-checkbox-group>
      </div>
      <div class="simple-info-line">
        <span class="label">检定项目:</span>
        <el-input v-model="sampleDetail.measureContent" disabled style="width: 480px;" />
      </div>
      <div class="simple-info-line">
        <span class="label">备注:</span>
        <el-input v-model="sampleDetail.remark" disabled style="width: 480px;" />
      </div>
      <div class="simple-info-line">
        <span class="label">检定人员:</span>
        <el-input v-model="processNode.executivePersonName" readonly class="process-input" style="width: 180px;">
          <template #append>
            <el-button :icon="Aim" size="small" link @click="choosePerson" />
          </template>
        </el-input>
      </div>
      <div class="simple-info-line">
        <span class="label">应出具证书:</span>
        <el-input v-model="processNode.requireCertifications" style="width: 50px;margin-right: 10px;" /> 份
      </div>
    </div>
    <template #footer>
      <el-button type="primary" @click="saveProcess">
        分配
      </el-button>
      <el-button @click="cancel">
        取消
      </el-button>
    </template>
    <!-- :dept-id="sampleDetail.deptId" -->
    <select-staff-dialog ref="_selectStaffDialog" v-model:visible="choosePersonShow" :dept-id="sampleDetail.deptId" :data="[processNode.executivePerson]" :multi="false" @change="choosePersonOver" />
  </el-dialog>
</template>

<style lang="scss" scoped>
//  样式
.simple-info {
  margin-top: -10px;
  margin-bottom: 10px;

  .simple-info-line {
    display: flex;
    align-items: center;
    margin: 7px 0;

    .label {
      display: block;
      width: 110px;
    }
  }
}
</style>