<template>
  <el-collapse>
    <el-header height="36px" style="margin-top: 8px">
      <el-date-picker v-model="dateRange" type="daterange" size="small" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :shortcuts="shortcuts">
      </el-date-picker>
      <el-button type="primary" icon="el-icon-search" @click="query" style="margin-left: 5px">查询</el-button>
      <el-button type="primary" v-show="renderData.list.length" icon="el-icon-download" @click="exportExcel">导出excel</el-button>
    </el-header>
    <el-main>
      <el-table :data="renderData.list" :height="tableHeight" stripe highlight-current-row>
        <el-table-column prop="inpatientNo" label="住院号"></el-table-column>
        <el-table-column prop="admissTimes" label="住院次数"></el-table-column>
        <el-table-column prop="dept" label="科室"></el-table-column>
        <el-table-column prop="doctor" label="医生"></el-table-column>
        <el-table-column prop="inputDate" label="收费日期"></el-table-column>
        <el-table-column prop="position" label="会诊级别"></el-table-column>
        <el-table-column label="费用">
          <template #default="scope">
            <span v-if="scope.row.chargeFee > 0" style="color: blue">{{ scope.row.chargeFee }} ￥</span>
            <span v-else style="color: red">{{ scope.row.chargeFee }} ￥</span>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer style="height: 20px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryTerm.currentPage"
        :page-size="queryTerm.pageSize"
        :page-sizes="[20, 30, 40, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="renderData.total"
        style="margin-top: 5px"
      ></el-pagination>
    </el-footer>
  </el-collapse>
</template>

<script>
import { reactive, ref } from '@vue/reactivity'
import { shortcuts } from '@/data/shortcuts'
import store from '@/store'
import { queryInquiryOfConsultationFee } from '@/api/querydata/Inquiry-of-consultationFee'
import { formatDate } from '@/utils/date'
import { downloadExcel } from '@/utils/excel'
import { ElMessage } from 'element-plus'

export default {
  name: 'InquiryOfConsultationFee',
  setup() {
    const windowSize = store.state.app.windowSize
    const tableHeight = windowSize.h - 85

    const dateRange = ref(null)
    const queryTerm = reactive({
      startTime: '',
      endTime: '',
      currentPage: 1,
      pageSize: 30,
    })
    const renderData = reactive({
      list: [],
      total: 0,
    })
    const handleSizeChange = (val) => {
      queryTerm.pageSize = val
      query()
    }
    const handleCurrentChange = (val) => {
      queryTerm.currentPage = val
      query()
    }
    const query = () => {
      if (dateRange.value !== null) {
        queryTerm.startTime = formatDate(dateRange.value[0])
        queryTerm.endTime = formatDate(dateRange.value[1])
        queryInquiryOfConsultationFee(queryTerm).then((res) => {
          renderData.list = res.data
          renderData.total = res.total
        })
      } else {
        ElMessage({
          type: 'warning',
          message: '请先选择日期范围',
          showClose: true,
          duration: 2500,
        })
      }
    }
    const exportExcel = () => {
      store.commit('app/setLoading', true)
      const data = {
        param: {
          currentPage: 1,
          pageSize: -1,
          startTime: queryTerm.startTime,
          endTime: queryTerm.endTime,
        },
        url: '/queryData/ExportConsultationFee',
        fileName: queryTerm.startTime + '至' + queryTerm.endTime + '会诊费用.xlsx',
      }
      setTimeout(() => {
        downloadExcel(data)
      }, 500)
    }
    return {
      dateRange,
      shortcuts,
      query,
      queryTerm,
      renderData,
      tableHeight,
      handleSizeChange,
      handleCurrentChange,
      exportExcel,
    }
  },
}
</script>

<style></style>
