<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-autocomplete v-model="dept" value-key="name" :fetch-suggestions="querySearchDept" :trigger-on-focus="false"
        clearable class="inline-input w-50 m-2" style="width: 240px" placeholder="请输入关键字" @select="handleSelect">
        <template #prepend>科室</template>
      </el-autocomplete>
      <el-input v-model="zyh" style="width: 240px" clearable placeholder="请输入住院号"><template #prepend>住院号</template>
      </el-input>
      <el-select v-model="insurId" style="width: 200px" clearable>
        <el-option label="长沙市城职普通住院" value="1"></el-option>
        <el-option label="长沙市城居普通住院" value="2"></el-option>
      </el-select>
      <el-button type="primary" icon="Search" @click="query" style="margin-left: 5px">查询</el-button>
      <el-button type="primary" icon="Download" @click="exportCycs" style="margin-left: 5px">导出</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">
        <el-table-column fixed prop="cyks" label="科室" width="130"></el-table-column>
        <el-table-column fixed prop="zyh" label="住院号" width="80" align="center"></el-table-column>
        <el-table-column prop="doctor" label="医生" width="80" align="center"></el-table-column>
        <el-table-column prop="xm" label="姓名" width="80" align="center"></el-table-column>
        <el-table-column prop="yblx" label="险种" width="120" align="center"></el-table-column>
        <el-table-column prop="zfy" label="总费用" width="100" align="right" sortable></el-table-column>
        <el-table-column prop="yjzf" label="预计支付" width="100" align="right" sortable></el-table-column>
        <el-table-column prop="tczf" label="统筹支付" width="100" align="right" sortable></el-table-column>
        <el-table-column prop="bal" label="盈亏额" width="100" align="right" sortable>
          <template #default="scope">
            <span v-if="scope.row.bal < 0" style="color: red">{{ scope.row.bal }}</span>
            <span v-else>{{ scope.row.bal }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="bxbl" label="报销比例(%)" width="100" align="right" sortable></el-table-column>
        <el-table-column prop="score" label="分值" width="100" align="right" sortable></el-table-column>
        <el-table-column prop="zlfs" label="治疗方式" width="130" align="left"></el-table-column>
        <el-table-column prop="sblx" label="申报类型" width="100" align="left"></el-table-column>
        <el-table-column prop="zdmc" label="主要诊断" width="200" align="left" show-overflow-tooltip>
          <template #default="scope"> {{ scope.row.zdmc }}<span>(</span>{{ scope.row.zdbm }}<span>)</span> </template>
        </el-table-column>
        <el-table-column prop="ssmc" label="主要手术" width="200" align="left" show-overflow-tooltip>
          <template #default="scope">
            <span v-if="scope.row.ssmc">{{ scope.row.ssmc }}<span>(</span>{{ scope.row.ssbm }}<span>)</span></span>
          </template>
        </el-table-column>
        <el-table-column prop="ryks" label="入院科室" width="130"></el-table-column>
        <el-table-column prop="cyks" label="出院科室" width="130"></el-table-column>
        <el-table-column prop="jssj" label="结算时间" width="140" align="center"></el-table-column>
      </el-table>
      <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>
    </template>
  </page-layer>
</template>
<script>
import { reactive, ref } from '@vue/reactivity'
import { shortcuts, clockinShortcuts } from '@/data/shortcuts'
import { onMounted } from 'vue'
import { formatDate, getDateRangeFormatDate } from '@/utils/date'
import { selectSmallDept } from '@/api/medical-insurance/si-yb-util'
import { selectCssYbCsTj } from '@/api/ybkf/yb-cssybtj'
import { ElMessage } from 'element-plus'
import store from '@/store'
import { Export } from '@/utils/ExportExcel'
import PageLayer from "@/layout/PageLayer";

export default {
  setup() {
    const windowSize = store.state.app.windowSize;
    const tableHeight = windowSize.h / 1.07;
    let start = formatDate(clockinShortcuts[0].value[0]);
    let end = formatDate(clockinShortcuts[0].value[1]);
    const handleSelect = (item) => { };
    const querySearchDept = async (str, cb) => {
      let results = await selectSmallDept({ str });
      if (results) {
        // 调用 callback 返回建议列表的数据
        cb(results);
      }
    };
    const insurId = ref("");
    const dept = ref("");
    const zyh = ref("");
    const queryTerm = reactive({
      startTime: "",
      endTime: "",
      insurName: "",
      dept: "",
      zyh: "",
    });
    onMounted(() => {
      queryTerm.startTime = start;
      queryTerm.endTime = end + " 23:59:59";
      dateRange.value = [start, end];
    });
    const dateRange = ref([]);
    const returnData = ref([]);
    let totalData = {};
    const pageSize = ref(30);
    const currentPage = ref(1);
    const handleSizeChange = (val) => {
      pageSize.value = val;
    };
    const handleCurrentChange = (val) => {
      currentPage.value = val;
    };
    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,
        });
      }
      queryTerm.insurName = filterInsurName();
      queryTerm.dept = dept.value;
      queryTerm.zyh = zyh.value;
      selectCssYbCsTj(queryTerm)
        .then((res) => {
          returnData.value = res.data;
          totalData = res
        })
    };
    const filterInsurName = () => {
      if (insurId.value == "1") {
        return "长沙市城职普通住院";
      }
      else if (insurId.value == "2") {
        return "长沙市城居普通住院";
      }
      else {
        return "";
      }
    };
    const getSummaries = (param) => {
      const { columns } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        if (column.property === "zfy") {
          sums[index] = totalData.zfy;
        } else if (column.property === "yjzf") {
          sums[index] = totalData.yjzf;
        } else if (column.property === "tczf") {
          sums[index] = totalData.tczf;
        } else if (column.property === "bal") {
          sums[index] = totalData.bal;
        } else if (column.property === "bxbl") {
          sums[index] = totalData.bxbl;
        } else if (column.property === "score") {
          sums[index] = totalData.score;
        }
      });
      return sums;
    };
    // ----------------导出--------------------
    const exportCycs = () => {
      if (returnData.value.length === 0) {
        ElMessage({
          message: "没有可以导出的数据！",
          type: "warning",
          duration: 2500,
          showClose: true,
        });
      }
      else {
        const title = {
          cyks: "科室",
          zyh: "住院号",
          doctor: "医生",
          xm: "姓名",
          yblx: "险种",
          zfy: "总费用",
          yjzf: "预计支付",
          tczf: "统筹支付",
          bal: "盈亏额",
          bxbl: "报销比例(%)",
          score: "分值",
          zlfs: "治疗方式",
          sblx: "申报类型",
          zdmc: "主要诊断",
          zdbm: "诊断编码",
          ssmc: "主要手术",
          ssbm: "手术编码",
          ryks: "入院科室",
          cyks: "出院科室",
          jssj: "结算时间",
        };
        let hj = {
          cyks: "合计",
          zfy: totalData.zfy,
          yjzf: totalData.yjzf,
          tczf: totalData.tczf,
          bal: totalData.bal,
          bxbl: totalData.bxbl,
          score: totalData.score,
        };
        returnData.value.push(hj);
        Export(returnData.value, title, "市医保测算统计");
      }
    };
    return {
      dateRange,
      shortcuts,
      insurId,
      dept,
      zyh,
      tableHeight,
      queryTerm,
      returnData,
      pageSize,
      currentPage,
      getSummaries,
      query,
      handleSelect,
      querySearchDept,
      exportCycs,
      handleSizeChange,
      handleCurrentChange,
    };
  },
  components: { PageLayer }
}
</script>
<style scoped>
:deep(.el-dialog__header) {
  margin-right: 2px;
}
</style>