<template>
  <page-layer>
    <template #header>
      <el-date-picker
          type="daterange"
          v-model="zhuYuanShiJianChaoTime"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :shortcuts="shortcuts"
      ></el-date-picker>
      <el-button type="primary" style="margin-left: 10px" @click="query">查询</el-button>
    </template>
    <template #main>
      <el-row>
        <el-col :span="12">
          <div style="width: 100%; height: 300px" id="huanZheChao30"></div>
        </el-col>
        <el-col :span="12">
          <div style="width: 100%; height: 300px" id="pingJunZhuYuan"></div>
        </el-col>
      </el-row>
    </template>
  </page-layer>
</template>

<script>
import {getDateRangeFormatDate} from '@/utils/date'
import {pieUtils} from '@/utils/echarts-utils'
import {shortcuts} from '@/data/shortcuts'
import {zhuYuanShiJianChao} from "@/api/querydata/jimubiaobiao";
import PageLayer from "@/layout/PageLayer";

export default {
  components: {PageLayer},
  setup() {
    // 引入

    // 住院时间超过
    const zhuYuanShiJianChaoTime = ref(['2020-01-01', '2021-11-01'])

    const query = () => {
      let daterange = getDateRangeFormatDate(zhuYuanShiJianChaoTime.value)
      let startTime = daterange.startTime
      let endTime = daterange.endTime
      zhuYuanShiJianChao(startTime, endTime).then((res) => {
        pieUtils(huanZheChao30, '住院时间超30日患者例数', res.huanZheChao30)
        pieUtils(pingJunZhuYuan, '住院患者平均住院日', res.pingJunZhuYuan)
      })
    }

    onMounted(() => {
      setTimeout(() => {
        query()
      }, 100)
    })

    return {
      zhuYuanShiJianChaoTime,
      query,
      shortcuts,
    }
  },
}
</script>

<style></style>
