<template>
  <page-layer>
    <template #header>
      <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
        end-placeholder="结束日期" :shortcuts="shortcuts"> </el-date-picker>
      <el-button type="primary" icon="Search" @click="query" style="margin-left: 5px">查询</el-button>
      <el-button type="primary" v-if="returnData.length > 0" icon="Download" @click="exportExcel">导出excel </el-button>
    </template>
    <template #main>
      <el-table :data="returnData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" :height="tableHeight"
        stripe highlight-current-row show-summary :summary-method="getSummaries" @row-dblclick="ysDaysdetails">
        <el-table-column prop="ryks" label="科室"></el-table-column>
        <el-table-column prop="days" label="管床日数" sortable></el-table-column>
      </el-table>
      <el-dialog v-model="showSetldetails" :close-on-click-modal="false" :close-on-press-escape="false"
        :title="filterDialogTitle" width="70%">
        <div style="width: 130px; height: 36px; position: absolute; top: 16px; right: 60px">
          <el-button icon="Download" type="primary" @click="exportDetailExcel">导出Excel</el-button>
        </div>
        <el-table :data="setldetails.slice(pageSize * (currentPage - 1), pageSize * currentPage)" height="560"
          highlight-current-row stripe show-summary :summary-method="getSummaries">
          <el-table-column prop="ryks" label="科室"></el-table-column>
          <el-table-column prop="doctor" label="医生"></el-table-column>
          <el-table-column prop="days" label="管床日数" sortable></el-table-column>
        </el-table>
        <el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="[15, 30, 45, 60]"
          :total="setldetails.length" layout="total, sizes, prev, pager, next, jumper" style="margin-top: 5px"
          @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
      </el-dialog>
    </template>
  </page-layer>
  <el-footer style="height: 40px">
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-sizes="[20, 30, 40, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
      :total="returnData.length" style="margin-top: 5px"></el-pagination>
  </el-footer>
</template>
<script>
import { reactive, ref } from '@vue/reactivity'
import { shortcuts } from '@/data/shortcuts'
import { clockinShortcuts } from '@/data/shortcuts'
import { onMounted } from 'vue'
import { formatDate, getDateRangeFormatDate } from '@/utils/date'
import { ElMessage } from 'element-plus'
import store from '@/store'
import { clone } from '@/utils/clone'
import { selectBedDays, selectYsDaysDetails } from '@/api/reports/bedDays'
import { ExcelName, Export } from '@/utils/ExportExcel'
import PageLayer from '@/layout/PageLayer.vue'

export default {
  setup() {
    const windowSize = store.state.app.windowSize;
    const tableHeight = windowSize.h / 1.02;
    const start = formatDate(clockinShortcuts[1].value[0]);
    const end = formatDate(clockinShortcuts[1].value[1]);
    const queryTerm = reactive({
      startTime: "",
      endTime: "",
      deptId: "",
    });
    onMounted(() => {
      queryTerm.startTime = start;
      queryTerm.endTime = end + " 23:59:59";
      dateRange.value = [start, end];
    });
    const dateRange = ref([]);
    const returnData = ref([]);
    const query = () => {
      if (dateRange.value) {
        let dateS = getDateRangeFormatDate(dateRange.value);
        queryTerm.startTime = dateS.startTime;
        queryTerm.endTime = dateS.endTime;
      }
      else {
        queryTerm.startTime = start;
        queryTerm.endTime = end;
        ElMessage({
          type: "info",
          message: "默认查询本月的数据",
          duration: 2500,
          showClose: true,
        });
      }
      selectBedDays(queryTerm)
        .then((res) => {
          returnData.value = res;
        })
        .catch(() => {
          returnData.value = [];
        });
    };
    const setldetails = ref([]);
    const showSetldetails = ref(false);
    const ysDaysdetails = (row) => {
      let selectInfo = clone(queryTerm);
      selectInfo.deptId = row.deptId;
      selectYsDaysDetails(selectInfo)
        .then((res) => {
          setldetails.value = res;
          showSetldetails.value = true;
        })
        .catch(() => {
          setldetails.value = [];
        });
    };
    const filterDialogTitle = computed(() => {
      return "管床日数医生明细";
    });
    const handleSizeChange = (val) => {
      pageSize.value = val;
    };
    const handleCurrentChange = (val) => {
      currentPage.value = val;
    };
    const currentPage = ref(1);
    const pageSize = ref(20);
    let sum = {};
    const getSummaries = (param) => {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        if (column.property === "doctor") {
          sums[index] = "";
          return;
        }
        const values = data.map((item) => Number(item[column.property]));
        if (!values.every((value) => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            }
            else {
              return prev;
            }
          }, 0);
        }
        else {
          sums[index] = 0;
        }
      });
      sum = sums;
      return sums;
    };
    const exportExcel = () => {
      let title = {
        ryks: "科室",
        days: "管床日数",
      };
      const data = clone(returnData.value);
      let dd = { ryks: "", days: "" };
      dd.ryks = sum[0];
      dd.days = sum[1];
      data.push(dd);
      ExcelName(data, title);
    };
    const exportDetailExcel = () => {
      if (setldetails.value.length === 0) {
        ElMessage({
          message: "没有可以导出的数据！",
          type: "warning",
          duration: 2500,
          showClose: true,
        });
      }
      else {
        const title = {
          ryks: "科室",
          doctor: "医生",
          days: "管床日数",
        };
        const data = clone(setldetails.value);
        let dd = { ryks: "", doctor: "", days: "" };
        dd.ryks = sum[0];
        dd.doctor = "";
        dd.days = sum[2];
        data.push(dd);
        Export(data, title, filterDialogTitle.value);
      }
    };
    return {
      dateRange,
      shortcuts,
      queryTerm,
      returnData,
      tableHeight,
      pageSize,
      currentPage,
      filterDialogTitle,
      setldetails,
      showSetldetails,
      query,
      exportExcel,
      exportDetailExcel,
      getSummaries,
      ysDaysdetails,
      handleSizeChange,
      handleCurrentChange,
    };
  },
  components: { PageLayer }
}
</script>