<!-- 批量创建设备交接单 -->
<script lang="ts" setup name="BatchCreateEIRDialog">
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import dayjs from 'dayjs'
import { reactive, ref } from 'vue'
import { el } from 'element-plus/es/locale'
import { interchangeListTerminate } from '@/api/business/manager/sendReceive'
import type { deptType } from '@/global'
import { getDeptTreeList } from '@/api/system/dept'
import { toTreeList } from '@/utils/structure'
import { batchAddInterchangeReceipt } from '@/api/business/manager/interchangeReceipt'
import useUserStore from '@/store/modules/user'
// 用户信息
// 对外暴露的方法： 退回成功
const emits = defineEmits(['cancleCreate']); const user = useUserStore()// 弹窗显示状态
const dialogVisible = ref(false)
// 默认表单
const formData = ref({
  deliverer: '', // 送检人
  delivererDeptId: '', // 送检人/取件人部门id
  delivererDeptName: '',	// 送检人/取件人部门名称
  delivererTel: '', // 电话
  createUserId: '', // 创建人id
  createUserName: '', // 创建人
  createTime: '', // 创建时间
  interchangeType: '', // 交接单类型
  interchangeTypeName: '', // 交接单类型名称
  labCode: '', // 实验室代码
})

// 保存按钮加载状态
const btnLoading = ref(false)
const type = ref('') // 设备交接单类型，1收入、2归还
const typeTitle = ref('')
const equipmentList = ref() as any// 设备id列表
const sampleIdList = ref<string[]>() as any// 设备id列表
// -----------------------------------------字典--------------------------------------------------------------
const useDeptList = ref<deptType[]>([]) // 所属部门列表

// 查询字典
const getDict = async () => {
  // 获取部门列表
  getDeptTreeList().then((res) => {
    // 转成树结构
    // useDeptList.value = toTreeList(res.data, '0', true)
    useDeptList.value = toTreeList(res.data.map((item: any) => ({ ...item, label: item.name, value: item.id })))
  })
}
getDict()
// ----------------------------------表单提交------------------------------------------------
// 表单对象
const dataFormRef = ref<FormInstance>()
// 校验规则
const rules = reactive<FormRules>({
  deliverer: [{ required: true, message: '送检人不能为空', trigger: ['blur', 'change'] }],
  delivererDeptId: [{ required: true, message: '部门不能为空', trigger: ['blur', 'change'] }],
  delivererTel: [{ required: true, message: '电话不能为空', trigger: ['blur', 'change'] }],
})
/**
 * 初始化审批弹窗
 * @param typeParam 设备交接单类型，1收入、2归还
 * @param equipmentList 设备列表
 */
function initDialog(typeParam: string, equipmentListParam: any) {
  // dataFormRef.value!.clearValidate()
  type.value = typeParam === '收入' ? '1' : '2'
  typeTitle.value = typeParam
  dialogVisible.value = true
  equipmentList.value = equipmentListParam
  formData.value.createUserId = user.id// 创建人id
  formData.value.createUserName = user.name // 创建人
  formData.value.createTime = dayjs().format('YYYY-MM-DD HH-mm:ss')// 创建时间
  formData.value.interchangeType = typeParam // 交接单类型
  formData.value.interchangeTypeName = typeParam === '1' ? '设备收入交接单' : '设备归还交接单' // 交接单类型名称
  formData.value.labCode = user.bizLabCode // 实验室代码
  sampleIdList.value = equipmentListParam.map((item: { sampleId: string }) => item.sampleId)
  console.log(equipmentListParam)
}
// 点击确定，提交表单
function submitForm(formEl: FormInstance | undefined) {
  if (!formEl) { return }
  formEl.validate((valid) => {
    if (valid) {
      btnLoading.value = true
      const params = [] as any
      equipmentList.value.forEach((item: any) => {
        params.push({
          sampleIdList: [item.sampleId],
          ...formData.value,
          orderId: item.orderId, // 任务单id
          interchangeType: type.value, // 交接单类型
          deviceTotal: equipmentList.value.length, // 设备总量
          backInterchangeId: item.backInterchangeId, // 归还交接单id
          interchangeId: item.interchangeId, // 收入交接单id
        })
      })
      batchAddInterchangeReceipt(params).then((res) => {
        if (res.data && res.data.length) {
          const message = res.data.join('、')
          ElMessageBox.alert(`${message}已有${typeTitle.value}交接单，不可重复创建！`, '提示', {
            confirmButtonText: '确定',
          })
        }
        else {
          ElMessage.success('交接单批量创建成功')
        }
        dialogVisible.value = false
        btnLoading.value = false
        emits('cancleCreate')
      })
    }
  })
}
// 关闭弹窗
function handleClose() {
  ElMessageBox.confirm(
    `是否放弃设备${typeTitle.value}交接单的创建？`,
    '提示',
    {
      cancelButtonText: '取消',
      confirmButtonText: '确定',
      type: 'warning',
    },
  )
    .then(() => {
      dialogVisible.value = false
      btnLoading.value = false
      // 点击确定，取消创建设备交接单
      emits('cancleCreate') // 取消创建设备交接单
    })
}

// 选中使用部门触发
const nodeClick = (data: any) => {
  formData.value.delivererDeptName = data.name // 送检人部门名称
}
// ----------------------- 以下是暴露的方法内容 ----------------------------
defineExpose({ initDialog })
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    :title="type === '1' ? '新建设备收入交接单' : '新建设备归还交接单'"
    width="600"
    :before-close="handleClose"
  >
    <el-form
      ref="dataFormRef"
      label-position="top"
      label-width="120px"
      :model="formData"
      :rules="rules"
    >
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item :label="type === '1' ? '送检人' : '取件人'" prop="deliverer">
            <el-input
              v-model="formData.deliverer"
              class="full-width-input"
              :placeholder="type === '1' ? '请输入送检人' : '请输入取件人'"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="部门" prop="delivererDeptId">
            <el-tree-select
              v-model="formData.delivererDeptId"
              style="width: 100%;"
              :data="useDeptList"
              :render-after-expand="false"
              check-strictly
              class="full-width-input"
              placeholder="请选择部门"
              @node-click="nodeClick"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="电话" prop="delivererTel">
            <el-input
              v-model="formData.delivererTel"
              placeholder="请输入电话"
              class="full-width-input"
            />
          </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>