<template>
  <div class="pd20">
    <Grid :gap="200" :cols="2">
      <GridItem>
        <div class="search">
          <SearchForm :search="search" :reset="reset" :columns="searchColumns" :search-param="searchParam" :search-col="2" />
        </div>
        <div class="echarts">
          <ECharts :option="option" />
        </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 { getPointSymptomData } from "@/api/modules/stats-analysis";
import { useChart } from "../hooks/useChart";

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

// hooks
const { option, loadData } = useChart("病证名", getPointSymptomData);
const emit = defineEmits(["update:pointId"]);
const searchParam = ref({} as StatsAnalysis.ReqSearchParam);

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

// 重置
function reset() {
  searchParam.value = {} as StatsAnalysis.ReqSearchParam;
  emit("update:pointId", undefined);
  loadData(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>
