<template>
  <v-chart class="chart" autoresize :option="chartLineOption"/>
</template>

<script>
let watchChartWc = null
import {getFontSize} from "@/common/js/utils.js";
import {mapState} from "vuex";

export default {
  data() {
    return {
      xData: [],
      dateModel: "all",
    };
  },
  mounted() {
  },
  computed: {
    chartLineOption(){
      let [cur, com] = [[],[]]
      if(this.data1?.length){
        cur =  this.data1
      }
      if(this.data2?.length){
        com =  this.data2
      }
      const xData = cur.map((item) => item.metricTime);
      const xData1 = com.map((item) => item.metricTime);
      let ifTwoXAxis = [2, 3].includes(this.compareTimeType)
      const seriesData = cur.map((item) => item.value);
      const seriesData1 = com.map((item) => item.value);
      let series = []
      series.push({
        name: '当前时段',
        type: 'line',
        smooth: true,
        symbol:'none',
        data: seriesData,
        xAxisIndex: 0,
        itemStyle:{
          color:'#178fff',
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(
              0,
              1,
              0,
              0,
              [
                {
                  offset: 0,
                  color: "rgba(62, 170, 247, 0)", // 100% 处的颜色
                },
                {
                  offset: 1,
                  color: 'rgba(23, 143, 255,0.7)' , // 0% 处的颜色
                },
              ],
              false
          ),
        },
      }, {
        smooth: true,
        symbol:'none',
        itemStyle:{
          color:'#ff8101',
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(
              0,
              1,
              0,
              0,
              [
                {
                  offset: 0,
                  color: "rgba(62, 170, 247, 0)", // 100% 处的颜色
                },
                {
                  offset: 1,
                  color: 'rgba(255, 129, 1,0.7)' , // 0% 处的颜色
                },
              ],
              false
          ),
        },
        name: '对比时段',
        type: 'line',
        data: seriesData1,
        xAxisIndex: ifTwoXAxis ? 1 : 0
      })
      let xAxis = ifTwoXAxis ? [
        {
          type: 'category',
          boundaryGap: true,
          data: xData,
        },
        {
          type: 'category',
          boundaryGap: true,
          data: xData1,
        }
      ] : {
        type: 'category',
        boundaryGap: true,
        data: xData,
      }
      return {
        legend:{
          inactiveColor:'rgba(255,255,255,0.7)',
          show: true,
          itemWidth: 10,
          icon:'circle',
          textStyle: {
            color: 'rgba(255,255,255,0.9)',
          }
        },
        backgroundColor: "transparent",
        tooltip: {
          trigger: "axis",
          backgroundColor: 'rgba(0,0,0,0.8)',
          borderWidth: 0,
          textStyle: {
            fontSize: getFontSize(12),
            color: 'white',
          },
          confine:true
        },
        grid: {
          right: 15,
          bottom: 0,
          left: 0,
          top: 30,
          containLabel: true,
        },
        xAxis: xAxis,
        yAxis: [
          {
            name: "",
            nameTextStyle: {
              color: "rgba(255,255,255,0.8)",
            },
            type: "value",
            axisLabel: {
              // fontSize: getFontSize(16),
              color: "rgba(255,255,255,0.4)",
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },

            splitLine: {
              lineStyle: {
                color: "rgba(153, 153, 153, 0.6)",
                type: "dashed",
              },
            },
            axisPointer: {
              snap: true,
            },
          },
        ],
        series: series,
      }
    }
  },
  props: ["data1", 'data2', "indexModelMiddle", 'compareTimeType'],
  methods: {
  },
  beforeDestroy() {
  }
};
</script>

<style scoped lang="less">
#one-line-chart {
  width: 100%;
  height: 200px;
  margin-top: 10px;
}
</style>
