<template>
  <el-container>
    <el-header height="36px" style="margin-top: 8px">
      日期范围：
      <el-date-picker
        v-model="dateRange"
        :shortcuts="shortcuts"
        end-placeholder="结束日期"
        range-separator="至"
        start-placeholder="开始日期"
        style="width: 260px"
        type="daterange"
      ></el-date-picker>
      &nbsp;&nbsp;医保类别：
      <el-select v-model="selectedResponces" clearable collapse-tags multiple placeholder="不选默认为全部医保" style="width: 180px">
        <el-option v-for="item in responces" :key="item.code" :label="item.name" :value="item.code"></el-option>
      </el-select>
      <el-button icon="Search" type="primary" @click="chaXunJianYanJianChaClick">检索</el-button>
      <el-button v-show="jianYanJianChaData.length > 0" icon="Download" type="primary" @click="exportExcel"> 导出excel </el-button>
    </el-header>
    <el-main>
      <el-table :data="jianYanJianChaData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" :height="tableHeight" highlight-current-row stripe>
        <el-table-column label="姓名" prop="name"></el-table-column>
        <el-table-column label="住院号" prop="inpatientNo"></el-table-column>
        <el-table-column label="住院次数" prop="admissTimes"></el-table-column>
        <el-table-column label="住院日期" prop="admissDate" width="70px"></el-table-column>
        <el-table-column label="出院日期" prop="disDate" width="70px"></el-table-column>
        <el-table-column label="检查费" prop="jianChaFei" sortable></el-table-column>
        <el-table-column label="检验费" prop="jianYanFei" sortable></el-table-column>
        <el-table-column label="检查检验费占比" prop="jcjyfzb" sortable></el-table-column>
        <el-table-column label="总费用" prop="zongFeiYong" sortable></el-table-column>
        <el-table-column label="医保类型" prop="responceTypeName"></el-table-column>
        <el-table-column label="科室" prop="deptName"></el-table-column>
        <el-table-column v-if="false" label="操作">
          <template #default="scope">
            <el-button text @click="chaKanXiangQingClick(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        :page-sizes="[20, 30, 40, 50, 100]"
        :total="jianYanJianChaData.length"
        layout="total, sizes, prev, pager, next, jumper"
        style="margin-top: 5px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </el-main>
  </el-container>
</template>

<script>
import { ref } from 'vue'
import { shortcuts } from '@/data/shortcuts'
import { chaXunJianYanJianCha } from '@/api/querydata/query-pay-service'
import { getDateRangeFormatDate } from '@/utils/date'
import { ElMessage } from 'element-plus'
import store from '@/store'
import { createWorkSheet, writeExcelFile } from '@/utils/excel'

export default {
  setup() {
    const windowSize = store.state.app.windowSize
    const tableHeight = windowSize.h / 1.2

    const dateRange = ref(null)
    const selectedResponces = ref(null)

    const responces = initResponces()

    const selectedTemplate = ref({})

    const jianYanJianChaData = ref([])

    //
    const currentPage = ref(1)
    const pageSize = ref(20)

    const chaXunJianYanJianChaClick = () => {
      if (!dateRange.value) {
        ElMessage({
          message: '请选择日期范围',
          type: 'warning',
          duration: 2000,
          showClose: true,
        })
        return
      }
      let getDateRange = getDateRangeFormatDate(dateRange.value)
      selectedTemplate.value.start = getDateRange.startTime
      selectedTemplate.value.end = getDateRange.endTime
      selectedTemplate.value.responces = selectedResponces.value
      chaXunJianYanJianCha(selectedTemplate.value).then((res) => {
        jianYanJianChaData.value = res
      })
    }

    const handleSizeChange = (val) => {
      pageSize.value = val
    }

    const handleCurrentChange = (val) => {
      currentPage.value = val
    }

    const exportExcel = () => {
      store.commit('app/setLoading', true)
      setTimeout(() => {
        const title = {
          name: '姓名',
          inpatientNo: '住院号',
          admissTimes: '住院次数',
          admissDate: '住院日期',
          disDate: '出院日期',
          jianChaFei: '检查费',
          jianYanFei: '检验费',
          jcjyfzb: '检查检验费占比',
          zongFeiYong: '总费用',
          deptName: '科室',
          responceTypeName: '医保类型',
          responceType: '医保编码',
        }
        const fields = [
          'name',
          'inpatientNo',
          'admissTimes',
          'admissDate',
          'disDate',
          'jianChaFei',
          'jianYanFei',
          'jcjyfzb',
          'zongFeiYong',
          'deptName',
          'responceTypeName',
          'responceType',
        ]
        const workSheet = createWorkSheet(jianYanJianChaData.value, fields, title)
        const fileName = '检验检查占比' + selectedTemplate.value.start + ' - ' + selectedTemplate.value.end + '）.xlsx'
        writeExcelFile(workSheet, fileName)
      }, 50)
    }

    const chaKanXiangQingClick = (val) => {
      console.log(val)
    }
    return {
      dateRange,
      responces,
      selectedResponces,
      shortcuts,
      chaXunJianYanJianChaClick,
      jianYanJianChaData,
      currentPage,
      pageSize,
      tableHeight,
      handleSizeChange,
      handleCurrentChange,
      exportExcel,
      chaKanXiangQingClick,
    }
  },
}

function initResponces() {
  return [
    { code: '02', name: '省医保' },
    { code: '03', name: '市城居医保' },
    { code: '04', name: '新农合' },
    { code: '09', name: '市城职医保' },
    { code: '10', name: '省医保-异地' },
  ]
}
</script>

<style></style>
