<template>
  <div class="pd20">
    <div class="search">
      <SearchForm :search="search" :reset="reset" :columns="searchColumns" :search-param="searchParam" :search-col="3" />
    </div>
    <Grid :gap="100" :cols="3">
      <GridItem>
        <div class="echarts">
          <ECharts :option="option1" />
        </div>
      </GridItem>
      <GridItem>
        <div class="echarts">
          <ECharts :option="option2" />
        </div>
      </GridItem>
      <GridItem>
        <div class="echarts">
          <ECharts :option="option3" />
        </div>
      </GridItem>
    </Grid>
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits } from "vue";
import { ElMessage } from "element-plus";
import ECharts from "@/components/ECharts/index.vue";
import Grid from "@/components/Grid/index.vue";
import GridItem from "@/components/Grid/components/GridItem.vue";
import { ColumnProps } from "@/components/ProTable/interface";
import SearchForm from "@/components/SearchForm/index.vue";
import { StatsAnalysis } from "@/api/interface";
import { getBookDiseasePointData, getBookDiseaseTreatmentData, getBookDiseaseEapData } from "@/api/modules/stats-analysis";
import { useChart } from "../hooks/useChart";

defineProps({
  bookId: {
    type: Number
  },
  diseaseId: {
    type: Number
  }
});

// hooks
const { option: option1, loadData: loadData1 } = useChart("腧穴名", getBookDiseasePointData);
const { option: option2, loadData: loadData2 } = useChart("治疗方法", getBookDiseaseTreatmentData);
const { option: option3, loadData: loadData3 } = useChart("病因病机", getBookDiseaseEapData);

const emit = defineEmits(["update:bookId", "update:diseaseId"]);
const searchParam = ref({} as StatsAnalysis.ReqSearchParam);

const searchColumns: ColumnProps[] = [
  {
    label: "书名",
    prop: "bookId",
    search: {
      el: "select",
      props: { filterable: true, placeholder: "请输入" }
    },
    fieldNames: { label: "dictLabel", value: "dictCode" }
  },
  {
    label: "病证名",
    prop: "diseaseId",
    search: {
      el: "select",
      props: { filterable: true, placeholder: "请输入" }
    },
    fieldNames: { label: "keyword", value: "id" }
  }
];
// 搜索
function search() {
  emit("update:diseaseId", searchParam.value.diseaseId);
  emit("update:bookId", searchParam.value.bookId);
  if (searchParam.value.diseaseId && !searchParam.value.bookId) {
    ElMessage.warning("请选择书名");
    return;
  }

  if (searchParam.value.bookId && !searchParam.value.diseaseId) {
    ElMessage.warning("请选择病证名");
    return;
  }
  loadData();
}

// 重置
function reset() {
  searchParam.value = {} as StatsAnalysis.ReqSearchParam;
  emit("update:diseaseId", undefined);
  emit("update:bookId", undefined);
  loadData();
}

function loadData() {
  loadData1(searchParam.value);
  loadData2(searchParam.value);
  loadData3(searchParam.value);
}
</script>

<style lang="scss" scoped>
.search {
  display: flex;
  justify-content: flex-start;
  .table-search.card {
    width: 100%;
    max-width: 700px;
    padding: 0;
    background: unset;
    :deep(.el-form) {
      > div {
        display: flex !important;
        > div:first-child {
          flex: 1;
        }
      }
      .el-form-item__label {
        font-size: 16px;
        color: #797878;
      }
    }
  }
}
.echarts {
  width: 100%;
  height: calc((100vw - 430px) / 3);
}
</style>
