<template>
  <scroll-view
    :scroll-x="true"
    class="echarts-box">
    <div class="echarts-scroll">
      <mpvue-echarts
      v-if="option"
      ref="echarts"
      :echarts="echarts"
      :onInit="initChart" />
    </div>
  </scroll-view>
</template>
<script>
import mpvueEcharts from 'mpvue-echarts'
import echarts from '../../../static/js/echarts.min'
export default {
  props: ['tableData'],
  components: {
    mpvueEcharts
  },
  watch: {
    tableData () {
      this.createdTable()
    }
  },
  data () {
    return {
      // 曲线
      echarts,
      option: null
    }
  },
  created () {
    this.createdTable()
  },
  methods: {
    // 生成报表
    async createdTable () {
      wx.showLoading({
        title: '生成图表中'
      })
      await this.initData()
      // 延时 避免宽高错乱
      setTimeout(() => {
        this.$refs.echarts.init()
        wx.hideLoading()
      }, 100)
    },

    // 图表数据 及 配置
    async initData () {
      let { unit, xDataList, lineDataList, ageListData } = this.tableData

      // 小于横坐标第 5 格的显示 线名称
      let sign = 0
      let LebelMaxNum = ageListData.min + ageListData.interval * 6
      xDataList.forEach((item, index) => {
        if (item <= LebelMaxNum) {
          sign = index === 0 ? index : index - 1
          return false
        }
      })

      let series = []
      let seriesTel = {
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 1,
        label: {
          show: true,
          color: '#000',
          formatter: function (item) {
            return item.dataIndex === sign ? item.seriesName : ''
          }
        },
        itemStyle: {
          normal: {
            lineStyle: {
              width: 1
            }
          }
        }
      }

      lineDataList.forEach(item => {
        series.push({
          ...seriesTel,
          name: item.key,
          data: item.value.map((val, key) => {
            return [xDataList[key], val]
          })
        })
      })

      let option = {
        grid: {
          containLabel: true,
          top: '40px',
          left: 0,
          right: '20px',
          bottom: '14px'
        },
        xAxis: {
          min: ageListData.min,
          max: ageListData.max,
          maxInterval: ageListData.interval,
          type: 'value',
          // 刻度
          axisTick: {
            show: false
          },
          // 标签
          axisLabel: {
            formatter: function (value, index) {
              if (index === 0) {
                return ''
              } else if (value === 0) {
                return '出生'
              } else if (value === 180) {
                return `半岁`
              } else if (value % 360 === 0) {
                return `${value / 360}岁`
              } else if (value % 180 === 0) {
                let temp = Math.floor(value / 360)
                return `${temp}岁半`
              }

              return `${(value / 30).toFixed(0)}个月`
            },
            color: function (value, index) {
              if (index === 1) {
                return '#000000'
              }
              return '#9C9C9C'
            },
            padding: [5, 0, 0, 0]
          },
          // 坐标轴
          axisLine: {
            lineStyle: {
              color: '#EAEAEA'
            }
          },
          // 分割线
          splitLine: {
            lineStyle: {
              color: '#EAEAEA'
            }
          }
        },
        yAxis: {
          type: 'value',
          name: unit,
          nameTextStyle: {
            padding: [0, 0, 10, 45],
            color: '#000'
          },
          scale: true,
          // 刻度
          axisTick: {
            show: false
          },
          // 标签
          axisLabel: {
            inside: true,
            color: '#9C9C9C',
            padding: [0, 0, 15, 5]
          },
          // 坐标轴
          axisLine: {
            show: false,
            onZero: false
          },
          // 分割线
          splitLine: {
            lineStyle: {
              color: '#EAEAEA'
            }
          }
        },
        series: series
      }

      if (lineDataList.every(item => { return item.value.length === 0 })) {
        option.yAxis.min = 40
        option.yAxis.max = 60
      }

      this.option = option
    },
    initChart (canvas, width, height) {
      let chart = echarts.init(canvas, null, {width, height})
      canvas.setChart(chart)
      chart.setOption(this.option)
      this.chart = chart
      return chart
    }
  }
}
</script>

<style scoped lang="less">
@import '~@/assets/less/common.less';
.echarts-box{
  margin-bottom: 10px;
  ::-webkit-scrollbar{
    width: 0;
    height: 0;
    color: transparent;
  }
  .echarts-scroll{
    width: 720px;
    height: 500px;
  }
}
</style>
