<script setup lang="ts">
import { ref, useTemplateRef, watch } from 'vue';
import { useSetPieChart } from '@/hooks/chart/usePieChart';
import {
  formatData,
  getTableData,
  setDimensionData
} from '@/views/Survey/views/Analysis/components/AnalysisInfo/hooks/pieSeries';

// series 信息
const tableData = ref([]);
const analysis = defineModel('analysis');
const series = ref([]);
const dimension = defineModel('dimension');

const index = ref(0);
// 饼图 dom 结构
// 当 keyword 变动的时候，标记脏数据
watch(
  () => analysis.value,
  async () => {
    tableData.value = {
      ...analysis.value,
      option: getTableData(analysis.value)
    };

    series.value = formatData(dimension.value ? tableData.value : analysis.value, index.value);
    const pieChart = useTemplateRef<HTMLSpanElement>('pieChart');
    useSetPieChart(pieChart, series, { title: false, legend: false });
  },
  { immediate: true }
);

const changeChart = (i: Number) => {
  index.value = i;
  series.value = formatData(tableData.value, index.value);
  // const pieChart = useTemplateRef<HTMLSpanElement>('pieChart');
  // useSetPieChart(pieChart, series, { title: false, legend: false });
};
</script>

<template>
  <section>
    <!-- <div v-if="dimension">
      <van-radio-group v-model="index" @change="changeChart">
        <van-radio v-for="(item, index) in tableData.option" :name="index">{{
          item.option
        }}</van-radio>
      </van-radio-group>
    </div> -->

    <!-- 图表部分 -->
    <div
      class="charts"
      style="
        display: flex;
        height: 300px;

        justify-content: center;
        margin: 16px 0;
      "
    >
      <span ref="pieChart" style="width: 100%; height: 300px"></span>
    </div>
  </section>
</template>

<style lang="scss" scoped>
.task-card {
  //margin: 16px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.charts {
  width: calc(100vw - 50px);
}
</style>
