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