<!-- 设备基本信息 -->
<script lang="ts" setup name="DeviceIndoEdit">
import type { FormInstance, FormRules, UploadUserFile } from 'element-plus'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import dayjs from 'dayjs'
import tableList from './table.vue'
import technology from './technology.vue'
import showPhoto from './showPhoto.vue'
import certificateTable from './certificateTable.vue'
import { delTextBtn, editBtn, submitBtn } from '@/utils/applyBtns'
import { getDeptTreeList } from '@/api/system/dept'
import { toTreeList } from '@/utils/structure'
import ApprovalDialog from '@/components/Approval/ApprovalDialog.vue'
import { cancelInfo, deleteInfo, editInfo, getApprovalDetail, getInfoDetail, submitInfo } from '@/api/eqpt/device/info'
// import { getUserList } from '@/api/system/user'
import { getDictByCode } from '@/api/system/dict'
import { SCHEDULE } from '@/utils/scheduleDict'
import { uploadApi } from '@/api/system/notice'
import useUserStore from '@/store/modules/user'
import { getUserDept, getUserList } from '@/api/system/user'
import { getDeviceNameList, getModelAllList, getModelList } from '@/api/eqpt/device/model'
import { equipmentLabelBind } from '@/api/reader'
import scanEquipmentDialog from '@/components/scanEquipmentDialog/index.vue'
const $route = useRoute()
const $router = useRouter()
const userStore = useUserStore()
const submitId = ref('未提交') // 提交id-保存接口获取
const ruleFormRef = ref<FormInstance>() // from组件
const ruleFormRef1 = ref<FormInstance>() // from组件
const ruleFormRef2 = ref<FormInstance>() // from组件
const statusName = $route.query.statusName as string
const title = ref('')
const isFrist = ref(true)
// 显示标题
const textMap: { [key: string]: string } = {
  update: '编辑',
  create: '新增',
  detail: '详情',
}
// 对话框类型：create,update
const dialogStatus = ref('create')

const ruleForm = ref({
  approvalStatus: '', // 审批状态
  approvalType: '', // 申请审批类型(1新增2编辑3删除)
  approvalTypeName: '', // 申请审批类型名称
  attachments: [], // 主附件信息列表
  taskInfos: [], // 参试任务
  category: '', // 设备分类(字典code)
  certificateValid: '', // 证书有效期
  checkCycle: '', // 检定周期(月)
  checkDate: '', // 检定日期
  checkOrganization: '', // 检定机构
  companyId: '', // 所在单位id
  createTime: '', // 创建时间
  createUserId: '', // 创建人id
  createUserName: '', // 创建人名字
  deptId: '', // 使用部门id
  directorName: '', // 负责人
  equipmentId: '', // 设备id
  equipmentName: '', // 设备名称
  equipmentNo: '', // 设备编号
  equipmentType: $route.query.equipmentType as string, // 设备类型(1受检设备;2特种设备)
  id: '', //
  installLocation: '', // 安装位置(选择)
  installLocationExt: '', // 安装位置(自定义编写)
  instructionsFile: '', // 说明书(minio存储文件名)（多个用,拼接）
  level: '', // 等级(字典code)
  manufactureNo: '', // 出厂编号
  manufacturer: '', // 生产厂家
  meterIdentify: '', // 计量标识
  model: '', // 规格型号
  modelId: '',
  processId: '', // 流程实例id
  productCountry: '', // 生产国家
  productDate: '', // 生产日期
  purchaseDate: '', // 购进日期
  qualityCondition: '', // 质量状况
  remark: '', // 备注
  remarkExt: '', // 备注(扩展)
  rfid: '', // RFID标签绑定
  technicalTargetList: [], // 技术指标列表
  groupInfos: [] as any[], // 组别信息
  testTask: '', // 安装位置(多个用,拼接)
  unitPrice: '', // 单价(万元)
  updateTime: '', // 更新时间
  usageStatus: '', // 使用状态(字典code)
  usePosition: '', // 使用岗位
  useSign: '', // 在用信息(字典code)
  helpInstruction: '', // 辅助字段
  companyName: '',
  certificateList: [],
}) // 表单
const testTask = ref<string[]>([])
watch(() => testTask.value, (newVal) => {
  if (newVal.length) {
    ruleForm.value.testTask = testTask.value.join(',')
  }
}, { deep: true })
const addTask = () => {
  testTask.value.push('')
}
// 自动填充 证书有效日期
watch(() => ruleForm.value, (newVal) => {
  if (newVal.checkDate && newVal.checkCycle && !newVal.certificateValid) {
    // ruleForm.value.certificateValid = dayjs(newVal.checkDate).add(Number(newVal.checkCycle) * 30, 'day').format('YYYY-MM-DD')
    const date = dayjs(newVal.checkDate).add(Number(newVal.checkCycle) * 30, 'day').format('YYYY-MM')
    const day = Number(newVal.checkDate.split('-')[2]) <= 1 ? Number(newVal.checkDate.split('-')[2]) : Number(newVal.checkDate.split('-')[2]) - 1
    ruleForm.value.certificateValid = dayjs(`${date}-${day}`).format('YYYY-MM-DD')
  }
}, {
  deep: true,
})
const radio = ref('基本信息')
// 表单1验证规则
const rules1 = ref<FormRules>({
  equipmentName: [{ required: true, message: '设备名称必填', trigger: ['blur', 'change'] }],
  equipmentNo: [{ required: true, message: '设备编号必填', trigger: ['blur', 'change'] }],
  usageStatus: [{ required: true, message: '使用状态必选', trigger: ['blur', 'change'] }],
  level: [{ required: true, message: '设备重要等级', trigger: ['blur', 'change'] }],
  productCountry: [{ required: true, message: '生产国家必填', trigger: ['blur', 'change'] }],
  manufacturer: [{ required: true, message: '生产厂家必填', trigger: ['blur', 'change'] }],
  manufactureNo: [{ required: true, message: '生产编号必填', trigger: ['blur', 'change'] }],
  // productDate: [{ required: true, message: '生产日期必选', trigger: ['blur', 'change'] }],
  // unitPrice: [{ required: true, message: '设备单价必填', trigger: ['blur', 'change'] }],
  // purchaseDate: [{ required: true, message: '购进日期必选', trigger: ['blur', 'change'] }],
  model: [{ required: true, message: '规格型号必填', trigger: ['blur', 'change'] }],
  helpInstruction: [{ required: true, message: '辅助字段必选', trigger: ['blur', 'change'] }],
  qualityCondition: [{ required: true, message: '质量状况必填', trigger: ['blur', 'change'] }],
  deptId: [{ required: true, message: '使用部门必选', trigger: ['blur', 'change'] }],
  category: [{ required: true, message: '设备分类必选', trigger: ['blur', 'change'] }],
  checkCycle: [{ required: true, message: '检定周期必填', trigger: ['blur', 'change'] }],
})
const rules2 = ref<FormRules>({
  usePosition: [{ required: true, message: '使用岗位必填', trigger: ['blur', 'change'] }],
  directorName: [{ required: true, message: '负责人必填', trigger: ['blur', 'change'] }],
  useSign: [{ required: true, message: '在用信息必选', trigger: ['blur', 'change'] }],
})
const rules3 = ref<FormRules>({
  // checkOrganization: [{ required: true, message: '检定机构必填', trigger: ['blur', 'change'] }],
  // meterIdentify: [{ required: true, message: '计量标识必填', trigger: ['blur', 'change'] }],
  // checkDate: [{ required: true, message: '检定(校准)日期必选', trigger: ['blur', 'change'] }],
  // certificateValid: [{ required: true, message: '证书有效期必选', trigger: ['blur', 'change'] }],
})
// 获取下拉框数据
const useStatusList = ref<{ id: string; value: string; name: string }[]>() // 使用状态
const levelList = ref<{ id: string; value: string; name: string }[]>() // 设备重要等级
const deviceTypeList = ref<{ id: string; value: string; name: string }[]>() // 设备分类
const inUseList = ref<{ id: string; value: string; name: string }[]>() // 设备在用信息
const meterIdentifyList = ref<{ id: string; value: string; name: string }[]>() // 计量标识
const deviceQualityList = ref<{ id: string; value: string; name: string }[]>() // 质量状况
// 设备名称
const deviceNameList = ref<string[]>([])
// 规格型号
const modelList = ref<any[]>([])
// 辅助字段
const helpList = ref<any[]>([])
const allList = ref<any[]>([])
const fetchSelectData = async () => {
  // 规格型号及辅助字段
  const res = await getModelAllList({})
  allList.value = res.data
  modelList.value = Array.from(new Set(res.data.filter((item: any) => item.model).map((item: any) => item.model)))
  helpList.value = Array.from(new Set(res.data.filter((item: any) => item.helpInstruction).map((item: any) => item.helpInstruction)))
  const res1 = await getDictByCode('eqptDeviceUseStatus')
  useStatusList.value = res1.data
  getDictByCode('eqptDeviceLevel').then((res) => {
    levelList.value = res.data
  })
  getDictByCode('eqptDeviceType').then((res) => {
    deviceTypeList.value = res.data
  })
  getDictByCode('eqptDeviceInUse').then((res) => {
    inUseList.value = res.data
  })
  getDictByCode('eqptMeterIdentify').then((res) => {
    meterIdentifyList.value = res.data
  })
  getDictByCode('eqptDeviceQuality').then((res) => {
    deviceQualityList.value = res.data
  })
  // 设备名称
  getDeviceNameList().then((res) => {
    deviceNameList.value = res.data
    console.log(res.data, '设备名称')
  })
}
// 监听设备名称下拉框，修改规格型号和辅助字段
watch(() => ruleForm.value.equipmentName, (newVal) => {
  if (!($route.path.includes('detail') || isFrist.value)) {
    ruleForm.value.helpInstruction = ''
    ruleForm.value.model = ''
  }
  if (newVal) {
    // 修改规格型号和辅助字段列表
    const data = allList.value.filter(item => item.equipmentName === newVal)
    modelList.value = Array.from(new Set(data.filter(item => item.model).map(item => item.model)))
    helpList.value = Array.from(new Set(data.filter(item => item.helpInstruction).map(item => item.helpInstruction)))
    console.log(modelList.value, helpList.value)
  }
  else {
    modelList.value = Array.from(new Set(allList.value.filter(item => item.model).map(item => item.model)))
    helpList.value = Array.from(new Set(allList.value.filter(item => item.helpInstruction).map(item => item.helpInstruction)))
  }
})
// 监听规格型号下拉框，修改辅助字段
watch(() => ruleForm.value.model, (newVal) => {
  if (!($route.path.includes('detail') || isFrist.value)) {
    ruleForm.value.helpInstruction = ''
  }
  if (newVal && ruleForm.value.equipmentName) {
    // 修改规格型号和辅助字段列表
    helpList.value = Array.from(new Set(allList.value.filter(item => item.helpInstruction).filter(item => item.equipmentName === ruleForm.value.equipmentName && item.model === newVal).map(item => item.helpInstruction)))
    if ((helpList.value.length === 0 || (helpList.value.length === 1)) && ruleForm.value.model && ruleForm.value.equipmentName) {
      const arr = allList.value.filter((item: any) => item.model === ruleForm.value.model && item.equipmentName === ruleForm.value.equipmentName)
      if (arr.length) {
        const data = arr[0]
        ruleForm.value.category = data.category
        // ruleForm.value.remark = data.remark
        ruleForm.value.technicalTargetList = data.technicalTargetList
        ruleForm.value.checkCycle = data.checkCycle
        ruleForm.value.modelId = data.id
        ruleForm.value.helpInstruction = arr[0].helpInstruction
      }
    }
  }
  else if (newVal) {
    helpList.value = Array.from(new Set(allList.value.filter(item => item.helpInstruction).filter(item => item.model === newVal).map(item => item.helpInstruction)))
  }
  else {
    helpList.value = Array.from(new Set(allList.value.filter(item => item.helpInstruction).map(item => item.helpInstruction)))
  }
})
// 设备相关，填充数据
watch(() => ruleForm.value, (newVal) => {
  if ($route.path.includes('detail') || isFrist.value) {
    return
  }
  if ((ruleForm.value.helpInstruction && ruleForm.value.model && ruleForm.value.equipmentName)) {
    const arr = allList.value.filter((item: any) => item.helpInstruction === ruleForm.value.helpInstruction && item.model === ruleForm.value.model && item.equipmentName === ruleForm.value.equipmentName)
    if (arr.length) {
      const data = arr[0]
      ruleForm.value.category = data.category
      // ruleForm.value.remark = data.remark
      ruleForm.value.technicalTargetList = data.technicalTargetList
      ruleForm.value.checkCycle = data.checkCycle
      ruleForm.value.modelId = data.id
    }
  }
  // if ((helpList.value.length === 0 || (helpList.value.length === 1)) && ruleForm.value.model && ruleForm.value.equipmentName) {
  //   const arr = allList.value.filter((item: any) => item.model === ruleForm.value.model && item.equipmentName === ruleForm.value.equipmentName)
  //   if (arr.length) {
  //     const data = arr[0]
  //     ruleForm.value.category = data.category
  //     // ruleForm.value.remark = data.remark
  //     ruleForm.value.technicalTargetList = data.technicalTargetList
  //     ruleForm.value.checkCycle = data.checkCycle
  //     ruleForm.value.modelId = data.id
  //     ruleForm.value.helpInstruction = arr[0].helpInstruction
  //   }
  // }
}, {
  deep: true,
  immediate: true,
})
// 加载组织机构树形下拉
const deptTreeList = ref()
const fetchDeptTree = () => {
  getDeptTreeList().then((res) => {
    if (res.data) { // 将列表转树结构
      deptTreeList.value = toTreeList(res.data, '0', true)
    }
  })
}
// 负责人
const userList = ref<any[]>([])
const getuser = () => {
  getUserList({ offset: 1, limit: 99999 }).then((res) => {
    userList.value = res.data.rows
  })
}
getuser()
fetchDeptTree()
// 弹窗初始化
const initDialog = () => {
  dialogStatus.value = $route.params.type as string || 'detail'
  ruleFormRef.value?.resetFields()
  ruleFormRef1.value?.resetFields()
  ruleFormRef2.value?.resetFields()
  console.log(userStore)
  if ($route.params.type === 'create') {
    isFrist.value = false
    ruleForm.value.createTime = dayjs().format('YYYY-MM-DD HH:mm:ss') // 创建时间
    ruleForm.value.approvalType = '1'
    ruleForm.value.approvalTypeName = '新建设备'
    ruleForm.value.createUserId = userStore.id
    ruleForm.value.createUserName = userStore.name
    testTask.value = ['']
    // 获取当前用户所在单位
    getUserDept().then((res) => {
      console.log(res.data, '用户所在单位')
      // fullName
      ruleForm.value.companyId = res.data.id
      ruleForm.value.companyName = res.data.fullName
    })
  }
  else {
    // console.log(statusName, 'statusName')
    if (statusName === '全部') {
      getInfoDetail({ equipmentId: $route.query.id as string }).then((res) => {
        ruleForm.value = res.data
        // if (ruleForm.value.testTask) {
        //   if (ruleForm.value.testTask.includes(',')) {
        //     testTask.value = ruleForm.value.testTask.split(',')
        //   }
        //   else {
        //     testTask.value = [ruleForm.value.testTask]
        //   }
        // }
        // else {
        //   testTask.value = ['']
        // }
        if ($route.params.type === 'update') {
          ruleForm.value.approvalType = '2'
          ruleForm.value.approvalTypeName = '编辑设备'
          ruleForm.value.equipmentId = ruleForm.value.id
          ruleForm.value.id = ''
          ruleForm.value.createUserId = userStore.id
          ruleForm.value.createUserName = userStore.name
          ruleForm.value.createTime = dayjs().format('YYYY-MM-DD HH:mm:ss') // 创建时间
        }
        setTimeout(() => {
          isFrist.value = false
        }, 2000)
      })
    }
    else {
      getApprovalDetail({ id: $route.query.id as string }).then((res) => {
        ruleForm.value = res.data
        setTimeout(() => {
          isFrist.value = false
        }, 2000)
        // if (ruleForm.value.testTask) {
        //   if (ruleForm.value.testTask.includes(',')) {
        //     testTask.value = ruleForm.value.testTask.split(',')
        //   }
        //   else {
        //     testTask.value = [ruleForm.value.testTask]
        //   }
        // }
        // else {
        //   testTask.value = ['']
        // }
      })
      // ruleForm.value = JSON.parse($route.query.row as string)
    }
  }
}
onMounted(async () => {
  await fetchSelectData()
  initDialog()
})
// 关闭弹窗
const close = () => {
  // $router.back()
  if ($route.query.equipmentType === '1') {
    $router.push({ name: 'DeviceInfo' })
  }
  else {
    $router.push({ name: 'SpecialPage' })
  }
}
const tableRef = ref()
const technologyRef = ref()
const certificateRef = ref()
const disabledSave = ref(false)
// 保存
const saveForm = async (formEl: FormInstance | undefined, formEl1: FormInstance | undefined, formEl2: FormInstance | undefined) => {
  console.log(formEl, formEl1)
  if (!formEl || !formEl1 || !formEl2) { return }
  Promise.all([formEl.validate(), formEl1.validate(), formEl2.validate()]).then(() => {
    // 验证表格
    if (tableRef.value.checkCertificateList() && technologyRef.value.checkCertificateList()) {
      ElMessageBox.confirm(
        '确认保存吗？',
        '提示',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        },
      ).then((res) => {
        disabledSave.value = true
        ruleForm.value.attachments = tableRef.value.list
        ruleForm.value.technicalTargetList = technologyRef.value.list
        // if (!ruleForm.value.groupInfos.length) {
        //   ruleForm.value.groupInfos = null
        // }
        if ($route.path.includes('speciallist')) {
          //  特种设备
          ruleForm.value.certificateList = certificateRef.value.list
        }
        if (submitId.value !== '未提交' && submitId.value !== '') {
          ruleForm.value.id = submitId.value
        }
        editInfo(ruleForm.value).then((res) => {
          submitId.value = res.data
          disabledSave.value = false
          if (statusName === '已取消' || statusName === '未通过') {
            submitInfo({ id: submitId.value, formId: SCHEDULE.DEVICE_INFO_APPROVAL }).then((res) => {
              ElMessage.success('已提交')
              close()
            })
          }
          else {
            ElMessage.success('保存成功')
          }
        })
      })
    }
  })
}
// 提交
const submitForm = () => {
  if (submitId.value === '') {
    ElMessage.warning('无基本信息变更，无需审批，更新成功')
    return false
  }
  if (submitId.value === '未提交') {
    ElMessage.warning('请先保存')
    return false
  }
  ElMessageBox.confirm(
    '确认提交吗？',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    },
  ).then((res) => {
    submitInfo({ id: submitId.value, formId: SCHEDULE.DEVICE_INFO_APPROVAL }).then((res) => {
      ElMessage.success('已提交')
      close()
    })
  })
}
// 取消
const resetForm = (formEl: FormInstance | undefined) => {
  formEl?.resetFields()
  close()
}
// 编辑
const editForm = () => {
  // $route.params.type = dialogStatus.value
  // mainPage.reload()
  // $router.push({
  //   path: `/dinfo/${dialogStatus.value}`,
  //   query: {
  //     row: $route.query.row,
  //     statusName,
  //   },
  // })
  // document.getElementById('reload-btn')?.click()
  $router.push({
    // params: { ...$route.params, type: 'update' },
    path: `/${$route.query.equipmentType === '1' ? 'dinfo' : 'speciallist'}/update`,
    query: { ...$route.query },
  })
  initDialog()
  // document.getElementById('reload-btn')?.click()
}
// 删除
const delForm = () => {
  ElMessageBox.confirm(
    '确认删除设备信息吗?',
    '确认',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    },
  ).then(() => {
    deleteInfo({ id: ruleForm.value.id }).then((res) => {
      ElMessage.success('操作成功')
      close()
    })
  })
}
// 取消
const cancelForm = () => {
  ElMessageBox.confirm(
    '确认取消吗?',
    '确认',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    },
  ).then(() => {
    cancelInfo({ id: ruleForm.value.id, processInstanceId: ruleForm.value.processId, comments: '' }).then((res) => {
      ElMessage.success('操作成功')
      close()
    })
  })
}
// 审批
const approvalDialogRef = ref()
const apply = (type: string) => {
  const data = JSON.parse($route.query.row as string)
  approvalDialogRef.value.initDialog(type, data.taskId, data.processId, ruleForm.value.id)
}
const fileRef = ref() // 文件上传input
const onFileChange = (event: any) => {
  if (event.target.files?.length !== 0) {
    // 创建formdata对象
    const fd = new FormData()
    const loading = ElLoading.service({
      lock: true,
      background: 'rgba(255, 255, 255, 0.8)',
    })
    fd.append('multipartFile', event.target.files[0])
    uploadApi(fd).then((res) => {
      if (res.code === 200) {
        ruleForm.value.instructionsFile = ruleForm.value.instructionsFile ? `${ruleForm.value.instructionsFile},${res.data[0]}` : res.data[0]
        // 重置当前验证
        ruleFormRef.value?.clearValidate('minioFileName')
        ElMessage.success('文件上传成功')
        fileRef.value.value = ''
        loading.close()
      }
      else {
        // ElMessage.error(res.message)
        loading.close()
      }
    })
  }
}
// 上传
const upload = () => {
  fileRef.value.click()
}
// 删除上传的文件
const deleteFile = (fileName: string) => {
  const data = ruleForm.value.instructionsFile.split(',')
  const filterData = data.filter(item => item !== fileName)
  ruleForm.value.instructionsFile = filterData.length ? filterData.join(',') : ''
}
// 删除参试任务
const delHandler = (row: any) => {
  // ruleForm.taskInfos
  console.log(row, 'row')
  ElMessageBox.confirm(
    `确认删除${row.taskName}吗?`,
    '确认',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    },
  ).then(() => {
    ruleForm.value.taskInfos = ruleForm.value.taskInfos.filter((item: any) => item.id !== row.id)
    ElMessage.success('操作成功')
  })
}
const print = () => {

}

// --------------------------------------------标签绑定--------------------------------------------
const scanEquipmentRef = ref()
// 点击扫描收添加
const scan = () => {
  // 参数：是标签绑定
  scanEquipmentRef.value.initDialog(true, 'detail')
}
// 扫描结束
const scanOver = (value: any) => {
  console.log('***************************')
  const label = value.label
  console.log(label)
  scanEquipmentRef.value.closeDialog()
  equipmentLabelBind({ label, sampleId: ruleForm.value.equipmentId }).then((res) => {
    ElMessage.success('标签绑定成功')
    scanEquipmentRef.value.closeDialog()
    initDialog()
  })
}
// -----------------------------------------------------------------------------------------------
defineExpose({ ruleForm, apply, editForm, submitForm, saveForm, delForm, print, cancelForm })
</script>

<template>
  <div style="overflow: hidden;" :class="[$route.path.includes('detail') ? '' : 'margin']">
    <approval-dialog ref="approvalDialogRef" @on-success="() => { $router.back() }" />
    <!-- 扫描 -->
    <scan-equipment-dialog ref="scanEquipmentRef" title="标签绑定" @confirm="scanOver" />
    <detail-page class="base-info-device" :title="`${$route.query.equipmentType === '1' ? '设备信息管理' : '特种设备管理'}-${textMap[dialogStatus]}`">
      <template #btns>
        <el-button v-if="statusName === '待审批'" type="primary" @click="apply('agree')">
          同意
        </el-button>
        <el-button v-if="statusName === '待审批'" type="primary" @click="apply('refuse')">
          拒绝
        </el-button>
        <el-button v-if="editBtn(statusName, dialogStatus)" type="primary" @click="editForm()">
          编辑
        </el-button>
        <el-button v-if="submitBtn(statusName, dialogStatus) && statusName !== '已取消' && statusName !== '未通过' " type="primary" @click="submitForm()">
          提交
        </el-button>
        <el-button v-if="submitBtn(statusName, dialogStatus)" type="primary" :disabled="disabledSave" @click="saveForm(ruleFormRef, ruleFormRef1, ruleFormRef2)">
          保存
        </el-button>
        <el-button v-if="delTextBtn(statusName)" type="info" @click="delForm()">
          删除
        </el-button>
        <el-button v-if="statusName === '审批中'" type="info" @click="cancelForm()">
          取消
        </el-button>
        <el-button type="info" @click="resetForm(ruleFormRef)">
          关闭
        </el-button>
      </template>
    </detail-page>
    <detail-block-com v-if="$route.path.includes('speciallist') && !$route.path.includes('detail')">
      <el-radio-group v-model="radio">
        <el-radio-button label="基本信息" />
        <el-radio-button label="证书报告" />
      </el-radio-group>
    </detail-block-com>
    <!-- 基本信息 -->
    <div v-show="radio === '基本信息'">
      <detail-block-com v-show="!$route.path.includes('detail')">
        <el-form label-position="right" label-width="110px" class="form" :disable="$route.path.includes('detail')">
          <el-row :gutter="24" class="marg">
            <el-col :span="6">
              <el-form-item label="审批类型">
                <el-input v-model.trim="ruleForm.approvalTypeName" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="创建人">
                <el-input v-model.trim="ruleForm.createUserName" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="创建时间">
                <el-input v-model.trim="ruleForm.createTime" disabled />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </detail-block-com>
      <detail-block-com>
        <el-form
          ref="ruleFormRef" :model="ruleForm" :rules="rules1" label-position="right" label-width="110px" class="form"
          :class="[$route.path.includes('detail') ? 'isDetail' : '']" :disabled="$route.path.includes('detail')"
        >
          <el-row :gutter="24" class="marg">
            <el-col :span="6">
              <el-form-item label="设备名称" prop="equipmentName">
                <!-- <el-input v-model.trim="ruleForm.equipmentName" placeholder="设备名称" /> -->
                <el-select v-model.trim="ruleForm.equipmentName" filterable placeholder="设备名称" clearable style="width: 100%;">
                  <el-option v-for="item in deviceNameList" :key="item" :label="item" :value="item" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="规格型号" prop="model">
                <!-- <el-input v-model.trim="ruleForm.equipmentName" placeholder="设备名称" /> -->
                <el-select v-model.trim="ruleForm.model" filterable placeholder="规格型号" clearable style="width: 100%;">
                  <el-option v-for="item in modelList" :key="item" :label="item" :value="item" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="辅助字段" prop="helpInstruction">
                <!-- <el-input v-model.trim="ruleForm.equipmentName" placeholder="设备名称" /> -->
                <el-select v-model.trim="ruleForm.helpInstruction" placeholder="辅助字段" clearable style="width: 100%;">
                  <el-option v-for="item in helpList" :key="item" :label="item" :value="item" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="出厂编号" prop="manufactureNo">
                <el-input v-model.trim="ruleForm.manufactureNo" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="marg">
            <el-col :span="6">
              <el-form-item label="生产国家" prop="productCountry">
                <el-input v-model.trim="ruleForm.productCountry" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="生产厂家" prop="manufacturer">
                <el-input v-model.trim="ruleForm.manufacturer" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="生产日期" prop="productDate">
                <el-date-picker
                  v-model="ruleForm.productDate" type="date" format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD" placeholder="请选择生产日期" class="normal-date" style="width: 100%;"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="购进日期" prop="purchaseDate">
                <el-date-picker
                  v-model="ruleForm.purchaseDate" type="date" format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD" placeholder="请选择购进日期" class="normal-date" style="width: 100%;"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="marg">
            <el-col :span="6">
              <el-form-item label="设备单价" prop="unitPrice">
                <el-input v-model.trim="ruleForm.unitPrice">
                  <template #append>
                    万元
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="使用状态" prop="usageStatus">
                <el-select v-model="ruleForm.usageStatus" placeholder="选择使用状态" style="width: 100%;" :disabled="!$route.path.includes('create')">
                  <el-option v-for="item in useStatusList" :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="model">
                <el-input v-model.trim="ruleForm.model" />
              </el-form-item>
            </el-col> -->
            <el-col :span="6">
              <el-form-item label="质量状况" prop="qualityCondition">
                <!-- <el-input v-model.trim="ruleForm.qualityCondition" /> -->
                <el-select v-model="ruleForm.qualityCondition" placeholder="选择质量状况" style="width: 100%;">
                  <el-option v-for="item in deviceQualityList" :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="companyId">
                <el-input v-model.trim="ruleForm.companyName" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="marg">
            <el-col :span="6">
              <el-form-item label="使用部门" prop="deptId">
                <dept-select v-model="ruleForm.deptId" :data="deptTreeList" placeholder="选择使用部门" style="width: 100%;" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="设备分类" prop="category">
                <el-select v-model="ruleForm.category" placeholder="选择设备分类" style="width: 100%;" disabled>
                  <el-option v-for="item in deviceTypeList" :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="checkCycle">
                <el-input v-model.trim="ruleForm.checkCycle" disabled>
                  <template #append>
                    月
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="重要等级" prop="level">
                <el-select v-model="ruleForm.level" placeholder="选择重要等级" style="width: 100%;">
                  <el-option v-for="item in levelList" :key="item.id" :label="item.name" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="marg">
            <el-col :span="12">
              <el-form-item label="备注" prop="remark">
                <el-input v-model.trim="ruleForm.remark" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="统一编号">
                <el-input v-model.trim="ruleForm.equipmentNo" placeholder="系统自动生成" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="marg">
            <el-col :span="24">
              <el-form-item label="附件" prop="instructionsFile">
                <show-photo :minio-file-name="ruleForm.instructionsFile" @delete="deleteFile" />
                <input ref="fileRef" style="display: none;" type="file" accept="application/msword,application/pdf" @change="onFileChange">
                <el-button v-if="dialogStatus !== 'detail'" type="primary" @click="upload">
                  上传
                </el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </detail-block-com>
      <detail-block-com>
        <el-form ref="ruleFormRef2" :rules="rules3" label-position="right" label-width="130px" :model="ruleForm" class="form" :class="[$route.path.includes('detail') ? 'isDetail' : '']" :disabled="$route.path.includes('detail')">
          <el-row :gutter="24" class="marg">
            <el-col :span="6">
              <el-form-item label="检定(校准)机构" prop="checkOrganization">
                <el-input v-model.trim="ruleForm.checkOrganization" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="检定(校准)日期" prop="checkDate">
                <el-date-picker
                  v-model="ruleForm.checkDate" type="date" format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD" placeholder="请选择检定(校准)日期" class="normal-date" style="width: 100%;"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="证书有效期" prop="certificateValid">
                <el-date-picker
                  v-model="ruleForm.certificateValid" type="date" format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD" placeholder="请选择证书有效期" class="normal-date" style="width: 100%;"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="计量标识" prop="meterIdentify">
                <!-- <el-input v-model.trim="ruleForm.meterIdentify" /> -->
                <el-select v-model="ruleForm.meterIdentify" placeholder="选择计量标识" style="width: 100%;">
                  <el-option v-for="item in meterIdentifyList" :key="item.id" :label="item.name" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </detail-block-com>
      <detail-block-com>
        <el-form ref="ruleFormRef1" :model="ruleForm" :rules="rules2" label-position="right" label-width="110px" class="form" :class="[$route.path.includes('detail') ? 'isDetail' : '']" :disabled="$route.path.includes('detail')">
          <el-row :gutter="24" class="marg">
            <el-col :span="6">
              <el-form-item label="使用岗位" prop="usePosition">
                <el-input v-model.trim="ruleForm.usePosition" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="负责人" prop="directorName">
                <!-- <el-input v-model.trim="ruleForm.directorName" /> -->
                <el-select v-model="ruleForm.directorName" filterable clearable placeholder="负责人" style="width: 100%;">
                  <el-option v-for="(item) in userList" :key="item.id" :label="item.name" :value="item.name">
                    <span style="float: left;">{{ item.name }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px;">{{ item.deptName }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 标签绑定不允许走审批，所以只在全部中绑定 -->
            <el-col v-if="statusName === '全部'" :span="6">
              <el-form-item label="RFID标签绑定" prop="rfid">
                <el-input v-model.trim="ruleForm.rfid" disabled>
                  <template v-if="dialogStatus !== 'detail'" #append>
                    <el-button @click="scan">
                      扫描
                    </el-button>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="在用信息" prop="useSign">
                <!-- <el-input v-model.trim="ruleForm.useSign" /> -->
                <el-select v-model="ruleForm.useSign" placeholder="选择在用信息" style="width: 100%;">
                  <el-option v-for="item in inUseList" :key="item.id" :label="item.name" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="dialogStatus === 'detail' && ruleForm.groupInfos" :gutter="24" class="marg">
            <el-col :span="24">
              <el-form-item label="组别信息" prop="groupInfos">
                <el-input v-for="(item, index) in ruleForm.groupInfos" :key="index" v-model.trim="item.groupName" style="width: 280px;" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="marg">
            <el-col :span="6">
              <el-form-item label="安装位置" prop="installLocation">
                <el-input v-model.trim="ruleForm.installLocation" />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-input v-model.trim="ruleForm.installLocationExt" />
            </el-col>
          </el-row>
          <!-- <el-row :gutter="24" class="marg">
            <el-col :span="2">
              <el-form-item label="参试任务" prop="fileNo" />
            </el-col>
            <el-col v-for="(item, index) in testTask" :key="index" :span="3.5">
              <el-input v-model.trim="testTask[index]" />
            </el-col>
            <el-col v-if="dialogStatus !== 'detail'" :span="1">
              <icon-button icon="icon-add" title="" @click="addTask" />
            </el-col>
          </el-row> -->
          <el-row v-if="!$route.path.includes('create')" :gutter="24" class="marg">
            <el-col :span="18">
              <el-form-item label="参试任务" prop="fileNo">
                <el-table :data="ruleForm.taskInfos">
                  <el-table-column label="任务名称" prop="taskName" />
                  <el-table-column label="开始时间" prop="startTime" />
                  <el-table-column label="结束时间" prop="taskName" />
                  <el-table-column label="备注" prop="remark" />
                  <el-table-column v-if="$route.path.includes('update')" label="操作" width="70">
                    <template #default=" scope ">
                      <el-button
                        link type="danger" size="small"
                        @click="delHandler(scope.row)"
                      >
                        删除
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="marg" style="margin-top: 15px;">
            <el-col :span="12">
              <el-form-item label="备注" prop="remarkExt">
                <el-input v-model.trim="ruleForm.remarkExt" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </detail-block-com>
      <detail-block-com>
        <technology ref="technologyRef" :data="ruleForm.technicalTargetList" :status="$route.params.type as string" />
      </detail-block-com>
      <detail-block-com>
        <table-list ref="tableRef" :data="ruleForm.attachments" :status="$route.params.type as string" />
      </detail-block-com>
    </div>
    <div v-show="radio === '证书报告'">
      <certificate-table ref="certificateRef" :data="ruleForm.certificateList || []" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
// 样式
.isDetail {
  ::v-deep {
    .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap > .el-form-item__label::before,
    .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label::before {
      content: "";
      display: none;
    }
  }
}

.margin {
  padding: 10px;
}
</style>