<template>
  <el-button @click="dialog = true">患者住院天数</el-button>
  <el-dialog v-model="dialog" title="患者住院天数">
    <el-date-picker
      v-model="dateRange"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :shortcuts="shortcuts"
      style="width: 260px"
    ></el-date-picker>
    <el-input-number v-model="tianShu" :precision="0" @keyup.enter="dianJiChaXun"></el-input-number>
    <el-divider direction="vertical"></el-divider>
    <el-button @click="dianJiChaXun" type="primary" icon="Search">查询</el-button>
    <el-divider direction="vertical"></el-divider>
    <el-button type="primary" icon="Upload" @click="exportExcelHuanZhe">导出Excel</el-button>
    <el-table
      :data="huanZheShuJu.data.slice((huanZheShuJu.currentPage - 1) * huanZheShuJu.pageSize, huanZheShuJu.pageSize * huanZheShuJu.currentPage)"
      :height="windowSize.h / 2.1"
    >
      <el-table-column prop="inpatientNo" label="住院号"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="deptName" label="科室"></el-table-column>
      <el-table-column prop="admissDate" label="住院时间" width="70"></el-table-column>
      <el-table-column prop="disDate" label="出院时间" width="70"></el-table-column>
      <el-table-column prop="differDate" label="住院天数"></el-table-column>
      <el-table-column prop="responceTypeName" label="医保类型"></el-table-column>
    </el-table>
    <el-pagination
      :page-size="huanZheShuJu.pageSize"
      layout="total,  prev, pager, next"
      :total="huanZheShuJu.data.length"
      @current-change="handleCurrentChange"
      :current-page="huanZheShuJu.currentPage"
    >
    </el-pagination>
  </el-dialog>
</template>

<script>
import { computed, ref, watch } from 'vue'
import { shortcuts } from '@/data/shortcuts'
import { chaXunHuanZheZhuYuanJianGe } from '../../api/reports/illegal-charges-analysis'
import { getDateRangeFormatDate } from '../../utils/date'
import { stringIsBlank } from '../../utils/blank-utils'
import { ElMessage } from 'element-plus'
import store from '../../store'
import { ExcelName } from '../../utils/ExportExcel'

export default {
  props: {
    dateRange: {
      default: [],
    },
  },
  name: 'huanZheZhuYuanTianShu',
  setup(props, ctx) {
    const dialog = ref(false)
    const dateRange = ref([])
    const tianShu = ref(1)
    const windowSize = computed(() => {
      return store.state.app.windowSize
    })

    const huanZheShuJu = ref({
      currentPage: 1,
      pageSize: 30,
      data: [],
    })

    const dianJiChaXun = () => {
      let dateS = getDateRangeFormatDate(dateRange.value)
      if (stringIsBlank(dateS.startTime)) {
        return ElMessage.error('请输入日期')
      }
      chaXunHuanZheZhuYuanJianGe(dateS.startTime, dateS.endTime, tianShu.value).then((res) => {
        huanZheShuJu.value.data = res
        huanZheShuJu.value.currentPage = 1
      })
    }

    const handleCurrentChange = (val) => {
      huanZheShuJu.value.currentPage = val
    }

    const exportExcelHuanZhe = () => {
      let title = {
        inpatientNo: '住院号',
        name: '姓名',
        deptName: '科室',
        admissDate: '住院时间',
        disDate: '出院时间',
        differDate: '住院天数',
        responceTypeName: '医保身份',
      }
      ExcelName(huanZheShuJu.value.data, title)
    }

    watch(
      () => props.dateRange,
      () => {
        dateRange.value = props.dateRange
      }
    )

    return {
      dialog,
      dateRange,
      shortcuts,
      tianShu,
      dianJiChaXun,
      huanZheShuJu,
      windowSize,
      handleCurrentChange,
      exportExcelHuanZhe,
    }
  },
}
</script>

<style scoped></style>
