<template>
  <page-layer>
    <template #header>
      <el-date-picker v-model="dateRange" :shortcuts="shortcuts" end-placeholder="结束日期" range-separator="至" size="small"
                      start-placeholder="开始日期" type="daterange">
      </el-date-picker>
      <el-select v-if="showDeptList" v-model="queryTerm.dept" clearable filterable>
        <el-option v-for="item in deptList" :key="item.code" :label="item.name" :value="item.code">
          <span style="color: #8492a6; font-size: 12px">{{ item.code }}</span>
          <el-divider direction="vertical"></el-divider>
          <span>{{ item.name }}</span></el-option
        >
      </el-select>
      <el-button icon="Search" style="margin-left: 5px" type="primary" @click="query">查询</el-button>
      <el-button v-show="renderData.list.length" icon="Download" type="primary" @click="exportExcel">导出excel</el-button>
    </template>
    <template #main>
      <el-table :data="renderData.list" :height="windowSize.h / 1.2 + 40" highlight-current-row stripe>
        <el-table-column label="住院号" prop="inpatientNo"></el-table-column>
        <el-table-column label="住院次数" prop="admissTimes"></el-table-column>
        <el-table-column label="科室" prop="dept"></el-table-column>
        <el-table-column label="医生" prop="doctor"></el-table-column>
        <el-table-column label="收费日期" prop="inputDate"></el-table-column>
        <el-table-column label="会诊级别" prop="position"></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-pagination
          :current-page="queryTerm.currentPage"
          :page-size="queryTerm.pageSize"
          :page-sizes="[20, 30, 40, 50, 100]"
          :total="renderData.total"
          layout="total, sizes, prev, pager, next, jumper"
          style="margin-top: 5px"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      ></el-pagination>
    </template>
  </page-layer>
</template>

<script name="InquiryOfConsultationFee" setup>
import {reactive} from '@vue/reactivity'
import {shortcuts} from '@/data/shortcuts'
import store from '@/store'
import {queryInquiryOfConsultationFee} from '@/api/querydata/Inquiry-of-consultationFee'
import {getDateRangeFormatDate} from '@/utils/date'
import {downloadExcel} from '@/utils/excel'
import {ElMessage} from 'element-plus'
import {getDept} from '@/api/public-api'
import {needRule} from '@/utils/public'
import PageLayer from "@/layout/PageLayer";

const windowSize = computed(() => {
  return store.state.app.windowSize
})

let dateRange = $ref([])
const queryTerm = reactive({
  startTime: '',
  endTime: '',
  dept: store.state.user.info.deptCode,
  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 !== null) {
    let dateS = getDateRangeFormatDate(dateRange)
    queryTerm.startTime = dateS.startTime
    queryTerm.endTime = dateS.endTime
    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)
}

let deptList = $ref([])
let showDeptList = needRule(1, 2, 32)

onMounted(() => {
  if (showDeptList) {
    getDept().then((res) => {
      deptList = res
    })
  }
})
</script>

<style></style>
