<template>
  <div>
    <div id="echarts" />
    <div v-show="showList">
      <List
        id="charts-list"
        :list="chartsData"
      ></List>
    </div>
  </div>
</template>

<script>
import List from './List'
export default {
  props: ['chartsData', 'groupType'],
  components: { List },
  created () {
  },
  mounted () {
  },
  computed: {
    groupTypeLabel () {
      switch (this.groupType) {
        case 'yyyy':
          return '年份'
        case 'yyyy-mm':
          return '月份'
        case 'yyyy-mm-dd':
          return '日期'
      }
    }
  },
  watch: {
    chartsData () {
      this.draw()
    }
  },

  data () {
    return {
      showList: false,
      dataView: {}, // 缓存dom节点防止数据视图切换时removeChild导致节点丢失, 再次访问数据时报错
    }
  },
  methods: {
    draw () {
      const categories = ['体积', '数量', '毛重', '金额', '托盘', '箱']
      const selected = {}
      categories.map(item => {
        selected[item] = false
      })
      const options = {
        // 标题
        title: {
          text: '出库量趋势报表',
          // subtext: $.phx.i18n.prop('ReportInTrendList_html_label_2')
          padding: [5, 5, 30, 5],
        },
        tooltip: {
          trigger: 'axis'// item axis
        },
        // 图例，不同数据的线条
        legend: {
          data: categories,
          selected: { ...selected, '数量': true },
        },
        dataZoom: {
          // x轴下的区间用鼠标拖动来改变图中的数据段
          zoomLock: false
        },
        // 工具箱
        toolbox: {
          right: 30,
          feature: {
            mark: {
              show: true
            },
            dataView: {
              show: true,
              readOnly: true,
              optionToContent: (opt) => {
                this.showList = true
                this.dataView = document.querySelector('#charts-list') || this.dataView // 缓存dom节点
                return this.dataView
              },
            },
            magicType: {
              show: true,
              type: ['line', 'bar']
            },
            saveAsImage: {
              show: true,
            },
          },
          calculable: true, // ??最新echarts弃用
        },
        // x轴
        xAxis: [{
          // x轴名称，根据选择的统计方式来改变
          name: this.groupTypeLabel,
          type: 'category',
          boundaryGap: false,
          scale: true,
          data: this.chartsData.map(item => item.groupType)
        }],
        // y轴
        yAxis: [{
          type: 'value',
          axisLabel: {
            formatter: '{value} ' // echarts字符串模版
          },
          scale: true,
          splitNumber: 5
        }],
        // 数据集合
        series: [{
          name: '体积',
          type: 'line',
          data: this.chartsData.map(item => item.cubic),
          smooth: true,
          markPoint: {
            data: [{
              type: 'max',
              name: '最大值'
            }, {
              type: 'min',
              name: '最小值'
            }]
          },
          markLine: {
            data: [{
              type: 'average',
              name: '平均值'
            }]
          }
        }, {
          name: '数量',
          type: 'line',
          data: this.chartsData.map(item => item.quantity),
          smooth: true,
          markPoint: {
            data: [{
              type: 'max',
              name: '最大值',
            }, {
              type: 'min',
              name: '最小值',
            }]
          },
          markLine: {
            data: [{
              type: 'average',
              name: '平均值'
            }]
          }
        }, {
          name: '毛重',
          type: 'line',
          data: this.chartsData.map(item => item.weigth),
          smooth: true,
          markPoint: {
            data: [{
              type: 'max',
              name: '最大值'
            }, {
              type: 'min',
              name: '最小值'
            }]
          },
          markLine: {
            data: [{
              type: 'average',
              name: '平均值'
            }]
          }
        }, {
          name: '金额',
          type: 'line',
          data: this.chartsData.map(item => item.price),
          smooth: true,
          markPoint: {
            data: [{
              type: 'max',
              name: '最大值'
            }, {
              type: 'min',
              name: '最小值'
            }]
          },
          markLine: {
            data: [{
              type: 'average',
              name: '平均值'
            }]
          }
        }, {
          name: '托盘',
          type: 'line',
          smooth: true,
          data: this.chartsData.map(item => item.plQuantity),
          markPoint: {
            data: [{
              type: 'max',
              name: '最大值'
            }, {
              type: 'min',
              name: '最小值'
            }]
          },
          markLine: {
            data: [{
              type: 'average',
              name: '平均值'
            }]
          }
        }, {
          name: '箱',
          type: 'line',
          data: this.chartsData.map(item => item.boxQuantity),
          smooth: true,
          markPoint: {
            data: [{
              type: 'max',
              name: '最大值'
            }, {
              type: 'min',
              name: '最小值'
            }]
          },
          markLine: {
            data: [{
              type: 'average',
              name: '平均值'
            }]
          }
        }]
      }
      const chart = this.$echarts.init(document.querySelector('#echarts'))
      chart.setOption(options)
    }
  },
}
</script>

<style lang="scss" scoped>
#echarts {
  width: 100%;
  height: 600px;
}
</style>
