<!-- 设备证书详情 -->
<script lang="ts" setup name="DeviceCertificateDetail">
import type { FormInstance, FormRules, UploadUserFile } from 'element-plus'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import useUserStore from '@/store/modules/user'
import showPhoto from '@/views/tested/device/info/components/showPhotoSinge.vue'
const $route = useRoute()
const $router = useRouter()
const userStore = useUserStore()
const ruleFormRef = ref<FormInstance>() // from组件
const statusName = $route.query.statusName as string
// 显示标题
const textMap: { [key: string]: string } = {
  update: '编辑',
  create: '新增',
  detail: '详情',
}
// 对话框类型：create,update
const dialogStatus = ref('create')
const ruleForm = ref({
  certificateName: '',
  certificateNo: '',
  certificateType: '',
  certificateValid: '',
  checkDate: '',
  checkOrganization: '',
  createTime: '',
  equipmentId: 0,
  equipmentName: '',
  equipmentNo: '',
  id: 0,
  meterIdentify: '',
  minioFileName: '',
  remark: '',
  updateTime: '',
}) // 表单
// 弹窗初始化
const initDialog = () => {
  dialogStatus.value = $route.params.type as string
  ruleFormRef.value?.resetFields()
  if ($route.params.type !== 'create') {
    ruleForm.value = JSON.parse($route.query.row as string)
  }
}
onMounted(() => {
  initDialog()
})
// 关闭弹窗
const close = () => {
  $router.back()
}
// 保存
const saveForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) { return }
  await formEl.validate((valid, fields) => {
    if (valid) {
      ElMessageBox.confirm(
        '确认保存吗？',
        '提示',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        },
      ).then((res) => {
        ruleForm.value.attachments = tableRef.value.list
        ruleForm.value.technicalTargetList = technologyRef.value.list
        editInfo(ruleForm.value).then((res) => {
          console.log(res.data, '123')
          ElMessage.success('保存成功')
          submitId.value = res.data
        })
      })
    }
  })
}
// 提交
const submitForm = () => {
  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()
}
</script>

<template>
  <app-container style="overflow: hidden;">
    <approval-dialog ref="approvalDialogRef" @on-success="() => { $router.back() }" />
    <detail-page :title="`证书管理-${textMap[dialogStatus]}`">
      <template #btns>
        <el-button v-if="!$route.path.includes('detail')" type="primary" @click="saveForm(ruleFormRef)">
          保存
        </el-button>
        <el-button type="info" @click="resetForm(ruleFormRef)">
          关闭
        </el-button>
      </template>
    </detail-page>
    <detail-block-com>
      <el-form label-position="right" label-width="110px" class="form" disabled>
        <el-row :gutter="24" class="marg">
          <el-col :span="6">
            <el-form-item label="证书编号">
              <el-input v-model.trim="ruleForm.certificateName" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="证书名称">
              <el-input v-model.trim="ruleForm.certificateNo" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="设备编号">
              <el-input v-model.trim="ruleForm.equipmentNo" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="设备名称">
              <el-input v-model.trim="ruleForm.equipmentName" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="6">
            <el-form-item label="校准(检定)单位">
              <el-input v-model.trim="ruleForm.checkOrganization" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="校准(检定)日期">
              <el-input v-model.trim="ruleForm.checkDate" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="证书有效期">
              <el-input v-model.trim="ruleForm.certificateValid" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="计量标识">
              <el-input v-model.trim="ruleForm.meterIdentify" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="18">
            <el-form-item label="备注">
              <el-input v-model.trim="ruleForm.remark" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="12">
            <el-form-item label="证书报告附件">
              <show-photo :minio-file-name="ruleForm.minioFileName" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </detail-block-com>
  </app-container>
</template>

<style lang="scss" scoped>
// 样式
</style>