<script setup lang="ts" name="DistributeDialog">
import processConfig from './processConfig.vue'
import { getDictByCode } from '@/api/system/dict'
import type { dictType } from '@/global'
import { getTaskDetail, init } from '@/api/business/schedule/task'
// 任务分发弹窗

// 自定义方法：close关闭弹窗
const emit = defineEmits(['close', 'saveOver'])
const dialogVisible = ref(false) // 弹窗显示
const sampleId = ref('') // 样品id
const orderId = ref('') // 委托单id
const type = ref('distribute')
const isDept = ref(false) // 是否是部门检测
// 委托书-证书类别列表
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: '这是备注',
  measureProcessList: [],
  measureSendBackList: [],
})

// 分发接口初始化
const getInfoNext = (measureContent: string) => {
  init({ measureContent, orderId: orderId.value, sampleId: sampleId.value }).then((res) => {
    console.log(res)
  })
}

// 获取分发详情
const getInfo = () => {
  // 获取任务详情
  getTaskDetail({ orderId: orderId.value, sampleId: sampleId.value }).then((res) => {
    sampleDetail.value.sampleName = res.data.sampleName
    sampleDetail.value.mesureContent = res.data.measureContent
    sampleDetail.value.remark = res.data.remark
    sampleDetail.value.certifications = res.data.certifications.split(',')
    sampleDetail.value.measureProcessList = res.data.measureProcessList
    sampleDetail.value.measureSendBackList = res.data.measureSendBackList
    getInfoNext(res.data.measureContent)
  })
}

// 初始化弹窗
/**
 *
 * @param orderid 委托书id
 * @param sampleid 样品id
 * @param sampleStatus distribute 待分发（分发到实验室）， dispatch（分配到人）
 * @param isDeptType 是否是部门类型
 */
const initDialog = (orderid: string, sampleid: string, sampleStatus: string, isDeptType?: Boolean) => {
  dialogVisible.value = true
  sampleId.value = sampleid
  isDept.value = isDeptType as boolean
  orderId.value = orderid
  if (sampleStatus === '3') { // 检测中
    type.value = 'testing'
  }
  else if (sampleStatus === '2') { // 待分发
    type.value = 'distribute'
  }
  getInfo()
}

// 流程配置组件
const processConfigRef = ref()
// 批量添加流程按钮点击
const batchProcessAdd = () => {
  processConfigRef.value.batchProcessAdd()
}
// 保存流程按钮点击
const saveProcess = () => {
  processConfigRef.value.saveProcess()
}
function cancel() {
  dialogVisible.value = false
}
// 保存流程成功
const saveOver = () => {
  dialogVisible.value = false
  emit('close')
}
// ----------------------- 以下是暴露的方法内容 ----------------------------
defineExpose({ initDialog })
</script>

<template>
  <el-dialog v-model="dialogVisible" title="任务分发" width="1000" @close="cancel">
    <div class="simple-info">
      <div class="simple-info-line">
        <span class="label">样品名称:</span>
        <el-input v-model="sampleDetail.sampleName" disabled />
      </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" type="textarea" autosize disabled />
      </div>
      <div class="simple-info-line">
        <span class="label">备注:</span>
        <el-input v-model="sampleDetail.remark" type="textarea" autosize a disabled />
      </div>
    </div>
    <el-button v-if="!isDept" type="primary" style="margin-top: 5px; margin-bottom: 10px;" @click="batchProcessAdd">
      批量添加
    </el-button>
    <process-config
      v-if="orderId"
      :key="Math.random()"
      ref="processConfigRef"
      :type="type"
      :order-id="orderId"
      :sample-id="sampleId"
      :list="sampleDetail.measureProcessList"
      :is-dept="isDept"
      @save-over="saveOver"
    />
    <template #footer>
      <el-button type="primary" @click="saveProcess">
        确定
      </el-button>
      <el-button @click="cancel">
        取消
      </el-button>
    </template>
  </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 {
      width: 90px;
    }
  }
}
</style>
