<template>
  <div class="stats-analysis">
    <div class="card">
      <el-button v-auth="['statistics:export']" :icon="Download" type="primary" @click="exportAction">导出</el-button>
      <div class="chat-box mt20">
        <TopChart v-model:pointId="exportParams.pointId" />
      </div>
      <div class="chat-box mt20">
        <MiddleChart v-model:diseaseId="exportParams.diseaseId" />
      </div>
      <div class="chat-box mt20">
        <BottomChart v-model:bookId="exportParams.bookId" v-model:diseaseId="exportParams.bookDiseaseId" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, provide } from "vue";
import { Download } from "@element-plus/icons-vue";
import { useDownload } from "@/hooks/useDownload";
import { StatsAnalysis } from "@/api/interface";
import { getDictOptions } from "@/api/modules/common";
import { exportStatistics, getPointList, geSymptomList } from "@/api/modules/stats-analysis";

import TopChart from "./components/TopChart.vue";
import MiddleChart from "./components/MiddleChart.vue";
import BottomChart from "./components/BottomChart.vue";

const enumMap = ref(new Map<string, { [key: string]: any }[]>());
const exportParams = ref({} as StatsAnalysis.ReqExportParams);

function loadDropdownData() {
  getPointList().then(res => {
    enumMap.value.set("pointId", res.data);
  });
  geSymptomList().then(res => {
    enumMap.value.set("diseaseId", res.data);
  });
  getDictOptions("book").then(res => {
    enumMap.value.set("bookId", res.data);
  });
}
loadDropdownData();

provide("enumMap", enumMap);
// 导出
async function exportAction() {
  await useDownload(exportStatistics, `古代针灸方知识库统计报表_${Date.now()}`, exportParams.value, true, ".xlsx");
}
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
