<!-- 分包证书管理详情 -->
<script lang="ts" setup name="CertificateEdit">
import type { Ref } from 'vue'
import { ElLoading, ElMessage } from 'element-plus'
import type { FormInstance } from 'element-plus'
import { ref } from 'vue'
import type { IForm } from './certificate-interface'
import { getPhotoUrl } from '@/api/file'
import type { dictType } from '@/global'
import { printPdf } from '@/utils/printUtils'
import { getDictByCode } from '@/api/system/dict'

const $router = useRouter() // 初始化router
const $route = useRoute()
const textMap: { [key: string]: string } = {
  edit: '编辑',
  add: '新建',
  detail: '详情',
}// 字典
const pageType = ref('add') // 页面类型: add, edit, detail
const loading = ref(false) // 表单加载状态
const infoId = ref('') // id
const form: Ref<IForm> = ref({ // 表单
  certificateNo: '', // 证书号
  certificateName: '', // 证书名称
  sampleName: '', // 受检设备名称
  model: '', // 型号
  manufactureNo: '', // 出厂编号
  manufacturer: '', // 生产厂家
  orderNo: '', // 任务单编号
  customerName: '', // 委托方
  outsourcerName: '', // 检测单位名称-分包方名称
  contacts: '', // 联系人
  checkDate: '', //  检定(校准)日期
  certificateValid: '', // 证书有效期
  conclusion: '', // 检定结论
  meterIdentify: '', // 计量标识
  id: '', // id
  certificateReportFile: '', // 证书文件
  originalRecordFile: '', // 原始记录文件
})
const ruleFormRef = ref<FormInstance>() // 表单ref
// 关闭
const close = () => {
  $router.back()
}

// -----------------------------------------路由参数--------------------------------
if ($route.params && $route.params.type) {
  pageType.value = $route.params.type as string
  if ($route.params.id) {
    infoId.value = $route.params.id as string
  }
}

// ------------------------------------------字典----------------------------------------------
const meterIdentifyDict = ref<dictType[]>([]) // 计量标识

/**
 * 获取字典
 */
async function getDict() {
  // 计量标识
  const response = await getDictByCode('eqptMeterIdentify')
  meterIdentifyDict.value = response.data
}

// 点击打印
const print = () => {
  if (form.value.certificateReportFile.lastIndexOf('.pdf') > 0) {
    const loading = ElLoading.service({
      lock: true,
      text: '加载文件中...',
      background: 'rgba(255, 255, 255, 0.6)',
    })
    getPhotoUrl(form.value.certificateReportFile).then((res) => {
      printPdf(res.data)
      loading.close()
    }).catch(() => loading.close())
  }
  else {
    ElMessage.warning('只允许打印pdf文件，请检查文件后缀！')
  }
}

onMounted(() => {
  getDict().then(() => {
    const row = JSON.parse($route.query.row as any)
    form.value.certificateNo = row.certificateNo// 证书号
    form.value.certificateName = row.certificateName// 证书名称
    form.value.sampleName = row.sampleName// 受检设备名称
    form.value.model = row.model// 型号
    form.value.manufactureNo = row.manufactureNo// 出厂编号
    form.value.manufacturer = row.manufacturer// 生产厂家
    form.value.orderNo = row.orderNo// 任务单编号
    form.value.customerName = row.customerName// 委托方
    form.value.outsourcerName = row.outsourcerName// 检测单位名称-分包方名称
    form.value.contacts = row.contacts// 联系人
    form.value.checkDate = row.checkDate//  检定(校准)日期
    form.value.certificateValid = row.certificateValid// 证书有效期
    form.value.conclusion = row.conclusion// 检定结论
    form.value.meterIdentify = row.meterIdentify// 计量标识
    form.value.id = row.id// id
    form.value.certificateReportFile = row.certificateReportFile// 证书文件
    form.value.originalRecordFile = row.originalRecordFile// 原始记录文件
  })
})
</script>

<template>
  <div>
    <!-- 布局 -->
    <app-container>
      <detail-page v-loading="loading" :title="`分包证书管理-${textMap[pageType]}`">
        <template #btns>
          <el-button type="info" @click="close">
            关闭
          </el-button>
        </template>
        <div id="form">
          <el-form
            ref="ruleFormRef"
            :model="form"
            :label-width="120"
            label-position="right"
            :rules="rules"
          >
            <el-row :gutter="24">
              <el-col :span="6">
                <el-form-item label="证书编号:" prop="certificateNo">
                  <el-input
                    v-model="form.certificateNo"
                    :placeholder="pageType === 'detail' ? '' : '证书编号'"
                    :class="{ 'detail-input': pageType === 'detail' }"
                    disabled
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="证书名称:" prop="certificateName">
                  <el-input
                    v-model.trim="form.certificateName"
                    :placeholder="pageType === 'detail' ? '' : '证书名称'"
                    :class="{ 'detail-input': pageType === 'detail' }"
                    disabled
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="受检设备名称:" prop="sampleName">
                  <el-input
                    v-model="form.sampleName"
                    :placeholder="pageType === 'detail' ? ' ' : '受检设备名称'"
                    :class="{ 'detail-input': pageType === 'detail' }"
                    disabled
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="规格型号:" prop="model">
                  <el-input
                    v-model="form.model"
                    :placeholder="pageType === 'detail' ? ' ' : '规格型号'"
                    :class="{ 'detail-input': pageType === 'detail' }"
                    disabled
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="出厂编号:" prop="manufactureNo">
                  <el-input
                    v-model="form.manufactureNo"
                    :placeholder="pageType === 'detail' ? ' ' : '出厂编号'"
                    :class="{ 'detail-input': pageType === 'detail' }"
                    disabled
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="生产厂家:" prop="manufacturer">
                  <el-input
                    v-model="form.manufacturer"
                    :placeholder="pageType === 'detail' ? ' ' : '生产厂家'"
                    :class="{ 'detail-input': pageType === 'detail' }"
                    disabled
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="任务单编号:" prop="orderNo">
                  <el-input
                    v-model.trim="form.orderNo"
                    :placeholder="pageType === 'detail' ? ' ' : '任务单编号'"
                    disabled
                    class="full-width-input"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="委托方:" prop="customerName">
                  <el-input
                    v-model.trim="form.customerName"
                    :placeholder="pageType === 'detail' ? ' ' : '委托方'"
                    disabled
                    class="full-width-input"
                    clearable
                  />
                </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' ? ' ' : '分包方名称'"
                    disabled
                    class="full-width-input"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="联系人:" prop="contacts">
                  <el-input
                    v-model.trim="form.contacts"
                    :placeholder="pageType === 'detail' ? ' ' : '联系人'"
                    disabled
                    class="full-width-input"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="检定日期:" prop="checkDate">
                  <el-date-picker
                    v-model="form.checkDate"
                    type="date"
                    style="width: 100%;"
                    :placeholder="pageType === 'detail' ? '' : '检定日期'"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                    disabled
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="检定有效期:" prop="certificateValid">
                  <el-date-picker
                    v-model="form.certificateValid"
                    type="date"
                    style="width: 100%;"
                    :placeholder="pageType === 'detail' ? '' : '检定有效期'"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                    disabled
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="检定结论:" prop="conclusion">
                  <el-input
                    v-model.trim="form.conclusion"
                    :placeholder="pageType === 'detail' ? ' ' : '检定结论'"
                    disabled
                    class="full-width-input"
                    clearable
                  />
                </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
                    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" class="marg">
              <el-col :span="24">
                <el-form-item label="证书报告:" prop="certificateReportFile">
                  <show-photo v-if="form.certificateReportFile" :minio-file-name="form.certificateReportFile" />
                  <span v-if="!form.certificateReportFile">无</span>
                  <el-button v-if="form.certificateReportFile" id="file" type="primary" :style="{ 'margin-left': form.certificateReportFile === '' ? '0px' : '20px' }" @click="print">
                    打印
                  </el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </detail-page>
    </app-container>
  </div>
</template>