<!-- 选择检定审批管理 -->
<script lang="ts" setup name="SelectCertDialog">
import { ElMessage } from 'element-plus'
import type { Ref } from 'vue'
import { ref } from 'vue'
import dayjs from 'dayjs'
import type { DateModelType } from 'element-plus'
import { getDictByCode } from '@/api/system/dict'
import type { deptType, dictType } from '@/global'
import type { TableColumn } from '@/components/NormalTable/table_interface'
import { SCHEDULE } from '@/utils/scheduleDict'
import { getCertificateList } from '@/api/business/taskMeasure/certificate'
const emits = defineEmits(['confirm'])
const dialogFormVisible = ref(false)
// 查询条件
const listQuery = ref({
  approvalStatus: '0', //	审批状态类型code，导出接口不用传
  certificateName: '', //		证书名称
  certificateNo: '', //		证书编号
  formId: SCHEDULE.CERTIFICATE_APPROVAL, //		表单id（流程定义对应的表单id，等价于业务id），导出接口不用传
  groupCode: '', //		组别代码(字典code)
  labCode: '', //		实验室代码(字典code)
  manufactureNo: '', //		出厂编号
  manufacturer: '', //		生产厂家
  measureCategory: '', //		检校类别(字典code)
  model: '', //		规格型号
  sampleName: '', //		受检设备名称
  sampleNo: '', //		被检设备统一编号
  staffName: '', //		检定员名字
  traceDateEnd: '', //		测试、校准或检定日期结束
  traceDateStart: '', //		测试、校准或检定日期开始

  measureValidDateStart: '', // 检定有效期开始
  measureValidDateEnd: '', // 检定有效期结束
  conclusion: '', // 检定结论
  customerName: '', // 委托方
  deptName: '', // 使用部门
  measureDataNo: '', // 检定数据编号
  offset: 1,
  limit: 20,
})
const checkoutList = ref([]) // 多选选中的内容
const loadingTable = ref(false)
const list = ref([]) // 表格数据
const total = ref(0)
const columns = ref<TableColumn[]>([
  { text: '证书编号', value: 'certificateNo', width: '160', align: 'center' },
  { text: '证书名称', value: 'certificateName', align: 'center' },
  { text: '被检设备名称', value: 'sampleName', align: 'center' },
  { text: '规格型号', value: 'model', align: 'center' },
  { text: '出厂编号', value: 'manufactureNo', align: 'center' },
  { text: '生产厂家', value: 'manufacturer', align: 'center' },
  { text: '委托方', value: 'customerName', align: 'center' },
  { text: '使用部门', value: 'deptName', align: 'center' },
  { text: '检定数据编号', value: 'fileArr', align: 'center', width: '180', followLink: true },
  { text: '检校类别', value: 'measureCategoryName', align: 'center', width: '55' },
  { text: '检定日期', value: 'traceDate', align: 'center', width: '120' },
  { text: '检定结论', value: 'conclusion', align: 'center' },
  // { text: '限用说明', value: 'restrictionInstruction', align: 'center' },
  { text: '检定有效期', value: 'measureValidDate', align: 'center', width: '120' },
  { text: '实验室', value: 'labCodeName', align: 'center', width: '120' },
  { text: '部门', value: 'groupCodeName', align: 'center', width: '120' },
  { text: '检定员', value: 'staffName', align: 'center' },
])
const dateRange = ref<[DateModelType, DateModelType]>(['', ''])// 筛选时间段数据
const dateRangeCertificateValid = ref<[DateModelType, DateModelType]>(['', ''])
const timeRange = ref<[DateModelType, DateModelType]>(['', ''])
// --------------------------------------------字典--------------------------------------
const measureCategoryList = ref<dictType[]>([])// 检校类别
const useDeptList = ref<deptType[]>([]) // 部门
const labDeptList = ref<deptType[]>([]) // 实验室
const conclusionList = ref<deptType[]>([]) // 检定结论

async function getDict() {
  // 检校类别
  getDictByCode('measureCategory').then((response) => {
    measureCategoryList.value = response.data
  })

  // 实验室
  getDictByCode('bizGroupCodeEquipment').then((response) => {
    labDeptList.value = response.data
  })

  // 部门
  getDictByCode('bizGroupCode').then((response) => {
    useDeptList.value = response.data
    useDeptList.value = useDeptList.value.filter(item => item.value !== 'GL')
  })

  // 检定结论
  getDictByCode('bizConclusion').then((response) => {
    conclusionList.value = response.data
  })
}
getDict()
// --------------------------------------------字典--------------------------------------
// 数据查询
function fetchData(isNowPage = false) {
  loadingTable.value = true
  if (!isNowPage) {
    // 是否显示当前页，否则跳转第一页
    listQuery.value.offset = 1
  }
  getCertificateList(listQuery.value).then((res) => {
    list.value = res.data.rows.map((item: any) => {
      return {
        ...item,
        certificateName: `${item.certificateNo}-${item.certificateName}`, // 证书报告名称
        followLinkArr: [item.measureDataNo], // 检定数据编号，是一个链接，可跳转
        measureValidDate: item.measureValidDate ? dayjs(item.measureValidDate).format('YYYY-MM-DD') : item.measureValidDate,
        labCodeName: item.labCodeName === '西昌' || item.labCodeName === '海口' ? `${item.labCodeName}实验室` : item.labCodeName,
      }
    })
    total.value = res.data.total
    loadingTable.value = false
  })
}
// 重置
const clearList = () => {
  listQuery.value = {
    approvalStatus: '0', //	审批状态类型code，导出接口不用传
    certificateName: '', //	证书名称
    certificateNo: '', //	证书编号
    formId: SCHEDULE.CERTIFICATE_APPROVAL, //	表单id（流程定义对应的表单id，等价于业务id），导出接口不用传
    groupCode: '', //	组别代码(字典code)
    labCode: '', //	实验室代码(字典code)
    manufactureNo: '', //	出厂编号
    manufacturer: '', //	生产厂家
    measureCategory: '', //	检校类别(字典code)
    model: '', //	规格型号
    sampleName: '', // 受检设备名称
    sampleNo: '', // 被检设备统一编号
    staffName: '', //	检定员名字
    traceDateEnd: '', // 测试、校准或检定日期结束
    traceDateStart: '', // 测试、校准或检定日期开始

    measureValidDateStart: '', // 检定有效期开始
    measureValidDateEnd: '', // 检定有效期结束
    conclusion: '', // 检定结论
    customerName: '', // 委托方
    deptName: '', // 使用部门
    measureDataNo: '', // 检定数据编号
    offset: 1,
    limit: 20,
  }
  dateRange.value = ['', '']
  dateRangeCertificateValid.value = ['', '']
  timeRange.value = ['', '']
  fetchData()
}
// 搜索
const search = () => {
  fetchData(true)
}
// 多选选中
const handleSelectionChange = (val: any) => {
  checkoutList.value = val
}
// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
const changePage = (val: { size?: number;page?: number }) => {
  if (val && val.size) {
    listQuery.value.limit = val.size
  }
  if (val && val.page) {
    listQuery.value.offset = val.page
  }
  search()
}
// 点击确定
const confirmSelect = () => {
  if (!checkoutList.value.length) {
    ElMessage.warning('请选择证书')
  }
  else {
    emits('confirm', checkoutList.value)
    dialogFormVisible.value = false
  }
}
// 取消
const resetForm = () => {
  dialogFormVisible.value = false
  clearList()
}
// 初始化
const initDialog = () => {
  dialogFormVisible.value = true
  fetchData()
}
watch(timeRange, (val) => { // 监听时间变化
  if (val) {
    listQuery.value.traceDateStart = `${val[0]}`
    listQuery.value.traceDateEnd = `${val[1]}`
  }
  else {
    listQuery.value.traceDateStart = ''
    listQuery.value.traceDateEnd = ''
  }
})

watch(dateRangeCertificateValid, (val) => { // 检定有效期变化
  if (val) {
    listQuery.value.measureValidDateStart = `${val[0]}`
    listQuery.value.measureValidDateEnd = `${val[1]}`
  }
  else {
    listQuery.value.measureValidDateStart = ''
    listQuery.value.measureValidDateEnd = ''
  }
})
defineExpose({ initDialog })
</script>

<template>
  <el-dialog v-if="dialogFormVisible" v-model="dialogFormVisible" title="选择证书" width="65%">
    <!-- 筛选条件 -->
    <search-area :need-clear="true" @search="search" @clear="clearList">
      <search-item>
        <el-input
          v-model.trim="listQuery.certificateNo"
          placeholder="证书编号"
          class="short-input"
          clearable
        />
      </search-item>
      <search-item>
        <el-input
          v-model.trim="listQuery.certificateName"
          placeholder="证书名称"
          clearable
          class="short-input"
        />
      </search-item>
      <search-item>
        <el-input
          v-model.trim="listQuery.sampleName"
          placeholder="被检设备名称"
          clearable
          class="short-input"
        />
      </search-item>
      <search-item>
        <el-input
          v-model.trim="listQuery.model"
          placeholder="规格型号"
          clearable
          class="short-input"
        />
      </search-item>
      <search-item>
        <el-input
          v-model.trim="listQuery.manufactureNo"
          placeholder="出厂编号"
          clearable
          class="short-input"
        />
      </search-item>
      <search-item>
        <el-input
          v-model.trim="listQuery.manufacturer"
          placeholder="生产厂家"
          clearable
          class="short-input"
        />
      </search-item>
      <search-item>
        <el-input
          v-model.trim="listQuery.customerName"
          placeholder="委托方"
          clearable
          class="short-input"
        />
      </search-item>
      <search-item>
        <el-input
          v-model.trim="listQuery.deptName"
          placeholder="使用部门"
          clearable
          class="short-input"
        />
      </search-item>
      <search-item>
        <el-input
          v-model.trim="listQuery.measureDataNo"
          placeholder="检定数据编号"
          clearable
          class="short-input"
        />
      </search-item>
      <search-item>
        <el-select
          v-model="listQuery.measureCategory"
          placeholder="检校类别"
          class="short-input"
          filterable
          clearable
        >
          <el-option v-for="item in measureCategoryList" :key="item.id" :label="item.name" :value="item.value" />
        </el-select>
      </search-item>
      <search-item>
        <el-date-picker
          v-model="timeRange"
          type="daterange"
          range-separator="至"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          start-placeholder="检定日期(开始)"
          end-placeholder="检定日期(结束)"
          class="short-input"
        />
      </search-item>
      <search-item>
        <el-select
          v-model="listQuery.conclusion"
          placeholder="检定结论"
          filterable
          class="full-width-input"
          clearable
        >
          <el-option v-for="item in conclusionList" :key="item.id" :label="item.name" :value="item.name" />
        </el-select>
      </search-item>
      <search-item>
        <el-date-picker
          v-model="dateRangeCertificateValid"
          type="daterange"
          range-separator="至"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          start-placeholder="检定有效期(开始)"
          end-placeholder="检定有效期(结束)"
          class="short-input"
        />
      </search-item>
      <search-item>
        <el-select
          v-model="listQuery.labCode"
          placeholder="实验室"
          class="short-input"
          filterable
          clearable
        >
          <el-option v-for="item in labDeptList" :key="item.id" :label="item.name" :value="item.value" />
        </el-select>
      </search-item>
      <search-item>
        <el-select
          v-model="listQuery.groupCode"
          placeholder="部门"
          class="short-input"
          filterable
          clearable
        >
          <el-option v-for="item in useDeptList" :key="item.id" :label="item.name" :value="item.value" />
        </el-select>
      </search-item>
      <search-item>
        <el-input
          v-model.trim="listQuery.staffName"
          placeholder="检定员"
          class="short-input"
          clearable
        />
      </search-item>
    </search-area>

    <!-- 查询结果Table显示 -->
    <div style="padding: 12px;">
      <normal-table
        :data="list"
        :total="total"
        :columns="columns"
        :query="listQuery"
        is-showmulti-select
        :list-loading="loadingTable"
        :is-multi="false"
        :height="260"
        @change="changePage"
        @multi-select="handleSelectionChange"
      >
        <!-- 序号 -->
        <template #preColumns>
          <el-table-column label="#" width="55" align="center" fixed>
            <template #default="scope">
              {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
            </template>
          </el-table-column>
        </template>
      </normal-table>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="confirmSelect">确认</el-button>
        <el-button @click="resetForm">
          取消
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
:deep(.el-radio__label) {
  display: none;
}
</style>