<!-- 量值溯源与传递等级 -->
<script name="OrderList" lang="ts" setup>
import { onMounted, ref } from 'vue'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import type { FormRules } from 'element-plus'
import VuePdfEmbed from 'vue-pdf-embed'
import dayjs from 'dayjs'
import * as pdfjsLib from 'pdfjs-dist'
import { UploadFile } from '@/api/file'
import { getPdfStream } from '@/api/system/tool'
import { getBase64, getObjectURL } from '@/utils/download'
import { addHistory, getGradeForm, getHistoryList } from '@/api/equipment/standard/book'
const props = defineProps({
  pageType: { // 页面类型 add新建 edit编辑 detail详情
    type: String,
    default: 'detail',
  },
  standardId: { // id
    type: String,
  },
  approvalStatusName: {
    type: String,
  },
  approvalType: { // 审批类型
    type: String,
  },
})
const form = ref({
  quantityPdfFile: '', //	量值溯源与传递等级pdf(minio文件名) 		false
  quantityWordFile: '', //	量值溯源与传递等级word(minio文件名) 		false
  standardId: '', //	标准装置id 		false
  updateStatus: '', //	是否修改文件(0:未修改 1:已修改)
}) as any

const rules = reactive<FormRules>({ // 表单验证规则
  quantityPdfFile: [{ required: true, message: '量值溯源与传递等级关系图（pdf版本）不能为空', trigger: ['blur', 'change'] }],
})

const radioMenus = ref([ // 标签内容
  { name: '当前量值溯源与传递等级', value: 'current', disabled: false },
  { name: '历史量值溯源与传递等级', value: 'history', disabled: false },
])
const current = ref('current') // 选择的tab 默认基本信息

const ruleFormRef = ref()
const formLoading = ref(false) // 表单Loading
// -------------------------------------------文件上传--------------------------------------
// 文件上传
const fileRefWord = ref() // 建标报告ref-word
const fileRefPdf = ref() // 建标报告ref-pdf

// word上传文件，在 Input 值改变时触发
const onQuantityWordFileChange = (event: any) => {
  if (event.target.files[0].type !== 'application/msword' && event.target.files[0].type !== 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {
    ElMessage.warning('请上传doc、docx文件格式')
    return
  }
  UploadFileFn(event, 'quantityWordFile', '文件上传成功')
}
// pdf上传文件，在 Input 值改变时触发
const onQuantityPdfFileChange = (event: any) => {
  if (event.target.files[0].type !== 'application/pdf') {
    ElMessage.warning('请上传pdf格式')
    return
  }
  UploadFileFn(event, 'quantityPdfFile', '文件上传成功')
}

// 上传文件操作
function UploadFileFn(event: any, prop: string, message: string) {
  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) {
        form.value[prop] = res.data[0]
        // 重置当前验证
        ElMessage.success(message)
        loading.close()
      }
      else {
        ElMessage.error(res.message)
        loading.close()
      }
    })
  }
}

const upload = (fileRef: any) => {
  fileRef.click()
}

// 保存
const saveGrade = () => {
  ruleFormRef.value.validate((valid: boolean) => {
    if (valid) { // 基本信息表单通过校验
      ElMessageBox.confirm(
        '确认保存吗？',
        '提示',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        },
      ).then(() => {
        const params = { // 请求参数
          quantityPdfFile: form.value.quantityPdfFile, //	量值溯源与传递等级pdf(minio文件名)
          quantityWordFile: form.value.quantityWordFile, //	量值溯源与传递等级word(minio文件名)
          standardId: props.standardId, //	标准装置id
          // 暂时先传0, 不考虑建标管理的问题
          updateStatus: '0', //	是否修改文件(0:未修改 1:已修改)
        }
        const loading = ElLoading.service({
          lock: true,
          text: '加载中...',
          background: 'rgba(255, 255, 255, 0.6)',
        })
        addHistory(params).then((res) => {
          loading.close()
          ElMessage.success('已保存')
        }).catch(() => {
          loading.close()
        })
      })
    }
  })
}

const pdfUrl = ref() as any
// 获取表单详情
const fetchGradeForm = () => {
  formLoading.value = true
  if (props.standardId) {
    getGradeForm({ id: props.standardId }).then((res) => {
      if (res.data) {
        form.value.quantityPdfFile = res.data.quantityPdfFile
        form.value.quantityWordFile = res.data.quantityWordFile
        if (form.value.quantityPdfFile) {
          getPdfStream(form.value.quantityPdfFile).then((res) => {
            getBase64(res.data).then((res) => {
              pdfUrl.value = res as string
            })
            pdfjsLib.GlobalWorkerOptions.workerSrc = '/pdf.worker.js'
          })
        }
      }
      formLoading.value = false
    }).catch(() => {
      formLoading.value = false
    })
  }
}

// ----------------------------------------------表格--------------------------------------
// 查询条件
const listQuery = ref({
  id: props.standardId!,
  offset: 1,
  limit: 20,
})
const loadingTable = ref(false) // 表格loading
const list = ref([]) // 表格数据
const total = ref(0) // 数据总条数
const columns = [ // 表头
  { text: '文件编号', value: 'applyNo', align: 'center' },
  { text: '变更原因', value: 'changeReason', align: 'center' },
  { text: '申请人', value: 'createUserName', align: 'center' },
  { text: '申请时间', value: 'createTime', align: 'center' },
  { text: '量值溯源与传递等级关系图', value: 'relationPdfFile', align: 'center' },
]

// 数据查询
function fetchData(isNowPage = false) {
  loadingTable.value = true
  if (!isNowPage) {
    // 是否显示当前页，否则跳转第一页
    listQuery.value.offset = 1
  }
  getHistoryList(listQuery.value).then((response) => {
    list.value = response.data.rows
    total.value = parseInt(response.data.total)
    loadingTable.value = false

    if (!list.value.length) {
      radioMenus.value = [ // 标签内容
        { name: '当前量值溯源与传递等级', value: 'current', disabled: false },
      ]
    }
    else {
      radioMenus.value = [ // 标签内容
        { name: '当前量值溯源与传递等级', value: 'current', disabled: false },
        { name: '历史量值溯源与传递等级', value: 'history', disabled: false },
      ]
    }
  }).catch(() => {
    loadingTable.value = false
  })
}

// 改变页容量
function handleSizeChange(val: number) {
  listQuery.value.limit = val
  fetchData()
}
// 改变当前页
function handleCurrentChange(val: number) {
  listQuery.value.offset = val
  fetchData(true)
}

onMounted(() => {
  fetchData()
  fetchGradeForm()
})

defineExpose({ saveGrade })
</script>

<template>
  <app-container>
    <el-radio-group v-model="current">
      <el-radio-button v-for="item in radioMenus" :key="item.value" :label="item.value">
        {{ item.name }}
      </el-radio-button>
    </el-radio-group>
    <el-form
      v-show="current === 'current' && pageType !== 'detail'"
      ref="ruleFormRef"
      v-loading="formLoading"
      :model="form"
      :label-width="130"
      label-position="right"
      :rules="rules"
      style="margin-top: 30px;"
    >
      <el-row :gutter="24" class="marg">
        <el-col :span="24">
          <el-form-item label="量值溯源与传递等级关系图(word版本):" label-width="300px">
            <show-photo v-if="form.quantityWordFile" :minio-file-name="form.quantityWordFile" />
            <span v-else-if="pageType === 'detail'">无</span>
            <input v-show="pageType === ''" ref="fileRefWord" type="file" @change="onQuantityWordFileChange">
            <!-- 草稿箱、未通过且审批类型为新建、已取消且审批类型为新建这三种情况才可以重新上传 -->
            <el-button v-if="pageType !== 'detail' && (props.approvalStatusName === '草稿箱' || (props.approvalStatusName === '未通过' && props.approvalType === '1') || (props.approvalStatusName === '已取消' && props.approvalType === '1'))" id="file" type="primary" :style="{ 'margin-left': form.quantityWordFile === '' ? '0px' : '20px' }" @click="upload(fileRefWord)">
              {{ form.quantityWordFile === '' ? '上传' : '更换附件' }}
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24" class="marg">
        <el-col :span="24">
          <el-form-item label="量值溯源与传递等级关系图(pdf版本):" prop="quantityPdfFile" label-width="300px">
            <show-photo v-if="form.quantityPdfFile" :minio-file-name="form.quantityPdfFile" />
            <span v-else-if="pageType === 'detail'">无</span>
            <input v-show="pageType === ''" ref="fileRefPdf" type="file" @change="onQuantityPdfFileChange">
            <el-button v-if="pageType !== 'detail' && (props.approvalStatusName === '草稿箱' || (props.approvalStatusName === '未通过' && props.approvalType === '1') || (props.approvalStatusName === '已取消' && props.approvalType === '1'))" id="file" type="primary" :style="{ 'margin-left': form.quantityPdfFile === '' ? '0px' : '20px' }" @click="upload(fileRefPdf)">
              {{ form.quantityPdfFile === '' ? '上传' : '更换附件' }}
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div v-if="current === 'current' && pageType === 'detail' && !form.quantityPdfFile" style="margin-top: 20px;color: #606266;font-size: 14px;">
      此标准装置无量值溯源与传递等级关系图，请在编辑页面上传！
    </div>
    <div v-show="current === 'current'" style="display: flex;justify-content: center; margin-top: 10px;width: 100%;">
      <vue-pdf-embed ref="pdf" style="width: 100%;" :source="pdfUrl" class="vue-pdf-embed" />
    </div>

    <el-table
      v-show="current === 'history'"
      v-loading="loadingTable"
      :data="list"
      border
      stripe
      style="width: 100%;margin-top: 30px;"
    >
      <el-table-column label="序号" width="55" align="center">
        <template #default="scope">
          {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
        v-for="item in columns"
        :key="item.value"
        :prop="item.value"
        :label="item.text"
        align="center"
      >
        <template #default="scope">
          <show-photo v-if="item.value === 'relationPdfFile'" :minio-file-name="scope.row[item.value]" /><br>
          <span v-if="item.value !== 'relationPdfFile'">{{ scope.row[item.value] }}</span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 页码 -->
    <el-pagination
      v-show="current === 'history'"
      style="width: 100%;margin-top: 10px;"
      :current-page="listQuery.offset"
      :page-sizes="[10, 20, 30]"
      :page-size="listQuery.limit"
      :total="total"
      layout="total, sizes, prev, pager, next"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </app-container>
</template>