<template>
  <el-container>
    <el-header height="35px" style="margin-top: 10px">
      <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :shortcuts="shortcuts"></el-date-picker>
      <el-select v-model="queryTerm.deptCode" filterable clearable placeholder="科室">
        <el-option v-for="item in deptList" :key="item.code" :label="item.name" :value="item.code"></el-option>
      </el-select>
      <el-select v-model="queryTerm.statusFlag" filterable clearable placeholder="会诊状态">
        <el-option v-for="item in huiZhenStatusFlag" :key="item.code" :label="item.name" :value="item.code"></el-option>
      </el-select>
      <el-button type="primary" icon="Search" @click="queryClick" style="margin-left: 5px">查询</el-button>
      <el-button type="primary" icon="Download" @click="exportExcel">导出excel</el-button>
    </el-header>
    <el-main>
      <el-table :data="huiZhenData" :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="inputName" label="申请人"></el-table-column>
        <el-table-column prop="deptCode" label="申请科室"></el-table-column>
        <el-table-column prop="reqTimes" label="申请次数"></el-table-column>
        <el-table-column prop="reqDate" label="申请会诊日期"></el-table-column>
        <el-table-column prop="reqDept1" label="会诊科室"></el-table-column>
        <el-table-column prop="hzDoctor" label="会诊医生"></el-table-column>
        <el-table-column prop="statusFlag" label="会诊状态">
          <template #default="scope">
            <span v-html="huiZhenZhuangTai(scope.row.statusFlag)"></span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryTerm.currentPage"
        :page-sizes="[100, 300, 400, 500]"
        :page-size="queryTerm.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="queryTerm.total"
        style="margin-top: 5px"
      ></el-pagination>
    </el-main>
  </el-container>
</template>

<script>
import { ref } from '@vue/reactivity'
import { shortcuts } from '@/data/shortcuts'
import { onMounted } from '@vue/runtime-core'
import { getDept, getHuiZhenTongJiData } from '@/api/querydata/huizhen-tongji'
import { getDateRangeFormatDate } from '@/utils/date'
import store from '@/store'
import { ElMessage } from 'element-plus'
import { downloadExcel } from '@/utils/excel'
export default {
  setup() {
    /**
     * 获取 屏幕高度
     */
    const windowSize = store.state.app.windowSize
    const tableHeight = windowSize.h - 85

    /**
     * 会诊状态枚举
     */
    const huiZhenStatusFlag = [
      { code: 0, name: '全部' },
      { code: 1, name: '未会诊' },
      { code: 2, name: '已会诊' },
    ]
    /**
     * 日期范围
     */
    const dateRange = ref([])

    /**
     * 初始化获取 全部科室
     */
    const deptList = ref([])

    /**
     * 查询条件
     */
    const queryTerm = ref({
      startTime: '',
      endTime: '',
      deptCode: '',
      statusFlag: 0,
      currentPage: 1,
      pageSize: 100,
      total: 0,
    })

    onMounted(() => {
      getDept().then((res) => {
        deptList.value = res
      })
    })

    /**
     * 点击搜索
     */
    const queryClick = () => {
      if (dateRange.value.length === 0) {
        ElMessage.warning({
          message: '请先选择日期范围',
          showClose: true,
        })
        return
      }
      let date = getDateRangeFormatDate(dateRange.value)
      queryTerm.value.startTime = date.startTime
      queryTerm.value.endTime = date.endTime
      getHuiZhenTongJiData(queryTerm.value).then((res) => {
        huiZhenData.value = res.records
        queryTerm.value.total = res.total
      })
    }

    /**
     * 获取数据
     */
    const huiZhenData = ref([])

    /**
     * 选择条数
     */
    const handleSizeChange = (val) => {
      queryTerm.value.pageSize = val
      queryClick()
    }
    /**
     * 翻页
     */
    const handleCurrentChange = (val) => {
      queryTerm.value.currentPage = val
      queryClick()
    }

    /**
     * 导出 excel
     */
    const exportExcel = () => {
      if (huiZhenData.value.length === 0) {
        ElMessage.error({
          message: '请先获取数据',
          showClose: true,
        })
        return
      }
      store.commit('app/setLoading', true)
      const data = {
        param: {
          currentPage: 1,
          pageSize: -1,
          startTime: queryTerm.value.startTime,
          endTime: queryTerm.value.endTime,
          dept: queryTerm.value.deptCode,
          statusFlag: queryTerm.value.statusFlag,
        },
        url: '/queryHuiZhen/exportExcel',
        fileName: queryTerm.value.startTime + '-' + queryTerm.value.endTime + '会诊统计',
      }
      setTimeout(() => {
        downloadExcel(data)
      }, 500)
    }
    return {
      dateRange,
      shortcuts,
      deptList,
      queryTerm,
      queryClick,
      huiZhenData,
      tableHeight,
      handleSizeChange,
      handleCurrentChange,
      huiZhenZhuangTai,
      exportExcel,
      huiZhenStatusFlag,
    }
  },
}

function huiZhenZhuangTai(val) {
  switch (val) {
    case 1:
      return '<span style="color:red">未会诊</span>'
    case 2:
      return '<span style="color:#409EFF">已会诊</span>'
    case 3:
      return '<span style="color:#faecd8">已取消</span>'
  }
}
</script>

<style></style>
