<!-- 溯源证书管理详情 -->
<script lang="ts" setup name="EquipmentSourceCertDetail">
import { ref } from 'vue'
import dayjs from 'dayjs'
import { ElLoading, ElMessage } from 'element-plus'
import type { IForm } from '../cert/cert-interface'
import selectApproveList from './dialog/selectFieldTestApprove.vue'
import selectSourceDialog from '@/views/equipement/source/plan/dialog/selectSourceDialog.vue'
import { getStaffList } from '@/api/resource/register'
import useUserStore from '@/store/modules/user'
import { getDictByCode } from '@/api/system/dict'
import type { dictType } from '@/global'
import { useCheckList } from '@/commonMethods/useCheckList'
import { getInfo } from '@/api/business/fieldTest/approve'
import { UploadFile } from '@/api/file'
import { getInfo as getEquipmentDetail } from '@/api/equipment/info/book'
import SelectEquipmentDialog from '@/views/business/fieldTest/approve/dialog/selectEquipmentDialog.vue'
import { addSourceCertList, updateSourceCert } from '@/api/equipment/source/cert'
// import type { IOptions } from '@/views/device/standardEquipment/standard_interface'
const user = useUserStore() // 用户信息
const textMap: { [key: string]: string } = {
  edit: '编辑',
  add: '新建',
  detail: '详情',
}// 字典
const $router = useRouter() // 关闭页面使用
const $route = useRoute() // 路由参数
const pageType = ref('add') // 页面类型: add, edit, detail
const infoId = ref('') // 列表id
const ruleFormRef = ref() // 表单ref
const form = ref<IForm>({
  certificateName: '', // 证书名称
  certificateNo: '', // 证书编号
  equipmentId: '', // 设备id
  equipmentName: '', // 设备名称
  equipmentNo: '', // 设备编号
  model: '', // 规格型号
  manufacturer: '', // 生产厂家
  manufactureNo: '', // 出厂编号
  labCodeName: '', // 实验室
  labCode: '', // 实验室
  groupCode: '', // 部门
  groupCodeName: '', // 部门名称
  directorId: '', // 负责人id
  directorName: '', // 负责人
  validDate: '', // 检定有效期
  traceDate: '', // 检定日期
  certificateValid: '', // 证书有效期
  meterIdentify: '1', 	// 计量标识(字典code)
  meterIdentifyName: '',	// 计量标识(字典value)
  remark: '', // 备注
})
// 校验规则
const formRules = ref({
  // certificateNo: [{ required: true, message: '证书编号不能为空', trigger: ['blur', 'change'] }],
  // certificateName: [{ required: true, message: '证书名称不能为空', trigger: ['blur', 'change'] }],
  equipmentNo: [{ required: true, message: '统一编号不能为空', trigger: ['blur', 'change'] }],
  equipmentName: [{ required: true, message: '设备名称不能为空', trigger: ['blur', 'change'] }],
  traceCompany: [{ required: true, message: '溯源单位不能为空', trigger: ['blur', 'change'] }],
  traceDate: [{ required: true, message: '检定日期不能为空', trigger: ['blur', 'change'] }],
  certificateValid: [{ required: true, message: '证书有效期不能为空', trigger: ['blur', 'change'] }],
  meterIdentify: [{ required: true, message: '计量标识不能为空', trigger: ['blur', 'change'] }],
})

// -------------------------------------------字典------------------------------------------
const meterIdentifyDict = ref<dictType[]>([]) // 计量标识
const groupCodeList = ref<dictType[]>([]) // 部门
const labCodeList = ref<dictType[]>([]) // 实验室

// 获取字典值
async function getDict() {
  // 计量标识
  getDictByCode('equipmentSourceMeterIdentify').then((response) => {
    meterIdentifyDict.value = response.data
  })
  // 实验室
  getDictByCode('bizGroupCodeEquipment').then((response) => {
    labCodeList.value = response.data
  })

  // 部门
  getDictByCode('bizGroupCode').then((response) => {
    groupCodeList.value = response.data
  })
}
// ----------------------------------路由参数--------------------------------------------
if ($route.params && $route.params.type) {
  pageType.value = $route.params.type as string
  console.log(pageType.value)

  if ($route.params.id) {
    infoId.value = $route.params.id as string
  }
}
// --------------------------------------选择设备编号-------------------------------------------------
const selectEquipmentDialogRef = ref() // 选择设备编号组件ref
// 批量添加
const selectEquipment = () => {
  selectEquipmentDialogRef.value.initDialog()
}

// 确定选择设备
const confirmSelectEquipment = (val: any) => {
  if (val.length) {
    getEquipmentDetail({ id: val[0].id, type: '1' }).then((res) => {
      form.value.equipmentId = val[0].id // 设备id
      form.value.equipmentName = res.data.equipmentInfoApproval.equipmentName // 设备名称
      form.value.equipmentNo = res.data.equipmentInfoApproval.equipmentNo // 统一编号
      form.value.model = res.data.equipmentInfoApproval.model // 规格型号
      form.value.manufacturer = res.data.equipmentInfoApproval.manufacturer // 生产厂家
      form.value.manufactureNo = res.data.equipmentInfoApproval.manufactureNo // 出厂编号
      form.value.labCodeName = res.data.equipmentInfoApproval.labCodeName // 实验室
      form.value.labCode = res.data.equipmentInfoApproval.labCode // 实验室
      form.value.groupCode = res.data.equipmentInfoApproval.groupCode // 部门
      form.value.groupCodeName = res.data.equipmentInfoApproval.groupCodeName // 部门名称
      form.value.directorId = res.data.equipmentInfoApproval.directorId // 负责人id
      form.value.directorName = res.data.equipmentInfoApproval.directorName // 负责人
      form.value.validDate = res.data.equipmentInfoApproval.validDate // 检定有效期
    })
  }
}

// -----------------------------------------表格-------------------------------------------
const list = ref([]) as any // 表格数据列表
const checkoutList = ref([]) as any // 技术指标表格选中
const addObj = { //
  id: '',
  certificateType: '', // 证书类型
  certificateNo: '', // 证书编号
  traceCompany: '', // 溯源单位
  certificateFile: '', // 检定证书
}
const columns = [ // 表头
  { text: '证书类型', value: 'certificateType', required: true },
  { text: '证书编号', value: 'certificateNo', required: true },
  { text: '溯源单位', value: 'traceCompany', required: true },
  { text: '检定证书', value: 'certificateFile', required: true },
]

/**
 * 点击增加行
 */
const addRow = () => {
  if (useCheckList(list.value, columns, '表格')) {
    list.value.push({ ...addObj })
  }
}

/**
 * 点击删除行
 */
const deleteRow = () => {
  list.value = list.value.filter((item: any) => {
    return !checkoutList.value.includes(item)
  })
}
// 表格多选选中
const handleSelectionChange = (e: any) => {
  checkoutList.value = e
}
// -------------------------------------------文件上传--------------------------------------
const fileRef = ref() // 文件上传input
const uploadIndex = ref(0) // 要上传文件到第几行
const onFileChange = (event: any) => {
  if (event.target.files[0].type !== 'application/pdf') {
    ElMessage.warning('请上传pdf格式')
    return false
  }
  if (event.target.files?.length !== 0) {
    // 创建formdata对象
    const fd = new FormData()
    fd.append('multipartFile', event.target.files[0])
    const loading = ElLoading.service({
      lock: true,
      background: 'rgba(255, 255, 255, 0.8)',
    })
    UploadFile(fd).then((res) => {
      if (res.code === 200) {
        list.value[uploadIndex.value].certificateFile = res.data[0]
        // 重置当前验证
        ElMessage.success('文件上传成功')
        loading.close()
      }
      else {
        ElMessage.error(res.message)
        loading.close()
      }
    })
  }
}
const upload = (index: number) => {
  uploadIndex.value = index
  fileRef.value.click()
}
// -------------------------------------------------------------------------------------
// 关闭新增页面的回调
const close = () => {
  $router.back()
}

// 保存
const save = () => {
  if (!list.value.length) {
    ElMessage.warning('表格不能为空')
    return false
  }
  if (!useCheckList(list.value, columns, '表格')) { return false }
  ruleFormRef.value!.validate((valid: boolean) => {
    if (valid) {
      const loading = ElLoading.service({
        lock: true,
        background: 'rgba(255, 255, 255, 0.8)',
      })
      const params = {
        ...form.value,
        id: infoId.value,
        certificateDetailList: list.value.map((item: Object) => {
          return {
            ...item,
            certificateId: infoId.value, // 证书主表id
          }
        }),
      }
      // 新建
      if (pageType.value === 'add') { // 新建
        addSourceCertList(params).then((res) => {
          ElMessage.success('保存成功')
          pageType.value = 'detail'
          loading.close()
        }).catch(() => {
          loading.close()
        })
      }
      // 保存
      else if (pageType.value === 'edit') { // 编辑
        updateSourceCert(params).then((res) => {
          ElMessage.success('保存成功')
          pageType.value = 'detail'
          loading.close()
        }).catch(() => {
          loading.close()
        })
      }
    }
    else {
      console.log('表单校验不通过')
    }
  })
}

onMounted(async () => {
  getDict().then(() => {
    if (pageType.value !== 'add') {
      form.value = $route.query as any
      infoId.value = $route.query.id as string // id
      list.value = JSON.parse($route.query.certificateDetailList as any)
    }
  })
})
</script>

<template>
  <app-container class="equipment-source-cert-detail">
    <detail-page :title="`溯源证书管理-${textMap[pageType]}`">
      <template #btns>
        <el-button v-if="pageType !== 'detail'" type="primary" @click="save">
          保存
        </el-button>
        <!-- <el-button v-if="pageType === 'detail'" type="primary" @click="print">
          打印
        </el-button> -->
        <el-button type="info" @click="close">
          关闭
        </el-button>
      </template>
      <el-form
        ref="ruleFormRef"
        :model="form"
        label-width="120"
        label-position="right"
        :rules="formRules"
      >
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="统一编号:" prop="equipmentNo">
              <el-input
                v-model="form.equipmentNo"
                :placeholder="pageType === 'detail' ? '' : '请选择统一编号'"
                :class="{ 'detail-input': pageType === 'detail' }"
                disabled
              >
                <template v-if="pageType !== 'detail'" #append>
                  <el-button size="small" @click="selectEquipment">
                    选择
                  </el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="设备名称:" prop="equipmentName">
              <el-input
                v-model.trim="form.equipmentName"
                :placeholder="pageType === 'detail' ? '' : '设备名称'"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="规格型号" prop="model">
              <el-input
                v-model.trim="form.model"
                :placeholder="pageType === 'detail' ? '' : '请输入规格型号'"
                disabled
                class="full-width-input"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="出厂编号:" prop="manufactureNo">
              <el-input
                v-model.trim="form.manufactureNo"
                :placeholder="pageType === 'detail' ? '' : '请输入出厂编号'"
                :class="{ 'detail-input': pageType === 'detail' }"
                disabled
                class="full-width-input"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="实验室" prop="labCode">
              <el-select
                v-model.trim="form.labCode"
                placeholder="请选择实验室"
                filterable
                disabled
                class="full-width-input"
                @change="changeLabName"
              >
                <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.trim="form.groupCode"
                placeholder="请选择部门"
                filterable
                disabled
                class="full-width-input"
                @change="changeGroupCode"
              >
                <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="directorId">
              <el-input
                v-model.trim="form.directorName"
                :placeholder="pageType === 'detail' ? ' ' : '请选择负责人'"
                disabled
                class="full-width-input"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="检定有效期:" prop="validDate" style="flex: 1;">
              <el-date-picker
                v-model="form.validDate"
                type="date"
                :placeholder="pageType === 'detail' ? ' ' : '请选择日期'"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                disabled
                class="full-width-input"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="检定日期:" prop="traceDate">
              <el-date-picker
                v-model="form.traceDate"
                type="date"
                :placeholder="pageType === 'detail' ? ' ' : '请选择检定日期'"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="证书有效期:" prop="certificateValid">
              <el-date-picker
                v-model="form.certificateValid"
                type="date"
                :placeholder="pageType === 'detail' ? ' ' : '请选择证书有效期'"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="计量标识:" prop="meterIdentify">
              <el-select
                v-model="form.meterIdentify"
                :placeholder="pageType === 'detail' ? ' ' : '请选择计量标识'"
                :disabled="pageType === 'detail'"
                class="full-width-input"
              >
                <el-option v-for="item of meterIdentifyDict" :key="item.value" :label="item.name" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="备注:" prop="remark">
              <el-input
                v-model="form.remark"
                class="full-width-input"
                :placeholder="pageType === 'detail' ? ' ' : '请输入备注'"
                autosize
                type="textarea"
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </detail-page>
    <detail-block title=" ">
      <template v-if="pageType !== 'detail'" #btns>
        <el-button type="primary" @click="addRow">
          增加行
        </el-button>
        <el-button type="info" @click="deleteRow">
          删除行
        </el-button>
      </template>
      <input v-show="false" ref="fileRef" type="file" @change="onFileChange">
      <el-table
        ref="tableRef"
        :data="list"
        border
        style="width: 100%;"
        @selection-change="handleSelectionChange"
      >
        <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"
          align="center"
        >
          <template #header>
            <span v-show="item.required" style="color: red;">*</span><span>{{ item.text }}</span>
          </template>
          <template #default="scope">
            <el-radio-group v-if="item.value === 'certificateType'" v-model="scope.row[item.value]" :disabled="pageType === 'detail'">
              <el-radio label="1">
                测试
              </el-radio>
              <el-radio label="2">
                校准
              </el-radio>
              <el-radio label="3">
                检定
              </el-radio>
            </el-radio-group>
            <show-photo v-if="item.value === 'certificateFile'" :minio-file-name="scope.row[item.value]" />
            <el-button
              v-if="item.value === 'certificateFile' && pageType !== 'detail'"
              id="file"
              type="primary"
              :disabled="pageType === 'detail'"
              :style="{ 'margin-left': scope.row.certificateFile === '' ? '0px' : '20px' }"
              @click="upload(scope.$index)"
            >
              {{ scope.row.certificateFile === '' ? '上传' : '更换附件' }}
            </el-button>
            <el-input v-if="(item.value === 'certificateNo' || item.value === 'traceCompany') && pageType !== 'detail'" v-model="scope.row[item.value]" :autofocus="true" :placeholder="`${item.text}`" class="input" />
            <span v-if="pageType === 'detail' && item.value !== 'certificateFile' && item.value !== 'certificateType'">{{ scope.row[item.value] }}</span>
          </template>
        </el-table-column>
      </el-table>
    </detail-block>
    <!-- 选择溯源供方 -->
    <select-source-dialog ref="selectSourceDialogRef" @confirm="confirmSelectedSource" />
    <!-- 选择设备台账 -->
    <select-equipment-dialog ref="selectEquipmentDialogRef" @confirm="confirmSelectEquipment" />
  </app-container>
</template>

<style lang="scss">
.equipment-source-cert-detail {
  .el-radio__label {
    display: block !important;
  }
}
</style>