<!-- 普通折线图 -->
<template>
  <div :id="id" class="charts-line" />
</template>

<script>
  import ChartBase from '@/components/Base/ChartsBase.js';
  import {
    ChartStyle
  } from '@/common/const.js';
  import {
    toFixedNum
  } from '@/common/util.js';
  import echarts from 'echarts';

  export default {
    mixins: [ChartBase],
    methods: {
      setOptions(chartData) {
        if (!this.chart || !chartData) return;
        let option;
        // 共轴
        if (chartData.sameAxis) {
          option = {
            tooltip: {
              trigger: 'axis',
              formatter: params => {
                let newParams = [...params];
                let tooltip = (chartData.xName || '') + params[0].axisValue + '<br/>';
                newParams.sort((a, b) => a.seriesIndex - b.seriesIndex);
                newParams.forEach(p => {
                  const cont = p.seriesName + ': ' + toFixedNum(p.value,4) + (chartData.dataList[p.seriesIndex].unit || '') + '<br/>';
                  tooltip += cont;
                });
                return tooltip;
              },
              textStyle: {
                align: 'left'
              }
            },
            axisPointer: {
              lineStyle: {
                type: 'dashed'
              }
            },
            dataZoom: {
              type: 'inside'
            },
            legend: {
              bottom: '4%',
              textStyle: {
                color: ChartStyle.legend.color,
                fontSize: ChartStyle.legend.fontSize,
              },
              // itemGap: 30,
              icon: 'pin',
              formatter: function (name) {
                return name + '     ';
              }
            },
            color: ChartStyle.color,
            xAxis: {
              data: chartData.xAxis ?? chartData.xaxis,
              axisLine: {
                lineStyle: {
                  color: ChartStyle.title.color,
                }
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                fontSize: ChartStyle.axis.fontSize,
                formatter: val => {
                  let arr = val.split(' ');
                  return arr[0] + (arr[1] ? '\n' + arr[1] : '');
                }
              },
            },
            yAxis: {
              nameTextStyle: {
                color: ChartStyle.title.color
              },
              scale: true,
              splitNumber: 3,
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                color: ChartStyle.title.color,
                fontSize: ChartStyle.axis.fontSize
              },
              splitLine: {
                lineStyle: {
                  type: 'dashed',
                  color: ChartStyle.split.color,
                  opacity: ChartStyle.split.opacity,
                }
              }
            },
            series: [],
            grid: {
              top: '5%',
              left: '2%',
              right: '2%',
              bottom: '17%',
              containLabel: true
            }
          };
          for (let i = 0, len = chartData.dataList.length; i < len; i++) {
            let item = chartData.dataList[i];
            option.series.push({
              type: 'line',
              name: item.name,
              data: item.value,
              showSymbol: false,
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 1,
                    color: ChartStyle.color[i]
                  },
                  {
                    offset: 0,
                    color: ChartStyle.color2[i]
                  },
                ])
              }
            });
          }
        // 不共轴
        } else {
          // 垂直方式
          // option = {
          //   tooltip: {
          //     trigger: 'axis',
          //     formatter: params => {
          //       let newParams = [...params];
          //       let tooltip = (chartData.xName || '') + params[0].axisValue + '<br/>';
          //       newParams.sort((a, b) => a.seriesIndex - b.seriesIndex);
          //       newParams.forEach(p => {
          //         const cont = p.seriesName + ': ' + toFixedNum(p.value,4) + (chartData.dataList[p.seriesIndex].unit || '') + '<br/>';
          //         tooltip += cont;
          //       });
          //       return tooltip;
          //     },
          //     textStyle: {
          //       align: 'left'
          //     }
          //   },
          //   axisPointer: {
          //     lineStyle: {
          //       type: 'dashed'
          //     },
          //     link: {
          //       xAxisIndex: []
          //     }
          //   },
          //   dataZoom: {
          //     type: 'inside',
          //     xAxisIndex: []
          //   },
          //   legend: [],
          //   color: ChartStyle.color,
          //   xAxis: [],
          //   yAxis: [],
          //   series: [],
          //   grid: [],
          // };
          // for (let i = 0, len = chartData.dataList.length; i < len; i++) {
          //   let item = chartData.dataList[i];
          //   option.axisPointer.link.xAxisIndex.push(i);
          //   option.dataZoom.xAxisIndex.push(i);
          //   option.legend.push({
          //   	data: [item.name],
          //   	top: (100 / len) * i + 10 + '%',
          //   	right: '10',
          //     textStyle: {
          //       color: ChartStyle.legend.color,
          //       fontSize: ChartStyle.legend.fontSize,
          //     },
          //     itemGap: 40,
          //   	icon: 'pin',
          //   	formatter: function (name) {
          //   		let len = name.length
          //   		if(len < 15){
          //   			for (let i = 0; i < (15 - len); i++) {
          //   				name += '   ';
          //   			}
          //   		}
          //   	    return name;
          //   	}
          //   });
          //   option.xAxis.push({
          //     data: chartData.xAxis ?? chartData.xaxis,
          //     axisLine: {
          //       lineStyle: {
          //         color: ChartStyle.title.color,
          //       }
          //     },
          //     axisTick: {
          //       show: false
          //     },
          //     axisLabel: {
          //       fontSize: ChartStyle.axis.fontSize,
          //       formatter: val => {
          //         let arr = val.split(' ');
          //         return arr[0] + (arr[1] ? '\n' + arr[1] : '');
          //       }
          //     },
          //     gridIndex: i
          //   });
          //   option.yAxis.push({
          //     name: item.unit || '',
          //     nameTextStyle: {
          //       color: ChartStyle.title.color
          //     },
          //     scale: true,
          //     splitNumber: 1,
          //     axisLine: {
          //       show: false,
          //     },
          //     axisTick: {
          //       show: false
          //     },
          //     axisLabel: {
          //       color: ChartStyle.title.color,
          //       fontSize: ChartStyle.axis.fontSize
          //     },
          //     splitLine: {
          //       lineStyle: {
          //         type: 'dashed',
          //         color: ChartStyle.split.color,
          //         opacity: ChartStyle.split.opacity,
          //       }
          //     },
          //     gridIndex: i
          //   });
          //   option.series.push({
          //     type: 'line',
          //     name: item.name,
          //     data: item.value,
          //     showSymbol: false,
          //     itemStyle: {
          //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          //           offset: 1,
          //           color: ChartStyle.color[i]
          //         },
          //         {
          //           offset: 0,
          //           color: ChartStyle.color2[i]
          //         },
          //       ])
          //     },
          //     xAxisIndex: i,
          //     yAxisIndex: i,
          //   });
          //   option.grid.push({
          //     top: (100 / len) * i + 7 + '%',
          //     left: '2%',
          //     right: '230',
          //     bottom: (100 / len) * (len - i - 1) + 2 + '%',
          //     containLabel: true
          //   });
          // }
          // 宫格方式
          let row = 3;
          let col = 4;
          option = {
            tooltip: {
              trigger: 'axis',
              formatter: params => {
                let newParams = [...params];
                let tooltip = (chartData.xName || '') + params[0].axisValue + '<br/>';
                newParams.sort((a, b) => a.seriesIndex - b.seriesIndex);
                newParams.forEach(p => {
                  const cont = p.seriesName + ': ' + toFixedNum(p.value,4) + (chartData.dataList[p.seriesIndex].unit || '') + '<br/>';
                  tooltip += cont;
                });
                return tooltip;
              },
              textStyle: {
                align: 'left'
              }
            },
            axisPointer: {
              lineStyle: {
                type: 'dashed'
              },
              link: {
                xAxisIndex: []
              }
            },
            dataZoom: {
              type: 'inside',
              xAxisIndex: []
            },
            legend: {
              bottom: '4%',
              textStyle: {
                color: ChartStyle.legend.color,
                fontSize: ChartStyle.legend.fontSize,
              },
              icon: 'pin',
              formatter: function (name) {
                return name + '     ';
              }
            },
            color: ChartStyle.color,
            xAxis: [],
            yAxis: [],
            series: [],
            grid: [],
          };
          for (let i = 0, len = chartData.dataList.length; i < len; i++) {
            let item = chartData.dataList[i];
            option.axisPointer.link.xAxisIndex.push(i);
            option.dataZoom.xAxisIndex.push(i);
            option.xAxis.push({
              data: chartData.xAxis ?? chartData.xaxis,
              axisLine: {
                lineStyle: {
                  color: ChartStyle.title.color,
                }
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                fontSize: ChartStyle.axis.fontSize,
                formatter: val => {
                  let arr = val.split(' ');
                  return arr[0] + (arr[1] ? '\n' + arr[1] : '');
                }
              },
              gridIndex: i
            });
            option.yAxis.push({
              name: item.unit || '',
              nameTextStyle: {
                color: ChartStyle.title.color
              },
              scale: true,
              splitNumber: 1,
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                color: ChartStyle.title.color,
                fontSize: ChartStyle.axis.fontSize
              },
              splitLine: {
                lineStyle: {
                  type: 'dashed',
                  color: ChartStyle.split.color,
                  opacity: ChartStyle.split.opacity,
                }
              },
              gridIndex: i
            });
            option.series.push({
              type: 'line',
              name: item.name,
              data: item.value,
              showSymbol: false,
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 1,
                    color: ChartStyle.color[i]
                  },
                  {
                    offset: 0,
                    color: ChartStyle.color2[i]
                  },
                ])
              },
              xAxisIndex: i,
              yAxisIndex: i,
            });
            let irow = parseInt(i / 4); // 当前数据项所属行
            let icol = i % 4; // 当前数据项所属列
            option.grid.push({
              top: (55 / row) * irow + 7 + (irow * 10) + '%',
              left: (100 / col) * icol + 2 + '%',
              // right: (100 / col) * (col - icol - 1) + 2 + '%',
              // bottom: (110 / row) * (row - irow - 1) + 5 + '%',
              width: (90 / col) + '%',
              height: (55 / row) + '%' ,
              containLabel: true,
              show: true,
              backgroundColor: 'rgba(0, 0, 0, 0.1)',
              borderWidth: 0,
            });
          }
        }
        this.chart.setOption(option);
      }
    }
  };
</script>

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