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

<script>
import graphic from 'echarts/lib/util/graphic'
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'
import { colorRgba } from '../../../src/utils/util'

export default {
  name: 'ThEchartsLineArea',
  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: () => ([])
    },
    // x轴刻度名称
    xAxisName: {
      type: String,
      default: ''
    },
    // 图例属性，可控制显示位置
    legendProp: {
      type: Object,
      default: () => ({})
    },
    // 画布属性，可控制四周边距
    gridProp: {
      type: Object,
      default: () => ({})
    },
    // 加载状态
    loading: {
      type: Boolean,
      default: false
    }
  },
  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 data = {
          name: this.names[i],
          type: 'line',
          color: this.color[colorIndex],
          smooth: true,
          areaStyle: {
            normal: {
              color: new graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: colorRgba(this.color[colorIndex], 0.3)
              }, {
                offset: 0.8,
                color: colorRgba(this.color[colorIndex], 0)
              }], false),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 10
            }
          },
          symbol: 'circle',
          symbolSize: 4,
          data: this.value[i]
        }
        if (Array.isArray(this.yAxisName)) {
          data.yAxisIndex = i
        }
        series.push(data)
      }
      let yAxis = null
      if (Array.isArray(this.yAxisName)) {
        yAxis = this.yAxisName.map(d => ({
          name: d,
          type: 'value',
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: this.echartPrimaryColor
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(160,170,186,0.05)'
            }
          },
          axisLine: {
            lineStyle: {
              color: this.echartPrimaryColor
            }
          }
        }))
      } else {
        yAxis = {
          name: this.yAxisName,
          type: 'value',
          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) {
            const m = new Date().getMonth() + 1
            let res = `<span style="text-align: center;width: 100%;display:inline-block;">当日: ${m}月${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: function(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>
