<!-- 测试、校准或检定工作分包通知书书 基本信息 -->
<script name="SubpackageInformBasic" lang="ts" setup>
import dayjs from 'dayjs'
import type { FormRules } from 'element-plus'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import type { Ref } from 'vue'
import type { IForm } from '../inform-interface'
import selectReviewDialog from '../dialog/selectReviewDialog.vue'
import {
  addInform,
  failUpdateInform,
  getInfo,
  submit,
  updateInform,
} from '@/api/business/subpackage/inform'
import { getInfo as getReviewDetail } from '@/api/business/subpackage/Review'
import { getInfo as getDirectoriesDetail } from '@/api/business/subpackage/directories'
import { getDictByCode } from '@/api/system/dict'
import type { dictType } from '@/global'
import useUserStore from '@/store/modules/user'
import { SCHEDULE } from '@/utils/scheduleDict'
import { useUniqueArray, useUniqueArrayOnObject } from '@/utils/useUniqueArray'
import { validateMobile } from '@/utils/validate'

const props = defineProps({
  pageType: { // 页面类型 add新建 edit编辑 detail详情
    type: String,
    requre: true,
    default: 'detail',
  },
  id: {
    type: String,
    requre: true,
  },
  approvalStatusName: { // 审批状态名称
    type: String,
    requre: true,
  },
})
const emits = defineEmits(['addSuccess', 'submitSuccess'])
const user = useUserStore() // 用户信息
const form: Ref<IForm> = ref({
  labCode: '', // 实验室代码
  groupCode: '', // 组别代码
  noticeNo: '', // 通知书编号
  noticeName: '', // 通知书名称
  formId: '',
  createUserId: '', // 申请人id
  createUserName: '', // 申请人名字
  createTime: '', // 申请时间
  accessId: '', // 分包评审表id
  accessName: '', // 分包评审表名称
  noticeUserId: '', // 通知受检单位(委托方)用户id（新建不传，更新传，多个逗号分割）
  noticeUserName: '', //	通知受检单位(委托方)用户名字（新建不传，更新传，多个逗号分割）
  outsourcerName: '', // 分包方名称
  item: '', // 分包项目
  contacts: '', // 联系人
  mobile: '', // 联系电话
  customerId: '', //	受检单位(委托方)id
  customerName: '', //	受检单位名称（新建不传）
})
const ruleFormRef = ref() // 表单ref
const noticeFormRef = ref() // 表单ref
const loading = ref(false) // loading
const infoId = ref('') // id
const validatePhone = (rule: any, value: any, callback: any) => {
  if (!validateMobile(value)) {
    callback(new Error('请输入正确格式的手机号'))
  }
  if (!value && value?.length) {
    callback(new Error('联系电话不能为空'))
  }
  callback()
}
const rules = ref<FormRules>({
  // 表单验证规则
  labCode: [{ required: true, message: '实验室代码不能为空', trigger: ['blur', 'change'] }],
  groupCode: [{ required: true, message: '组别代码不能为空', trigger: ['blur', 'change'] }],
  customerId: [{ required: true, message: '委托方不能为空', trigger: ['blur', 'change'] }],
  accessId: [{ required: true, message: '分包评审表不能为空', trigger: ['blur', 'change'] }],
  contacts: [{ required: true, message: '联系人不能为空', trigger: 'blur' }],
  mobile: [{ required: true, validator: validatePhone, trigger: ['blur', 'change'] }],
})
// ------------------------------------------字典----------------------------------------------
const labCodeList = ref<dictType[]>([]) // 实验室代码
const groupCodeList = ref<dictType[]>([]) // 组别代码
const meterIdentifyDict = ref<dictType[]>([]) // 计量标识
const meterIdentifyMap = ref([]) as any // 计量标识
async function getDict() {
  // 计量标识
  const response = await getDictByCode('eqptMeterIdentify')
  response.data.forEach((item: { value: string; name: string }) => {
    meterIdentifyMap.value[`${item.value}`] = item.name
  })
  // 实验室代码
  getDictByCode('bizLabCode').then((response) => {
    labCodeList.value = response.data
  })
  // 组别代码
  getDictByCode('bizGroupCode').then((response) => {
    groupCodeList.value = response.data
  })
}
// ---------------------------------------------分包设备清单-------------------------------
const list = ref([]) as any // 表格数据
const columns = ref([
  { text: '设备名称', value: 'equipmentName', align: 'center', required: false },
  { text: '规格型号', value: 'model', align: 'center', required: false },
  { text: '出厂编号', value: 'manufactureNo', align: 'center', required: false },
  { text: '生产厂家', value: 'manufacturer', align: 'center', required: false },
  { text: '辅助字段', value: 'helpInstruction', align: 'center', required: false },
  { text: '任务单编号', value: 'orderNo', align: 'center', width: '160' },
  { text: '委托单位', value: 'customerName', align: 'center', width: '90' },
  { text: '计量标识', value: 'meterIdentifyName', align: 'center', required: true },
  { text: '检定有效期', value: 'validDate', align: 'center', required: false, width: '120' },
])
// -----------------------------------------其他方法------------------------------------------

// 获取详情
const fetchInfo = () => {
  loading.value = true
  getInfo({ id: infoId.value }).then((res) => {
    loading.value = false
    form.value = res.data
    fetchgetReviewDetail(form.value.accessId)
  })
}

// -----------------------------------------------保存---------------------------------------
/**
 * 点击保存
 * @param formEl 基本信息表单ref
 */
const saveForm = async () => {
  await ruleFormRef.value.validate((valid: boolean) => {
    if (valid) {
      // 基本信息表单通过校验
      ElMessageBox.confirm('确认保存吗？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        const loading = ElLoading.service({
          lock: true,
          text: '加载中...',
          background: 'rgba(255, 255, 255, 0.6)',
        })
        if (props.pageType === 'add') {
          // 新建
          addInform(form.value).then((res) => {
            loading.close()
            form.value.noticeNo = res.data.noticeNo // 通知书编号
            infoId.value = res.data.id // id
            emits('addSuccess', infoId.value)
            ElMessage.success('已保存')
          })
            .catch(() => {
              loading.close()
            })
        }
        else if (props.pageType === 'edit') {
          // 编辑
          console.log(props.approvalStatusName)
          if (props.approvalStatusName === '草稿箱' || props.approvalStatusName === '全部') {
            updateInform(form.value)
              .then((res) => {
                loading.close()
                emits('addSuccess', infoId.value)
                ElMessage.success('已保存')
              })
              .catch(() => {
                loading.close()
              })
          }
          else {
            // '未通过' || '已取消'
            failUpdateInform(form.value)
              .then((res) => {
                loading.close()
                emits('submitSuccess')
                ElMessage.success('已保存')
              })
              .catch(() => {
                loading.close()
              })
          }
        }
      })
    }
  })
}

// ----------------------------------------------提交--------------------------------------------
// 提交
/**
 *
 * @param processId 流程实例id
 * @param id // id
 */
const submitForm = (processId: string, id: string) => {
  const loading = ElLoading.service({
    lock: true,
    text: '加载中...',
    background: 'rgba(255, 255, 255, 0.6)',
  })
  submit({ id, formId: SCHEDULE.SUBPACKAGE_NOTICE_APPROVAL, processId }).then((res) => {
    ElMessage.success('已提交')
    emits('submitSuccess')
    loading.close()
  })
}
// ------------------------------------------分包方评审表-----------------------------------------------
const selectReviewRef = ref() // 选择分包评审表ref
const customerList = ref([]) as any // 委托方列表
const equipmentList = ref([]) as any // 分包评审表详情查到的设备清单
// 点击选择分包方评审表
const selectReview = () => {
  selectReviewRef.value.initDialog()
}

// 获取分包评审表详情
function fetchgetReviewDetail(id: string) {
  getReviewDetail({ id }).then((response) => {
    form.value.outsourcerName = response.data.outsourcerName // 分包方名称
    form.value.item = response.data.item // 分包项目
    equipmentList.value = response.data.equipmentList
    // 制作委托方列表
    const tempCustomerList = response.data.equipmentList.map((item: { customerName: string; customerId: string }) => {
      return {
        id: item.customerId,
        name: item.customerName,
        value: item.customerId,
      }
    })
    // 数组去重
    customerList.value = useUniqueArrayOnObject(tempCustomerList, 'id')
    if (form.value.customerId !== '') {
      list.value = equipmentList.value.filter((item: { customerId: string }) => item.customerId === form.value.customerId)
      list.value = list.value.map((item: { meterIdentify: string; validDate: string }) => {
        return {
          ...item,
          meterIdentifyName: meterIdentifyMap.value[item.meterIdentify], // 计量标识
          validDate: dayjs(item.validDate).format('YYYY-MM-DD'), // 检定有效期
        }
      })
    }
  })
}

// 选好分包方评审表
const clickConfirmReview = (val: any) => {
  if (val && val.length) {
    if (val[0].id !== form.value.accessId) {
      list.value = []
      form.value.customerId = ''
      form.value.customerName = ''
      form.value.accessId = val[0].id // 分包方评审表id
      fetchgetReviewDetail(val[0].id) // 获取分包评审表详情
    }
  }
}
// ---------------------------------------------钩子----------------------------------------------
watch(
  () => props.id, (newValue) => {
    infoId.value = newValue!
    if (infoId.value) {
      fetchInfo() // 获取详情信息
    }
  },
  { immediate: true },
)

// 监听选中的委托方
watch(() => form.value.customerId, (newValue) => {
  if (`${newValue}` !== '') {
    list.value = equipmentList.value.filter((item: { customerId: string }) => item.customerId === newValue)
    list.value = list.value.map((item: { meterIdentify: string; validDate: string }) => {
      return {
        ...item,
        meterIdentifyName: meterIdentifyMap.value[item.meterIdentify], // 计量标识
        validDate: dayjs(item.validDate).format('YYYY-MM-DD'), // 检定有效期
      }
    })
  }
}, { deep: true, immediate: true })

onMounted(async () => {
  await getDict() // 获取字典
  if (props.pageType !== 'add' && infoId.value) {
    fetchInfo() // 获取详情信息
  }
  if (props.pageType === 'add') {
    form.value.noticeName = '测试、校准或检定工作分包通知书' // 通知书名称
    form.value.createUserId = user.id // 申请人id
    form.value.createUserName = user.name // 申请人名字
    form.value.contacts = user.name // 联系人
    form.value.createTime = dayjs().format('YYYY-MM-DD HH:mm:ss') // 申请时间
  }
})

defineExpose({ saveForm, submitForm })
</script>

<template>
  <div class="inform-basic">
    <detail-block v-loading="loading" title="">
      <el-form
        ref="ruleFormRef"
        :model="form"
        :label-width="130"
        label-position="right"
        :rules="rules"
      >
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="实验室代码" prop="labCode">
              <el-select
                v-model="form.labCode"
                :placeholder="pageType === 'detail' ? ' ' : '请选择实验室代码'"
                :disabled="pageType === 'detail'"
                class="full-width-input"
              >
                <el-option
                  v-for="item in labCodeList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="组别代码" prop="groupCode">
              <el-select
                v-model="form.groupCode"
                :placeholder="pageType === 'detail' ? ' ' : '请选择组别代码'"
                :disabled="pageType === 'detail'"
                class="full-width-input"
              >
                <el-option
                  v-for="item in groupCodeList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="文件编号:" prop="noticeNo">
              <el-input
                v-model="form.noticeNo"
                :placeholder="pageType === 'detail' ? '' : '系统自动生成'"
                :class="{ 'detail-input': pageType === 'detail' }"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="文件名称:" prop="noticeName">
              <el-input
                v-model.trim="form.noticeName"
                :placeholder="pageType === 'detail' ? '' : '通知书名称'"
                :class="{ 'detail-input': pageType === 'detail' }"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="申请人:">
              <el-input v-model="form.createUserName" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="申请时间:" prop="createTime">
              <el-input v-model="form.createTime" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="分包评审表:" prop="accessId">
              <el-input
                v-model="form.accessId"
                :placeholder="pageType === 'detail' ? '' : '请选择分包评审表'"
                :class="{ 'detail-input': pageType === 'detail' }"
                disabled
              >
                <template v-if="pageType !== 'detail'" #append>
                  <el-button size="small" @click="selectReview">
                    选择
                  </el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="委托方" prop="customerId">
              <el-select v-model="form.customerId" clearable :placeholder="pageType === 'detail' ? ' ' : '请选择委托方'" :disabled="pageType === 'detail'" class="full-width-input">
                <el-option v-for="item in customerList" :key="item.id" :label="item.name" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="分包方:" prop="outsourcerName">
              <el-input
                v-model.trim="form.outsourcerName"
                :placeholder="pageType === 'detail' ? '' : '分包方名称'"
                :class="{ 'detail-input': pageType === 'detail' }"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="分包项目:" prop="item">
              <el-input
                v-model.trim="form.item"
                :placeholder="pageType === 'detail' ? '' : '分包项目'"
                :class="{ 'detail-input': pageType === 'detail' }"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系人:" prop="contacts">
              <el-input
                v-model="form.contacts"
                :placeholder="pageType === 'detail' ? ' ' : '请输入联系人'"
                :class="{ 'detail-input': pageType === 'detail' }"
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系电话:" prop="mobile">
              <el-input
                v-model="form.mobile"
                :placeholder="pageType === 'detail' ? ' ' : '请输入联系电话'"
                :class="{ 'detail-input': pageType === 'detail' }"
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </detail-block>
    <detail-block title="分包设备清单">
      <el-table
        :data="list"
        border
        style="width: 100%;"
        max-height="600"
      >
        <el-table-column
          v-if="pageType !== 'detail'"
          type="selection"
          width="38"
        />
        <el-table-column align="center" label="序号" width="80" type="index" />
        <el-table-column
          v-for="item in columns"
          :key="item.value"
          :prop="item.value"
          :label="item.text"
          :width="item.width"
          align="center"
        />
      </el-table>
    </detail-block>
  </div>

  <!-- 选择分包方评审表 -->
  <select-review-dialog ref="selectReviewRef" @confirm="clickConfirmReview" />
</template>