<!-- 证书审批提醒 基本信息 -->
<script name="taskMeasureCertificateBasic" lang="ts" setup>
import type { Ref } from 'vue'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
// import * as pdfjsLib from 'pdfjs-dist'
import { onMounted, ref } from 'vue'
import type { IForm } from '../certificate-interface'
import changeRecord from './changeRecord.vue'
import filePreviewUrl from '@/components/filePreview/filePreviewUrl.vue'
import { getStream } from '@/api/business/subpackage/agreement'
import { getBase64, getObjectURL } from '@/utils/download'
import { getDictByCode } from '@/api/system/dict'
import WordOreview from '@/components/filePreview/wordOreview.vue'
import useOpenPdfinBrowser from '@/commonMethods/useOpenPdfinBrowser'
import { getUserList } from '@/api/system/user'
import { createMeasureCert, getInfo } from '@/api/business/taskMeasure/certificate'
import type { dictType } from '@/global'
const props = defineProps({
  pageType: { // 页面类型 add新建 edit编辑 detail详情
    type: String,
    default: 'detail',
  },
  // infoId: { // id
  //   type: String,
  //   default: '',
  // },
  measureDataId: { // 检定数据id
    type: String,
  },
})

const emits = defineEmits(['reportData'])
const form: Ref<IForm> = ref({ // 基本信息表单
  sampleName: '', // 被检设备名称
  model: '', // 规格型号
  manufacturingNo: '', // 出厂编号
  certificateFile: '', // 证书报告
  originalRecordFile: '', // 原始记录
  constCertificateExcelData: '', // 证书报告--用于新增检定项的word预览
  constRecordExcelData: '', // 原始记录--用于新增检定项的word预览
})
const infoId = ref('') // id
const getMeasureDataId = ref('') // 检定数据id
const approvalStatusName = ref('') // 审批状态名称
// ---------------------------------------标签---------------------------------------------
const radioMenus = ref([ // 标签内容
  { name: '原始记录/证书报告', value: 'certificate-content' },
  { name: '检定数据修改记录', value: 'certificate-change-record' },
])
const current = ref('certificate-content') // 选择的tab 默认基本信息
// -----------------------------------------路由参数----------------------------------------
// 从路由中获取页面类型参数
const $route = useRoute()
if ($route.params) {
  if ($route.params.id) {
    infoId.value = $route.params.id as string
  }
}
// ------------------------------------------字典----------------------------------------------
const mesureResultMap = ref<dictType[]>([]) // 检定结果
const measureCategoryList = ref<dictType[]>([]) // 检校类别
const userList = ref<{ [key: string]: string }[]>([]) // 用户列表
const isUrgentList = ref<dictType[]>([]) // 是否加急

/**
 * 获取字典
 */
function getDict() {
  // 检定结果
  getDictByCode('mesureResult').then((response) => {
    mesureResultMap.value = response.data
  })
  // 检校类别
  getDictByCode('measureCategory').then((response) => {
    measureCategoryList.value = response.data
  })
  // 获取用户列表
  getUserList({ offset: 1, limit: 999999 }).then((res: any) => {
    userList.value = res.data.rows
  })
  // 是否加急
  getDictByCode('isUrgent').then((response) => {
    isUrgentList.value = response.data
  })
}

// ----------------------------------------获取详情----------------------------------------

const fetchInfo = () => {
  const loading = ElLoading.service({
    lock: true,
    background: 'rgba(255, 255, 255, 0.8)',
  })
  getInfo({ id: infoId.value }).then((res) => {
    // if ((`${res.data.originalRecordFile}` === '') || (`${res.data.originalRecordFile}` === '' && `${res.data.certificateFile}`)) {
    //   createMeasureCert({ id: infoId.value }).then((res) => {
    //     form.value.originalRecordFile = res.data.originalRecordFile // 原始记录
    //     form.value.certificateFile = res.data.certificateFile // 检定证书
    //     emits('reportData', res.data.certificateFile, res.data.originalRecordFile)
    //     loading.close()
    //   })
    // }
    // else {
    loading.close()
    form.value.originalRecordFile = res.data.originalRecordFile // 原始记录
    form.value.certificateFile = res.data.certificateFile // 检定证书
    form.value.constCertificateExcelData = res.data.constCertificateExcelData // 原始记录
    form.value.constRecordExcelData = res.data.constRecordExcelData // 原始记录
    form.value.sampleName = res.data.sampleName // 被检设备名称
    form.value.model = res.data.model // 规格型号
    form.value.manufacturingNo = res.data.manufactureNo// 出厂编号
    getMeasureDataId.value = res.data.dataId
    emits('reportData', res.data.certificateFile, res.data.originalRecordFile)
    // }
  })
}

// 点击证书报告
const clickFile = (printFileName = '') => {
  if (printFileName) {
    useOpenPdfinBrowser(printFileName)
  }
}
// --------------------------------------------------------------------------------------
watch(() => props.measureDataId, (newValue) => {
  if (newValue) {
    getMeasureDataId.value = newValue
  }
}, { immediate: true })
onMounted(async () => {
  await getDict() // 获取字典
  form.value.sampleName = $route.query.sampleName as string// 被检设备名称
  form.value.model = $route.query.model as string // 规格型号
  form.value.manufacturingNo = $route.query.manufacturingNo as string // 出厂编号
  console.log('id', infoId.value)
  fetchInfo()
})
</script>

<template>
  <detail-block title="">
    <el-form
      ref="ruleFormRef"
      :model="form"
      :label-width="120"
      label-position="right"
    >
      <el-row :gutter="24" class="marg">
        <el-col :span="6">
          <el-form-item label="被检设备名称:" prop="sampleName">
            <el-input v-model="form.sampleName" disabled placeholder="被检设备名称" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="规格型号:" prop="model">
            <el-input v-model="form.model" disabled placeholder="规格型号" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="出厂编号:" prop="manufacturingNo">
            <el-input v-model="form.manufacturingNo" disabled placeholder="出厂编号" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </detail-block>
  <el-radio-group v-model="current" style="padding: 10px 0 0 10px;">
    <el-radio-button v-for="item in radioMenus" :key="item.value" :label="item.value">
      {{ item.name }}
    </el-radio-button>
  </el-radio-group>

  <el-row v-show="current === 'certificate-content'" :gutter="24" class="marg">
    <el-col v-if="form.certificateFile" :span="12">
      <el-form-item label="检定证书:">
        <!-- <show-photo :minio-file-name="form.certificateFile" width="100%" height="125px" /> -->
        <span class="link" @click="clickFile(form.certificateFile)">{{ form.certificateFile }}</span>
      </el-form-item>
    </el-col>
    <el-col v-if="form.originalRecordFile" :span="12">
      <el-form-item label="原始记录:">
        <!-- <show-photo :minio-file-name="form.originalRecordFile" width="100%" height="125px" /> -->
        <span class="link" @click="clickFile(form.originalRecordFile)">{{ form.originalRecordFile }}</span>
      </el-form-item>
    </el-col>
  </el-row>

  <div v-show="current === 'certificate-content'" style="display: flex; padding: 0;box-sizing: border-box;">
    <file-preview-url v-if="form.certificateFile" style="flex: 1;margin-right: 0;" :print-file-name="form.certificateFile" />
    <file-preview-url v-if="form.originalRecordFile" style="flex: 1;" :print-file-name="form.originalRecordFile" />
  </div>

  <!-- 新增检定项分类预览word -->
  <div v-if="form.constCertificateExcelData || form.constRecordExcelData" style="display: flex; padding: 10px 10px 20px 0;box-sizing: border-box;">
    <word-oreview v-if="form.constCertificateExcelData" style="flex: 1;margin-right: 10px;" :print-file-name="form.constCertificateExcelData" />
    <word-oreview v-if="form.constRecordExcelData" style="flex: 1;" :print-file-name="form.constRecordExcelData" />
  </div>
  <!-- 修改记录  -->
  <change-record v-show="current === 'certificate-change-record'" :measure-data-id="getMeasureDataId" :page-type="pageType" />
</template>

<style lang="scss" scoped>
.link {
  color: #5da0ff;
  text-decoration: underline;
  cursor: pointer;
  margin-right: 8px;
}
</style>