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

// 自定义方法：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
  })
}

getDict()
// 样品详情
const sampleDetail = ref({
  sampleName: '压力表',
  mesureContent: '压力、ip68',
  certifications: ['1', '2'],
  remark: '这是备注',
})

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

// 初始化弹窗
const initDialog = (sampleid: string, orderid: string) => {
  dialogVisible.value = true
  sampleId.value = sampleid
  orderId.value = orderid
}

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

// 流程配置组件
const processConfigRef = ref()
// 保存流程按钮点击
const saveProcess = () => {
  emit('close')
}
function cancel() {
  dialogVisible.value = false
}
// ----------------------- 以下是暴露的方法内容 ----------------------------
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.mesureContent" 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>
    <select-staff-dialog v-model:visible="choosePersonShow" :data="[processNode.executivePerson]" :dept-id="processNode.executiveDept" :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>