<template>
  <view class="charts-box">
    <qiun-data-charts
      type="line"
      :opts="opts"
      :chartData="chartData"
      :reshow="reshow"
      :canvas2d="true"
    />
  </view>
</template>

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

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

  const chartData = ref({});

  // 2. 图表配置项
  const opts = reactive({
    color: [
      '#1890FF',
      '#91CB74',
      '#FAC858',
      '#EE6666',
      '#73C0DE',
      '#3CA272',
      '#FC8452',
      '#9A60B4',
      '#ea7ccc',
    ],
    padding: [15, 10, 0, 15],
    enableScroll: false,
    legend: {},
    xAxis: {
      disableGrid: true,
    },
    yAxis: {
      gridType: 'dash',
      dashLength: 2,
    },
    extra: {
      line: {
        type: 'straight',
        width: 2,
        activeType: 'hollow',
      },
    },
  });

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

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

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