<!-- 批量检完并更新信息 -->
<script lang="ts" setup name="BatchFinishDialog">
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import { reactive, ref } from 'vue'
import dayjs from 'dayjs'
import { getDictByCode } from '@/api/system/dict'
import type { dictType } from '@/global'
import { batchTerminate } from '@/api/business/manager/sendReceive'
const emits = defineEmits(['onSuccess'])
// 弹窗显示状态
const dialogVisible = ref(false)
// 默认表单
const form = ref({
  checkOrganization: '中国西昌卫星发射中心计量测试站', // 检定校准机构
  traceDate: '', // 检定日期
  measureValidDate: '', // 检定有效期至
  conclusion: '', // 检定结论
  meterIdentify: '', // 计量标识
  restrictionInstruction: '', // 限用说明
  orderId: '', // 委托书id
  sampleId: '', // 样品id
})

const getList = ref([]) as any

// 保存按钮加载状态
const btnLoading = ref(false)
// -------------------------------------------字典---------------------------------------------+
const conclusionList = ref<dictType[]>([]) // 结论
const meterIdentifyDict = ref<dictType[]>([]) // 计量标识

// 获取字典值
async function getDict() {
  // 结论
  getDictByCode('bizConclusion').then((response) => {
    conclusionList.value = response.data
  })

  // 计量标识
  getDictByCode('eqptMeterIdentify').then((response) => {
    meterIdentifyDict.value = response.data
  })
}

// ---------------表单提交--------------------------------
// 表单对象
const dataFormRef = ref<FormInstance>()
// 校验规则
const rules = reactive<FormRules>({
  traceDate: [{ required: true, message: '检定日期不能为空', trigger: ['blur', 'change'] }],
  measureValidDate: [{ required: true, message: '检定有效期至不能为空', trigger: ['blur', 'change'] }],
  conclusion: [{ required: true, message: '检定结论不能为空', trigger: ['blur', 'change'] }],
  meterIdentify: [{ required: true, message: '计量标识不能为空', trigger: ['blur', 'change'] }],
  restrictionInstruction: [{ required: true, message: '限用说明不能为空', trigger: ['blur', 'change'] }],
})
/**
 * 初始化审批弹窗
 * @param orderId 委托书id
 * @param sampleId 样品id
 */
function initDialog(list: any) {
  if (list && list.length) {
    getList.value = list.map((item: any) => {
      return {
        orderId: item.orderId, // 委托书id
        sampleId: item.sampleId, // 样品id
      }
    })
  }
  // 检定日期默认今天
  form.value.traceDate = dayjs().format('YYYY-MM-DD')
  // 检定日期默认检定日期一年后
  form.value.measureValidDate = dayjs().add(1, 'y').format('YYYY-MM-DD')
  getDict()
  dialogVisible.value = true
}

// 检定日期变化事件
const changeTraceDate = (val: string) => {
  form.value.measureValidDate = dayjs(val).add(1, 'y').format('YYYY-MM-DD')
}

// 提交表单
function submitForm(formEl: FormInstance | undefined) {
  if (!formEl) { return }
  formEl.validate((valid) => {
    if (valid) {
      btnLoading.value = true
      const param = getList.value.map((item: any) => {
        return {
          ...item,
          checkOrganization: '中国西昌卫星发射中心计量测试站', // 检定校准机构
          traceDate: form.value.traceDate, // 检定日期
          measureValidDate: form.value.measureValidDate, // 检定有效期至
          conclusion: form.value.conclusion, // 检定结论
          meterIdentify: form.value.meterIdentify, // 计量标识
          restrictionInstruction: form.value.restrictionInstruction, // 限用说明
          status: '5', // 完成状态需要变为5
        }
      })
      batchTerminate(param).then((res) => {
        ElMessage.success('操作成功')
        btnLoading.value = false
        dialogVisible.value = false
        emits('onSuccess')
      }).catch((_) => {
        btnLoading.value = false
      })
    }
  })
}
// 关闭弹窗
function handleClose() {
  dataFormRef.value?.resetFields() // 清除填入的信息和校验
  dialogVisible.value = false
}

// 检定结论变化
const changeConclusion = (val: string) => {
  if (val === '所检项目合格') {
    form.value.meterIdentify = '合格'
  }
  else {
    form.value.meterIdentify = '停用'
  }
}

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

<template>
  <el-dialog
    v-model="dialogVisible"
    title="批量检完并更新设备信息"
    width="600"
    :before-close="handleClose"
  >
    <el-form
      ref="dataFormRef"
      label-position="top"
      label-width="80px"
      :model="form"
      :rules="rules"
    >
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="检定(校准)机构:">
            <el-input v-model="form.checkOrganization" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="检定日期:" prop="traceDate">
            <el-date-picker
              v-model="form.traceDate"
              type="date"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              placeholder="请选择日期"
              class="full-width-input"
              @change="changeTraceDate"
            />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="检定有效期至:" prop="measureValidDate">
            <el-date-picker
              v-model="form.measureValidDate"
              type="date"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              placeholder="请选择日期"
              class="full-width-input"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="检定结论:" prop="conclusion">
            <el-select
              v-model="form.conclusion"
              placeholder="请选择检定结论"
              filterable
              class="full-width-input"
              @change="changeConclusion"
            >
              <el-option v-for="item in conclusionList" :key="item.id" :label="item.name" :value="item.name" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="计量标识:" prop="meterIdentify">
            <el-select
              v-model="form.meterIdentify"
              class="full-width-input"
              placeholder="计量标识"
            >
              <el-option v-for="item of meterIdentifyDict" :key="item.value" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-if="form.conclusion === '除*外其余所检项目合格'" :span="24">
          <el-form-item label="限用说明:" prop="restrictionInstruction">
            <el-input v-model="form.restrictionInstruction" type="textarea" autosize placeholder="请输入限用说明" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button type="primary" :loading="btnLoading" @click="submitForm(dataFormRef)">
        提交
      </el-button>
      <el-button type="info" @click="handleClose">
        取消
      </el-button>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
// 样式
</style>