<template>
  <div style="width: 100%; height: 100%" id="lineEchartDom"></div>
</template>

<script setup lang='ts'>
import * as echarts from "echarts";
import { onMounted, defineProps } from "vue";
const propsVal = defineProps({
  title: {
    type: String,
    default: '折线图'
  },
  legendDataList: {//图例组件的数据
    type: Array,
    default: []
  },
  legendProps: {//图例组件的基本配置
    type: Object,
    default: {
      right: 30,
      top: 30,
      itemHeight: 10,
      itemGap: 10,
      icon: "circle",//可选 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
      textStyle: {//文字颜色
        color: "#333333"
      }
    }
  },
  grid: {//网格的配置
    type: Object,
    default: {
      top: "15%",//组件距离容器 上侧 的距离
      left: "3%",//组件距离容器 左侧 的距离
      right: "4%",//组件距离容器 右侧 的距离
      bottom: "3%",//组件距离容器 下侧 的距离
      containLabel: true,//组件距离容器 上侧 的距离
    }
  },
  FeatureList: {//工具配置项显示 
    type: Array,
    default: []//['saveAsImage','restore','dataView',"dataZoom",'magicType','brush']
  },
  xAxisData: {//x 坐标轴数据 
    type: Array,
    default: []
    //'value' 数值轴，适用于连续数据
    // 'category'
    // time 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度
    // 'log' 对数轴。适用于对数数据。
  },
  xAxisProps: {//x 坐标轴配置
    type: Object,
    defualt: {
      type: "category",
      boundaryGap: false,
    }
  },
  yAxisProps: {//y 坐标轴配置
    type: Object,
    default: {
      type: "value"
    }
  },
  seriesMultipleFlag: {//是否开启多组数据
    type: Boolean,
    defult: false
  },
  seriseSingleName: {//单组 的名称
    type: Array,
    default: ""
  },
  seriseSingleData: {//单组的 数据
    type: Array,
    default: []
  },
  seriseMultipleName: {//多组的名称
    type: Array,
    default: []
  },
  seriseMultipleData: {//多组的数据
    type: Array,
    default: []
  },
  color: {
    type: Array,
    default: [
      '#80FFA5',
      '#00DDFF',
      '#37A2FF',
      '#FF0087',
      '#FFBF00'
    ]
  },
  formatCallBack: {
    type: Function,
    default: () => { }
  }
})
let myChart: any = null

onMounted(() => {
  const lineEchartDomEl = document.getElementById("lineEchartDom");
  myChart = echarts.init(lineEchartDomEl);
  console.log("mychart", myChart)
  myChart.setOption(option);

})
const handleSeriesData = () => {
  const seriesData: any = []
  if (!propsVal.seriesMultipleFlag) {
    seriesData.push({
      type: 'line',
      stack: 'Total',
      name: propsVal.seriseSingleName,
      data: propsVal.seriseSingleData
    })
  } else {
    propsVal.seriseMultipleName.forEach((ele, index) => {
      const item = {
        type: 'line',
        stack: 'Total',
        name: ele,
        data: propsVal.seriseMultipleData[index]
      }
      seriesData.push(item)
    })
  }
  console.log("seriesData: ", seriesData)
  return seriesData
}
const option = {
  title: {
    text: propsVal.title,
  },
  tooltip: {
    trigger: "axis",
  },
  legend: {
    data: propsVal.legendDataList,
    ...propsVal.legendProps
  },
  grid: propsVal.grid,
  toolbox: {
    feature: {
      saveAsImage: propsVal.FeatureList.includes("saveAsImage") ? {} : null,
      restore: propsVal.FeatureList.includes("restore") ? {} : null,
      dataView: propsVal.FeatureList.includes("dataView") ? {} : null,
      magicType: propsVal.FeatureList.includes("magicType") ? {} : null,
      brush: propsVal.FeatureList.includes("brush") ? {} : null
    },
  },
  xAxis: {
    data: propsVal.xAxisData,
    ...propsVal.xAxisProps
  },
  yAxis: {
    type: "value",

  },
  series: handleSeriesData(),
  color: propsVal.color,
  formatter: function (params: any) {
    console.log("parmas", params)
    return propsVal.formatCallBack(params)
  }
};
</script>

<style></style>