<template>
  <page-layer>
    <template #header>
      <el-date-picker v-model="dateRange" :shortcuts="shortcuts" end-placeholder="结束日期" range-separator="至" start-placeholder="开始日期" type="datetimerange"></el-date-picker>
      <span></span>
      <el-select v-model="type" style="width: 130px" @change=";(list = []), (totalSize = 0)">
        <el-option v-for="item in types" :key="item.code" :label="item.name" :value="item.code"></el-option>
      </el-select>
      <el-divider direction="vertical"></el-divider>
      <el-button icon="Search" type="primary" @click="fetchResult">查询</el-button>
      <el-button icon="Upload" type="primary" @click="exportExcel">导出Excel</el-button>
    </template>
    <template #main>
      <el-table :data="list" :height="tableHeight" stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column v-if="type===9" label="标本号" prop="smplNum"></el-table-column>
        <el-table-column v-if="type===9" label="条码号" prop="aplyFlowNum"></el-table-column>
        <el-table-column label="姓名" prop="ptntName"></el-table-column>
        <el-table-column label="证件号码" prop="idCard"></el-table-column>
        <el-table-column label="联系电话" prop="phoneNum"></el-table-column>
        <el-table-column v-if="type===9" label="住址" prop="ctatAddr"></el-table-column>
        <el-table-column label="核酸检测结果（阴性/阳性/混阳）" prop="itmStrValue"></el-table-column>
        <el-table-column label="核酸检测时间" prop="lastUpdtDate"></el-table-column>
        <el-table-column v-if="type===9" label="报告时间" prop="lastUpdtDate"></el-table-column>
        <el-table-column label="核酸检测机构" prop="ordrCreateIns"></el-table-column>
        <el-table-column label="核酸采样时间" prop="ordrCreateDate"></el-table-column>
        <el-table-column label="核酸采样地址" prop="ordrCreateIns"></el-table-column>
        <el-table-column v-if="type===9" label="性别" prop="ptntSex"></el-table-column>
        <el-table-column v-if="type===9" label="年龄" prop="ptntAge"></el-table-column>
      </el-table>
      <el-pagination
          :current-page="currentPage"
          :page-size="pageSize"
          :page-sizes="[50, 100, 500, 1000, 5000, 10000]"
          :total="totalSize"
          layout="total, sizes, prev, pager, next, jumper"
          style="margin-top: 5px"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      ></el-pagination>
    </template>
  </page-layer>
</template>

<script>
import { ref } from 'vue'
import { formatDatetime } from '@/utils/date'
import { shortcuts } from '@/data/shortcuts'
import { fetchCovidExamData } from '@/api/inspections'
import store from '@/store'
import { Export } from '@/utils/ExportExcel'
import { ElMessage } from 'element-plus'
import { stringNotBlank } from '@/utils/blank-utils'
import PageLayer from "@/layout/PageLayer";

export default {
  components: {PageLayer},
  setup() {
    const windowSize = store.state.app.windowSize
    const tableHeight = windowSize.h - 50

    const dateRange = ref(null)
    const types = initTypes()
    const type = ref(1)

    const totalSize = ref(0)
    const list = ref([])

    const pageSize = ref(50)
    const currentPage = ref(1)
    const handleSizeChange = (val) => {
      pageSize.value = val
      fetchResult()
    }
    const handleCurrentChange = (val) => {
      currentPage.value = val
      fetchResult()
    }

    const fetchResult = () => {
      if (!dateRange.value) {
        ElMessage({
          message: '请选择时间范围',
          type: 'warning',
          duration: 2000,
          showClose: true,
        })
        return
      }
      const param = {
        start: formatDatetime(dateRange.value[0]),
        end: formatDatetime(dateRange.value[1]),
        currentPage: currentPage.value,
        pageSize: pageSize.value,
        type: type.value,
      }
      fetchCovidExamData(param).then((res) => {
        totalSize.value = res.totalSize
        list.value = res.list
      })
    }

    const exportExcel = () => {
      if (!dateRange.value) {
        ElMessage({
          message: '请选择时间范围',
          type: 'warning',
          duration: 2000,
          showClose: true,
        })
        return
      }

      store.commit('app/setLoading', true)

      const param = {
        start: formatDatetime(dateRange.value[0]),
        end: formatDatetime(dateRange.value[1]),
        currentPage: 1,
        pageSize: -1,
        type: type.value,
      }
      fetchCovidExamData(param).then((res) => {
        let fileName
        let title
        res.list.forEach((item) => {
          if (stringNotBlank(item.ordrCreateDate)) {
            item.ordrCreateDate = item.ordrCreateDate.substring(0, 16)
          }
        })
        fileName = type.value === 1 ? '新冠核酸检测' : '新冠抗体检测'
        if (type.value === 9) {
          fileName = '核酸阳性报告'
        }
        title = {
          ptntName: '姓名',
          idCard: '证件号码',
          phoneNum: '联系电话',
          itmStrValue: '核酸检测结果（阴性/阳性/混阳）',
          lastUpdtDate: '核酸检测时间',
          ordrCreateIns: '核酸检测机构',
          ordrCreateDate:'核酸采样时间',
          ordrCreateAddr:'核酸采样地址'
        };
        if (type.value === 9) {
          title = {
            smplNum: '标本号',
            aplyFlowNum: '条码号',
            ptntName: '姓名',
            idCard: '证件号码',
            phoneNum: '联系电话',
            ctatAddr: '住址',
            itmStrValue: '核酸检测结果（阴性/阳性）',
            ordrCreateDate: '核酸检测时间',
            lastUpdtDate: '报告时间',
            ordrCreateIns: '核酸检测机构',
            ptntSex: '性别',
            ptntAge: '年龄'
          };
        }
        Export(res.list, title, fileName);
      })
    }

    return {
      tableHeight,
      shortcuts,
      dateRange,
      types,
      type,
      fetchResult,
      totalSize,
      list,
      pageSize,
      currentPage,
      handleSizeChange,
      handleCurrentChange,
      exportExcel,
    }
  },
}

function initTypes() {
  return [
    { code: 1, name: '核酸检测' },
    { code: 2, name: '抗体检测' },
    { code: 9, name: '核酸阳性报告'}
  ]
}
</script>
