<script setup lang="ts">
defineOptions({
  name: "full-big"
});
import { ref, reactive, onMounted, nextTick } from "vue";
import { getPersonDimensionChartsList } from "@/api/draw";
import { useRouter, useRoute } from "vue-router";
import barDimEcharts from "@/components/echarts/barDim.vue";
import rankTable from "@/components/rankTable/index.vue";
import personList from "@/components/personList/index.vue";
import qvanping from "@/assets/rank/qvanping@2x.png";
const router = useRouter();
const route = useRoute();
const params = ref({});
const title = ref();
onMounted(() => {
  nextTick(() => {
    title.value = route.query.name;
    Object.assign(params.value, route.query);
    console.log("route.query", route.query);
    // barDimEchartsRef.value.init(params.value);
    setTimeout(() => {
      init();
    }, 500);
  });
});

// 柱状图
const barDimEchartsRef = ref();
// 维度表格
const personListRef = ref();
const fullSmall = () => {
  router.back();
};
const dataList = item => {
  console.log(item);
};
const init = async () => {
  const { data, code } = await getPersonDimensionChartsList({
    ...params.value
  });
  if (code == 200) {
    console.log("data", data);
    personListRef.value.init(data, params.value.id);
  }
};
defineExpose({
  dataList
});
</script>

<template>
  <div class="w-full">
    <div class="flex justify-between">
      <personList ref="personListRef" class="w-11/12" />
      <div class="w-[30px] h-[30px] mr-10 cursor-pointer" @click="fullSmall">
        <img class="w-full h-full" :src="qvanping" alt="" />
      </div>
    </div>
    <div class="w-[1260px] h-[380px] mt-5">
      <barDimEcharts
        ref="barDimEchartsRef"
        :title="title"
        :barDimEchartsList="params"
        :bigFull="2"
      />
    </div>
  </div>
</template>
