<!-- 复检通知书详情 -->
<script name="NoticeDetailApproved" lang="ts" setup>
// import * as pdfjsLib from 'pdfjs-dist'
import { ElLoading, ElMessage } from 'element-plus'
import type { ICustomerNoticeInfo } from './customer-notice'
import { exportFile } from '@/utils/exportUtils'
import { printPdf } from '@/utils/printUtils'
import { getBase64 } from '@/utils/download'
import { getStream, sendTo } from '@/api/resource/reviewNotice'
import FilterCustomerStaff from '@/views/resource/common/filterCustomerStaff.vue'

const $route = useRoute()
const $router = useRouter()
const pdfUrl = ref('') // pdfurl
const pdfStream = ref() as any // pdf流
// 从路由中传过来的参数
const id = ref<string>('')
const noticeInfo = ref<ICustomerNoticeInfo>({
  id: '',
  customerId: '',
  customerName: '',
  deptId: '',
  labCode: '',
  labCodeName: '',
  noticeUserId: '',
  noticeUserName: '',
  noticeNo: '',
  noticeName: '检测结果复查通知单',
  submitDate: '',
  deviceName: '',
  deviceModel: '',
  deviceNo: '',
  returnDate: '',
  noticeDate: '',
  sampleIdList: [],
  sendStatus: '',
  approvalStatus: '',
  approvalStatusName: '',
  appealUserId: '',
  appealUserName: '',
  processId: '',
  taskId: '',
  createUserId: '',
  createUserName: '',
  createTime: '',
})

const refCustomerStaffFilter = ref()

const route = useRoute()
const router = useRouter()

// 逻辑
// 关闭
const resetForm = () => {
  sessionStorage.removeItem('reviewNoticeInfo') // 返回列表时 将缓存中的数据删除
  router.go(-1)
}

// 点击 发送 按钮
const sendToCustomer = () => {
  refCustomerStaffFilter.value.showOrHideFilterDialog(true, noticeInfo.value.customerName)
}

const sysUserSelectedHandler = (row: any) => {
  refCustomerStaffFilter.value.showOrHideFilterDialog(false)

  if (row.id !== '') {
    sendTo({ id: id.value, noticeUserId: row.id }).then((res) => {
      if (res.code === 200) {
        // 提示保存成功
        ElMessage.success(`通知单发送到送检单位 ${row.customerName} 的 ${row.name} 成功`)
      }
      else {
        // 提示失败信息
        ElMessage.error(`通知单发送至送检单位失败：${res.message}`)
      }
    })
  }
  else {
    ElMessage.error('发送给委托方人员不能为空，请重新选择')
  }
}

// 导出word
const exportWord = () => {
  const loading = ElLoading.service({
    lock: true,
    text: '加载中...',
    background: 'rgba(255, 255, 255, 0.6)',
  })
  getStream({ id: id.value, pdf: false }).then((res) => {
    exportFile(res.data, '检测结果复查通知单.doc')
    loading.close()
  })
}

// 导出pdf
const exportPdf = () => {
  exportFile(pdfStream.value, '检测结果复查通知单.pdf')
}

// 打印
const print = () => {
  const blobUrl = URL.createObjectURL(pdfStream.value)
  printPdf(blobUrl)
}

const initDialog = (params: any) => {
  // 从路由中获取参数
  id.value = params.id !== undefined ? params.id : ''

  noticeInfo.value = JSON.parse(sessionStorage.getItem('reviewNoticeInfo')!)
  init()
}

/**
 * 初始化
 */
function init() {
  const loading = ElLoading.service({
    lock: true,
    text: '加载中...',
    background: 'rgba(255, 255, 255, 0.6)',
  })
  getStream({ id: id.value, pdf: true }).then((res) => {
    pdfStream.value = new Blob([res.data])
    getBase64(res.data).then((res) => {
      pdfUrl.value = res as string
    })
    // pdfjsLib.GlobalWorkerOptions.workerSrc = '/pdf.worker.js'
    loading.close()
  })
}

onMounted(() => {
  initDialog(route.query)
})
</script>

<template>
  <app-container>
    <detail-page title="检测结果复查通知单">
      <template #btns>
        <el-button type="primary" @click="sendToCustomer">
          发送给委托方
        </el-button>
        <el-button type="primary" @click="exportWord">
          导出word
        </el-button>
        <el-button type="primary" @click="exportPdf">
          导出pdf
        </el-button>
        <el-button type="primary" @click="print">
          打印
        </el-button>
        <el-button type="info" @click="resetForm()">
          关闭
        </el-button>
      </template>
    </detail-page>

    <filter-customer-staff ref="refCustomerStaffFilter" title="请选择委托方和签收人员" @record-selected="sysUserSelectedHandler" />
    <div style="display: flex;justify-content: center; margin-top: 10px;width: 100%;">
      <file-preview :pdf-url="pdfUrl" style="width: 70%;" />
    </div>
  </app-container>
</template>