<template>
  <page-layer>
    <template #header>
      <span style="margin-left: 0">日期范围：</span>
      <el-date-picker
          v-model="requestParam.datePeriod"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :shortcuts="shortcuts"
          style="width: 240px"
      ></el-date-picker>
      <el-button type="primary" style="margin-left: 30px" icon="Search" @click="queryInfantFee"> 查询 </el-button>
      <el-button type="primary" icon="Upload" @click="exportExcel"> 导出 Excel </el-button>
      <el-tag type="warning" effect="dark">合计：￥{{ data.sum }}</el-tag>
    </template>
    <template #main><el-table :data="data.list.slice((currentPage - 1) * pageSize, currentPage * pageSize)" stripe highlight-current-row empty-text="没有数据" :height="tableHeight">
      <el-table-column prop="inpatientNo" label="住院号"></el-table-column>
      <el-table-column prop="admissTimes" label="住院次数"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="charge" label="住院费用" sortable></el-table-column>
    </el-table>
      <div style="margin: 5px 10px">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[15, 30, 45, 60]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            background
            :total="data.list.length"
        >
        </el-pagination>
      </div>
    </template>
  </page-layer>
</template>

<script>
import { reactive, ref } from 'vue'
import store from '@/store'
import { getOneMonthOffset, formatDate } from '@/utils/date'
import { getInfantFee } from '@/api/reports/infant-fee-report'
import { ElMessage } from 'element-plus'
import { writeExcelFile, createWorkSheet } from '@/utils/excel'
import { shortcuts } from '@/data/shortcuts'
import PageLayer from "@/layout/PageLayer";
export default {
  components: {PageLayer},
  setup() {
    const windowSize = store.state.app.windowSize
    const requestParam = initRequestParam()
    const data = reactive({ list: [], sum: '0.00' })
    const currentPage = ref(1)
    const pageSize = ref(15)
    const handleSizeChange = (val) => {
      pageSize.value = val
    }
    const handleCurrentChange = (val) => {
      currentPage.value = val
    }
    const tableHeight = windowSize.h - 50
    const queryInfantFee = () => {
      requestParam.start = formatDate(requestParam.datePeriod[0])
      requestParam.end = formatDate(requestParam.datePeriod[1])
      getInfantFee(requestParam).then((res) => {
        data.list = res.list
        data.sum = res.sum
      })
    }
    const exportExcel = () => {
      if (data.list.length < 1) {
        ElMessage({
          type: 'warning',
          message: '没有可以导出的数据！',
          duration: 3000,
          showClose: true,
        })
      } else {
        store.commit('app/setLoading', true)
        setTimeout(() => {
          const title = {
            inpatientNo: '住院号',
            admissTimes: '住院次数',
            name: '姓名',
            charge: '住院费用',
          }
          const fields = ['inpatientNo', 'admissTimes', 'name', 'charge']
          const workSheet = createWorkSheet(data.list, fields, title)
          const fileName = '婴儿收费统计（' + requestParam.start + ' - ' + requestParam.end + '）.xlsx'
          writeExcelFile(workSheet, fileName)
        }, 50)
      }
    }
    return {
      shortcuts,
      requestParam,
      queryInfantFee,
      exportExcel,
      data,
      tableHeight,
      pageSize,
      currentPage,
      handleCurrentChange,
      handleSizeChange,
    }
  },
}

function initRequestParam() {
  const { start, end } = getOneMonthOffset()
  return reactive({ datePeriod: [start, end], start, end })
}
</script>
