<template>
  <el-container v-loading="loading" class="th-echarts-line">
    <el-main>
      <v-chart
        class="th-echarts"
        :options="charOptions"
        autoresize
        v-on="$listeners"
      />
    </el-main>
  </el-container>
</template>

<script>
import VChart from 'vue-echarts'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/title'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'

export default {
  name: 'ThEchartsLine',
  components: { VChart },
  props: {
    // y轴坐标名称，双轴时使用数组
    yAxisName: {
      type: [String, Array],
      default: ''
    },
    // 多曲线名称
    names: {
      type: Array,
      default: () => ([])
    },
    // x轴刻度值
    lineX: {
      type: Array,
      default: () => ([])
    },
    // 曲线数据
    value: {
      type: Array,
      default: () => ([])
    },
    // 曲线颜色
    color: {
      type: Array,
      default: () => (['#42D5D0', '#FC75BC'])
    },
    // x轴刻度名称
    xAxisName: {
      type: String,
      default: ''
    },
    // 图例属性，可控制显示位置
    legendProp: {
      type: Object,
      default: () => ({})
    },
    // 画布属性，可控制四周边距
    gridProp: {
      type: Object,
      default: () => ({})
    },
    // 加载状态
    loading: {
      type: Boolean,
      default: false
    },
    // 合并自定义属性
    options: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      echartPrimaryColor: '#A0AABA'
    }
  },
  computed: {
    charOptions() {
      const series = []
      for (let i = 0, len = this.names.length; i < len; i++) {
        let colorIndex = i
        if (colorIndex > this.color.length - 1) {
          colorIndex = this.color.length - 1
        }
        const item = this.names[i]
        const data = {
          name: typeof item === 'string' ? item : item.name,
          type: 'line',
          color: this.color[colorIndex],
          smooth: true,
          symbol: 'circle',
          symbolSize: 8,
          itemStyle: {
            borderColor: '#fff',
            borderWidth: 2
          },
          data: this.value[i]
        }
        if (Array.isArray(this.yAxisName)) {
          data.yAxisIndex = i
        }
        series.push(data)
      }
      const yAxis = {
        name: this.yAxisName,
        type: 'value',
        splitNumber: 3,
        axisLabel: {
          formatter: '{value}%',
          textStyle: {
            color: this.echartPrimaryColor
          }
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(160,170,186,0.05)'
          }
        },
        axisLine: {
          lineStyle: {
            color: this.echartPrimaryColor
          }
        }
      }
      return {
        backgroundColor: '#fff',
        tooltip: {
          trigger: 'axis',
          appendToBody: true,
          formatter(params) {
            let res = `<span>${params[0].name}月</span>`
            params.forEach(p => {
              res += `<br/>${p.marker}${p.seriesName}: ${p.value}%`
            })
            return res
          }
        },
        legend: {
          data: this.names,
          textStyle: {
            fontSize: 12,
            color: this.echartPrimaryColor
          },
          left: 'auto',
          right: 'auto',
          icon: 'roundRect',
          itemHeight: 6,
          ...this.legendProp
        },
        grid: {
          top: '40',
          left: '20',
          right: '50',
          bottom: '20',
          containLabel: true,
          ...this.gridProp
        },
        xAxis: {
          type: 'category',
          name: this.xAxisName || '',
          boundaryGap: false,
          data: this.lineX,
          axisLabel: {
            textStyle: {
              color: this.echartPrimaryColor
            },
            formatter(params) {
              return params.split(' ')[0] + '月'
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: this.echartPrimaryColor
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(160,170,186,0.05)'
            }
          }
        },
        yAxis,
        series
      }
    }
  },
  methods: {}
}
</script>
<style lang="scss" scoped>
