<template>
  <view
    :id="htmlId"
    ref="echartsRef"
    :style="{ width: '100%', height: `${yData[0]?.data?.length * 60}rpx` }"
    @click="viewClick"
  ></view>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import {computed, markRaw, onMounted, ref} from 'vue';

const props = defineProps({
  htmlId: String,
  yData: {
    type: Array,
    default: () => [],
  },
  xData: {
    type: Array,
    default: () => [],
  },
});

let myChart = ref();

const colors = [
  '#FBCA85',
  '#F5EB82',
  '#FB8F85',
  '#82F58B',
  '#85FBDE',
  '#85DEFB',
  '#9FA7FB',
  '#D59FFB',
  '#FB9FD5',
];

const viewClick = (e: MouseEvent) => {
  // myChart.value.dispatchAction({
  //   type: 'showTip',
  //   seriesIndex:0,
  //   dataIndex: 0,
  // });
};

const seriesData = computed(() => {
  return props.yData.map((item, index) => {
    return {
      data: item.data.map((value, i) => {
        return {
          value,
          itemStyle: {
            color: colors[i],
          },
        };
      }),
      type: 'line',
      smooth: true,
      name: item.name,
    };
  });
});

const legendData = computed(() => {
  return props.yData.map(item => item.name);
});

const initEcharts = async () => {
  myChart.value = echarts.init(document.getElementById(props.htmlId),undefined,{
    renderer:'svg'
  });
  const option = {
    tooltip: {
      // trigger: 'axis',
      triggerOn: 'click',
      padding: 10,
      backgroundColor: '#ccc',
      borderColor: '#aaa',
      borderWidth: 1
    },
    legend: {
      data: legendData.value,
    },
    grid: {
      left: '40px',
      right: '20px',
      top: '40',
      bottom: '20',
    },

    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: props.xData,
    },
    yAxis: {
      type: 'value',
    },
    series: seriesData.value,
  };
  myChart.value && myChart.value.setOption(option);
};
onMounted(() => {
  initEcharts();
});
</script>

<style scoped lang="scss"></style>
