<template>
  <div class="echarts">
    <template v-for="item in opt">
      <div :key="item.key" class="chart" :id="'stock-out-' + item.key"></div>
      <List
        :key="item.key + 'list'"
        v-show="item.showList || false"
        :id="item.key + '-stock-out-list'"
        :list="item.list || []"
        :text="item.text"
      />
    </template>
  </div>
</template>

<script>
import List from './List'
export default {
  props: ['chartsData'],
  components: { List },
  created () {
  },
  mounted () {
  },
  watch: {
    chartsData () {
      this.draw()
    }
  },

  data () {
    return {
      opt: [{
        key: 'day',
        text: '本日',
      }, {
        key: 'week',
        text: '本周',
      }, {
        key: 'month',
        text: '本月'
      }]
    }
  },
  methods: {
    draw () {
      const tooltip = {
        // 饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
        formatter: '{a} <br/>{b}: {c} ({d}%)'
      }
      const toolbox = {
        // 以上在文档中并没有
        showTitle: true,
        right: 30, // 距离右侧位置
        feature: {
          mark: {
            show: true
          },
          dataView: {
            readOnly: true,
            optionToContent: (opt) => {
              let dom = null
              const index = opt.index
              // 改变相应渲染 opt 中的属性
              this.opt[index].showList = true
              this.$set(this.opt[index], 'list', opt.series[0].data)
              dom = this.opt[index].dom = document.querySelector(`#${this.opt[index].key}-stock-out-list`) || this.opt[index].dom // 缓存dom节点防止数据视图切换时removeChild导致节点丢失, 再次访问数据时报错
              return dom
            }
          },
          // 保存为图片
          saveAsImage: {
            show: true,
          }
        }
      }
      const seriesData = [{
        value: 'SoCreateNum',
        name: '创建状态订单数'
      }, {
        value: 'PartAllocNum',
        name: '部分分配数'
      }, {
        value: 'AllocNum',
        name: '完全分配数'
      }, {
        value: 'SoPartPickNum',
        name: '部分拣货数'
      }, {
        value: 'SoPickNum',
        name: '完全拣货数'
      }, {
        value: 'PartShipNum',
        name: '部分发货数'
      }, {
        value: 'FullShipNum',
        name: '完全发货数'
      }, {
        value: 'AsnCloseNum',
        name: '关闭订单数'
      }, {
        value: 'AsnCancelNum',
        name: '取消订单数'
      }]
      const legend = {
        bottom: 20,
        data: seriesData.map(item => item.name),
        selected: {
          '关闭订单数': false,
          '取消订单数': false,
        },
      }
      /**
       * 饼图报表属性
       * @type {Object}
       */
      this.opt.map((item, index) => {
        const options = {
          index, // 非echarts选项, 保留元数据下标, 便于后面数据视图操作
          title: {
            // 模版字符串tab会算空间, 所以要顶格写
            text: `${item.text}

出库单数: ${this.chartsData[item.key + 'SoNum']}  出库单明细数: ${this.chartsData[item.key + 'SoDetailNum']}
          `,
            x: 'center',
          },
          tooltip,
          toolbox,
          legend,
          series: [{
            name: item.text,
            type: 'pie',
            radius: [ 0, '45%' ],
            data: seriesData.map(data => ({
              value: this.chartsData[item.key + data.value] || null,
              name: data.name,
            })),
          }]
        }
        // 本日
        const chart = this.$echarts.init(document.querySelector(`#stock-out-${item.key}`))
        chart.setOption(options)
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.echarts {
  .chart {
    display: inline-block;
    width: 33%;
    height: 520px;
  }
}
</style>
