<script setup lang="ts" name="DistributeDialog">
import processConfig from './processConfig.vue'
import { getDictByCode } from '@/api/system/dict'
import type { dictType } from '@/global'
import { getTaskDetail } from '@/api/business/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
  })
}

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

// 获取分发详情
const getInfo = () => {
  // 获取任务详情
  getTaskDetail({ orderId: orderId.value, sampleId: sampleId.value }).then((res) => {
    sampleDetail.value.sampleName = res.data.sampleName
    sampleDetail.value.mesureContent = res.data.mesureContent
    sampleDetail.value.remark = res.data.remark
    sampleDetail.value.certifications = res.data.certifications
    sampleDetail.value.measureProcessList = res.data.measureProcessList
    sampleDetail.value.measureSendBackList = res.data.measureSendBackList
  })
}
// 初始化弹窗
const initDialog = (orderid: string, sampleid: string) => {
  dialogVisible.value = true
  sampleId.value = sampleid
  orderId.value = orderid
  getInfo()
}

// 流程配置组件
const processConfigRef = ref()
// 批量添加流程按钮点击
const batchProcessAdd = () => {
  processConfigRef.value.batchProcessAdd()
}
// 保存流程按钮点击
const saveProcess = () => {
  processConfigRef.value.saveProcess()
  emit('close')
}
function cancel() {
  dialogVisible.value = false
}
// ----------------------- 以下是暴露的方法内容 ----------------------------
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" disabled />
      </div>
      <div class="simple-info-line">
        <span class="label">备注:</span>
        <el-input v-model="sampleDetail.remark" disabled />
      </div>
    </div>
    <el-button type="primary" style="margin-top: 5px; margin-bottom: 10px;" @click="batchProcessAdd">
      批量添加
    </el-button>
    <process-config v-if="orderId" ref="processConfigRef" :order-id="orderId" :sample-id="sampleId" :list="sampleDetail.measureProcessList" @save-over="cancel" />
    <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>