<template>
  <view class="charts-box">
    <!-- :canvas2d="true"  tooltipFormat="showYLable" :onmovetip="true" -->
    <qiun-data-charts :type="chartType" :opts="opts" :chartData="chartData" :reshow="reshow" :tooltipShow="true" />
  </view>
</template>

<script setup>
import { ref, reactive, watch } from 'vue';

// 1. 定义 Props 接收父组件数据
const props = defineProps({
  // 传入的分类数据 (横坐标)
  chartType: {        // 新增
    type: String,
    default: 'line'
  },
  categories: {
    type: Array,
    default: () => [],
  },
  // 传入的系列数据 (纵坐标内容)
  series: {
    type: Array,
    default: () => [],
  },
  // 专门用于解决弹窗不显示问题的属性
  reshow: {
    type: Boolean,
    default: false,
  },
});

const chartData = ref({});

// 2. 图表配置项
const opts = reactive({
  dataLabel: false,
  color: [
    '#1890FF',
    '#91CB74',
    '#FAC858',
    '#EE6666',
    '#73C0DE',
    '#3CA272',
    '#FC8452',
    '#9A60B4',
    '#ea7ccc',
  ],
  padding: [15, 10, 0, 15],
  enableScroll: false,
  legend: {
    show: true,
    position: 'top'
  },
  xAxis: {
    disableGrid: true,
    // itemCount: 7,   // 一共显示7个标签：1、6、11、16、21、26、31
    labelCount: 7,
    // splitNumber: 6,
  },
  yAxis: {
    gridType: 'dash',
    axisLabel: { show: false },
    dashLength: 2,
  },
  extra: {
    line: {
      type: 'straight',
      width: 2,
      activeType: 'hollow',
    },
    // 新增下面这段
    column: {
      width: 30,        // 柱子宽度
      radius: [4, 4, 0, 0] // 柱子圆角
    },
    tooltip: {
      legendShow: true,

    }
  },
});

// 3. 核心逻辑：格式化数据
// const formatData = () => {
//   if (props.categories.length > 0) {
//     chartData.value = {
//       categories: props.categories,
//       series: props.series,
//     };
//   }
// };



const formatData = () => {
  const cat = props.categories || [];
  let ser = props.series || [];

  console.log('cat=', cat, 'ser=', ser);
  // 强制保证 series 每一项都有 data 数组
  ser = ser.map(item => ({
    ...item,
    data: item.data || []  // 最关键：没有data就给空数组
  }));

  if (cat.length > 0) {
    chartData.value = {
      categories: cat,
      series: ser
    };
  }
};


// 4. 监听 Props 变化，当父组件传入新数据时自动重绘
watch(
  () => [props.categories, props.series, props.chartType],
  () => {
    formatData();
  },
  { immediate: true, deep: true },
);
</script>

<style lang="scss" scoped>
.charts-box {
  width: 100%;
  height: 100%;
}
</style>