<template>
  <div class="pd20">
    <div class="search">
      <SearchForm :search="search" :reset="reset" :columns="searchColumns" :search-param="searchParam" :search-col="2" />
    </div>
    <Grid :gap="[200, 0]" :cols="2">
      <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>
      <GridItem>
        <div class="echarts">
          <ECharts :option="option4" />
        </div>
      </GridItem>
    </Grid>
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits } from "vue";
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 {
  getDiseasePointData,
  getDiseaseEtiologyData,
  getDiseaseTreatmentData,
  getDiseasePointCountData
} from "@/api/modules/stats-analysis";
import { useChart } from "../hooks/useChart";

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

// hooks
const { option: option1, loadData: loadData1 } = useChart("腧穴名", getDiseasePointData);
const { option: option2, loadData: loadData2 } = useChart("病因病机", getDiseaseEtiologyData);
const { option: option3, loadData: loadData3 } = useChart("治疗方法", getDiseaseTreatmentData);
const { option: option4, loadData: loadData4 } = useChart("穴位组成", getDiseasePointCountData);

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

const searchColumns: ColumnProps[] = [
  {
    label: "病证名",
    prop: "diseaseId",
    search: {
      el: "select",
      props: { filterable: true, placeholder: "请输入" }
    },
    fieldNames: { label: "keyword", value: "id" }
  }
];
// 搜索
function search() {
  emit("update:diseaseId", searchParam.value.diseaseId);
  loadData();
}

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

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

<style lang="scss" scoped>
.search {
  display: flex;
  justify-content: flex-start;
  .table-search.card {
    width: 100%;
    max-width: 600px;
    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 - 530px - 100px) / 2);
}
</style>
