<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: 200px" placeholder="请输入关键字" @select="handleSelect">
          <template #prepend>科室</template>
        </el-autocomplete>
        <el-select v-model="insurId" style="width: 180px" clearable placeholder="请选择险种">
          <el-option label="长沙市城职普通住院" value="1"></el-option>
          <el-option label="长沙市城居普通住院" value="2"></el-option>
        </el-select>
        <el-input v-model="bzmc" clearable style="width: 220px" class="w-50 m-2" placeholder="请输入关键字">
          <template #prepend>病种名称</template>
        </el-input>
        <el-autocomplete v-model="doctor" value-key="name" :fetch-suggestions="querySearchDoctor"
          :trigger-on-focus="false" clearable class="inline-input w-50 m-2" style="width: 220px" placeholder="请输入关键字"
          @select="handleSelect">
          <template #prepend>管床医生</template>
        </el-autocomplete>
        <el-select v-model="yk" style="width: 140px" clearable placeholder="请选择状况">
          <el-option label="盈余" value="y"></el-option>
          <el-option label="亏损" value="k"></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="exportBz" style="margin-left: 5px">导出</el-button>
    </template>
    <template #main>
      <el-table :data="returnData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" :height="tableHeight"
        highlight-current-row stripe>
        <el-table-column type="expand">
          <template #default="props">
            <el-table :data="props.row.children" v-show="props.row.isChildren">
              <el-table-column label="诊断名称" prop="zdmc"></el-table-column>
              <el-table-column label="申报类型" prop="sblx"></el-table-column>
              <el-table-column label="治疗方案" prop="zlfs"></el-table-column>
              <el-table-column label="分值" prop="fz" align="right"></el-table-column>
              <el-table-column label="医保预计支付人均(元)" prop="cjyjzf" align="right"></el-table-column>
              <el-table-column label="医保统筹支付人均(元)" prop="cjtczf" align="right"></el-table-column>
              <el-table-column label="人次" prop="rs" align="right"></el-table-column>
              <el-table-column label="盈亏额" prop="bal" align="right">
                <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 label="操作" prop="cz" align="center">
                <template #default="scope">
                  <el-button size="small" type="primary" @click="cz(scope.row)">病种对比</el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column prop="zdmc" label="病种名称" align="left" width="300"> </el-table-column>
        <el-table-column prop="cjyjzf" label="人均医保预计支付(元)" align="right"></el-table-column>
        <el-table-column prop="cjtczf" label="人均医保统筹支付(元)" align="right"></el-table-column>
        <el-table-column prop="rs" label="人次" align="right"></el-table-column>
        <el-table-column prop="bal" label="盈亏额" align="right">
          <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>
      <el-footer style="height: 40px">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
          :page-sizes="[15, 30, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="returnData.length" style="margin-top: 5px"></el-pagination>
      </el-footer>
    </template>
  </page-layer>

  <el-dialog v-model="showBzXq" :close-on-click-modal="false" title="病种对比信息" width="80%">
    <el-table :data="fetchBzdbDetails.slice((currentPage - 1) * pageSize, currentPage * pageSize)" height="560"
      highlight-current-row stripe @row-dblclick="openBzBrMx">
      <el-table-column label="科室" prop="dept"></el-table-column>
      <el-table-column label="医生" prop="doctor"></el-table-column>
      <el-table-column label="病种名称" prop="zdmc" width="160"></el-table-column>
      <el-table-column label="治疗方案" prop="zlfs"></el-table-column>
      <el-table-column label="申报类型" prop="sblx"></el-table-column>
      <el-table-column label="医保类型" prop="insurName"></el-table-column>
      <el-table-column label="总费用" prop="zfy" align="right"></el-table-column>
      <el-table-column label="医保预计支付" prop="yjzf" align="right"></el-table-column>
      <el-table-column label="医保统筹支付" prop="tczf" align="right"></el-table-column>
      <el-table-column label="盈亏额" prop="bal" align="right">
        <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 label="人次" prop="rs" align="right"></el-table-column>
      <el-table-column label="人均总费用" prop="cjzfy" align="right"></el-table-column>
      <el-table-column label="人均医保预计支付(元)" prop="cjyjzf" align="right"></el-table-column>
      <el-table-column label="人均医保统筹支付(元)" prop="cjtczf" align="right"></el-table-column>
    </el-table>
    <el-footer style="height: 40px">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[15, 30, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="fetchBzdbDetails.length" style="margin-top: 5px"></el-pagination>
    </el-footer>
  </el-dialog>
  <el-dialog v-model="showBzBrXq" :close-on-click-modal="false" title="病种对比病人信息" width="80%">
    <el-table :data="fetchBzdbBrDetails.slice((currentPage - 1) * pageSize, currentPage * pageSize)" height="560"
      highlight-current-row stripe>
      <el-table-column fixed label="科室" prop="dept"></el-table-column>
      <el-table-column fixed label="医生" prop="doctor"></el-table-column>
      <el-table-column fixed label="住院号" prop="zyh"></el-table-column>
      <el-table-column label="姓名" prop="xm"></el-table-column>
      <el-table-column label="主要诊断" prop="zdmc" width="180" show-overflow-tooltip>
        <template #default="scope"> {{ scope.row.zdmc }}<span>(</span>{{ scope.row.zdbm }}<span>)</span> </template>
      </el-table-column>
      <el-table-column label="主要手术" prop="ssmc" width="180" 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 label="治疗方案" prop="zlfs" width="120"></el-table-column>
      <el-table-column label="申报类型" prop="sblx"></el-table-column>
      <el-table-column label="医保类型" prop="yblx" width="120"></el-table-column>
      <el-table-column label="总费用" prop="zfy" align="right"></el-table-column>
      <el-table-column label="医保预计支付" prop="yjzf" align="right"></el-table-column>
      <el-table-column label="医保统筹支付" prop="tczf" align="right"></el-table-column>
      <el-table-column label="盈亏额" prop="bal" align="right">
        <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 label="分值" prop="fz" align="right"></el-table-column>
      <el-table-column label="结算时间" prop="jssj" width="140" align="center"></el-table-column>
    </el-table>
    <el-footer style="height: 40px">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[15, 30, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="fetchBzdbBrDetails.length" style="margin-top: 5px"></el-pagination>
    </el-footer>
  </el-dialog>

</template>
<script >
import { reactive, ref } from '@vue/reactivity'
import store from '@/store'
import { clone } from '@/utils/clone'
import { shortcuts, seltYearAndNowLast } from '@/data/shortcuts'
import { formatDate, getDateRangeFormatDate } from '@/utils/date'
import { selectSmallDept, selectDoctor } from '@/api/medical-insurance/si-yb-util'
import { selectCssYbBzTj, selectBzDbDetail, selectBzDbBrDetail } from '@/api/ybkf/yb-cssybtj'
import { Export } from '@/utils/ExportExcel'
import PageLayer from "@/layout/PageLayer";

export default {
  setup() {
    const windowSize = store.state.app.windowSize;
    const tableHeight = windowSize.h / 1.08;
    const start = formatDate(seltYearAndNowLast[0].value[0]);
    const end = formatDate(seltYearAndNowLast[1].value[1]);
    const insurId = ref("");
    const dept = ref("");
    const doctor = ref("");
    const bzmc = ref("");
    const yk = ref("");
    const queryTerm = reactive({
      startTime: "",
      endTime: "",
      insurName: "",
      dept: "",
      doctor: "",
      bzmc: "",
      yk: "",
      zlfs: "",
      sblx: "",
    });
    onMounted(() => {
      queryTerm.startTime = start;
      queryTerm.endTime = end + " 23:59:59";
      dateRange.value = [start, end];
    });
    const handleSelect = (item) => { };
    const querySearchDept = async (str, cb) => {
      let results = await selectSmallDept({ str });
      if (results) {
        // 调用 callback 返回建议列表的数据
        cb(results);
      }
    };
    const querySearchDoctor = async (str, cb) => {
      let results = await selectDoctor({ str });
      if (results) {
        // 调用 callback 返回建议列表的数据
        cb(results);
      }
    };
    const handleSizeChange = (val) => {
      pageSize.value = val;
    };
    const handleCurrentChange = (val) => {
      currentPage.value = val;
    };
    const currentPage = ref(1);
    const pageSize = ref(30);
    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,
        });
      }
      queryTerm.insurName = filterInsurName();
      queryTerm.dept = dept.value;
      queryTerm.doctor = doctor.value;
      queryTerm.bzmc = bzmc.value;
      queryTerm.yk = yk.value;
      selectCssYbBzTj(queryTerm)
        .then((res) => {
          returnData.value = res;
        })
        .catch(() => {
          returnData.value = [];
        });
      returnData.value = [];
    };
    const filterInsurName = () => {
      if (insurId.value == "1") {
        return "长沙市城职普通住院";
      }
      else if (insurId.value == "2") {
        return "长沙市城居普通住院";
      }
      else {
        return "";
      }
    };
    // ----------------------展开数据列-------------------------
    // 操作
    const showBzXq = ref(false);
    const fetchBzdbDetails = ref([]);
    const cz = (row) => {
      let selectBzInfo = clone(queryTerm);
      selectBzInfo.bzmc = row.zdmc;
      selectBzInfo.zlfs = row.zlfs;
      selectBzInfo.sblx = row.sblx;
      selectBzDbDetail(selectBzInfo)
        .then((res) => {
          fetchBzdbDetails.value = res;
          showBzXq.value = true;
        })
        .catch(() => {
          fetchBzdbDetails.value = [];
        });
    };
    // ----------------------病种对比明细情况-----------------------
    const showBzBrXq = ref(false);
    const fetchBzdbBrDetails = ref({});
    const openBzBrMx = (row) => {
      let selectBzInfo = clone(queryTerm);
      selectBzInfo.bzmc = row.zdmc;
      selectBzInfo.zlfs = row.zlfs;
      selectBzInfo.sblx = row.sblx;
      selectBzInfo.dept = row.dept;
      selectBzInfo.doctor = row.doctor;
      selectBzInfo.insurName = row.insurName;
      selectBzDbBrDetail(selectBzInfo).then((res) => {
        fetchBzdbBrDetails.value = res;
        showBzBrXq.value = true;
      });
    };
    // ----------------导出--------------------
    const exportBz = () => {
      if (returnData.value.length === 0) {
        ElMessage({
          message: "没有可以导出的数据！",
          type: "warning",
          duration: 2500,
          showClose: true,
        });
      }
      else {
        const title = {
          zdmc: "病种名称",
          cjyjzf: "人均医保预计支付(元)",
          cjtczf: "人均医保统筹支付(元)",
          rs: "人次",
          bal: "盈亏额",
        };
        Export(returnData.value, title, "市医保病种统计");
      }
    };
    return {
      dateRange,
      shortcuts,
      tableHeight,
      queryTerm,
      insurId,
      dept,
      doctor,
      bzmc,
      yk,
      returnData,
      showBzXq,
      fetchBzdbDetails,
      showBzBrXq,
      fetchBzdbBrDetails,
      pageSize,
      currentPage,
      query,
      handleSelect,
      querySearchDept,
      querySearchDoctor,
      cz,
      openBzBrMx,
      exportBz,
      handleSizeChange,
      handleCurrentChange,
    };
  },
  components: { PageLayer }
}
</script>
<style scoped>
:deep(.el-dialog__header) {
  margin-right: 2px;
}
</style>