<!-- 采购分析图标 -->
<template>
  <div>
    <div class="item">
      <div class="title" style="display: flex;justify-content: space-between">
        <span style="font-weight: bold">价格走势</span>
        <span style="color: red;">月单走势图</span>
      </div>
        <div ref="dom" style="width: 100%;height: 200px"></div>
    </div>
    <div class="item">
      <div class="title" style="display: flex;justify-content: space-between">
        <span style="font-weight: bold">订单分析</span>
        <span style="color: red;">每月订单较总订单柱状图</span>
      </div>
      <div ref="bar" style="width: 100%;height: 300px"></div>
    </div>
    <div class="item">
      <div class="title" style="display: flex;justify-content: space-between">
        <span style="font-weight: bold">订单物料分析</span>
      </div>
      <div ref="pie" style="width: 100%;height: 180px;"></div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
import { on, off } from '@/libs/tools'
import { FactoryStat } from '@/api/baseData'
export default {
  name: 'serviceRequests',
  data () {
    return {
      xData: [],
      bar: null,
      pie: null,
      dom: null,
      option: {
        grid: {
          top: '3%',
          left: '1.2%',
          right: '3%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: [],
            axisLabel: {
              textStyle: {
                fontSize: '6'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              textStyle: {
                fontSize: '6'
              }
            }
          }
        ],
        series: [
          {
            type: 'line',
            areaStyle: { normal: {
              color: 'transparent'
            } },
            lineStyle: {
              color: '#158cf8'
            },
            data: [],
            smooth: true,
            showSymbol: false// 是否默认展示圆点
          }
        ]
      },
      pieOption: {
        // title: {
        //   text: this.text,
        //   subtext: this.subtext,
        //   x: 'center'
        // },
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)'
        },
        // legend: {
        //   orient: 'vertical',
        //   left: 'left',
        //   data: legend
        // },
        series: [
          {
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              },
              normal: {
                label: {
                  show: true,
                  formatter: '{b} : {c} ({d}%)'
                },
                labelLine: { show: true }
              }
            }
          }
        ]
      },
      barOption: {
        tooltip: {
          trigger: 'axis'
        },
        color: ['#299CF5', '#FD541D'],
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '每月订单',
            data: [],
            type: 'bar',
            stack: 'total'
          },
          {
            name: '总订单相差',
            data: [],
            type: 'bar',
            stack: 'total',
            barWidth: 20
          }
        ]
      }
    }
  },
  props: {
    id: {
      type: String,
      default: ''
    },
    show: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    show (value) {
      if (value) {
        on(window, 'resize', this.resize)
      } else {
        off(window, 'resize', this.resize)
      }
    },
    id (id) {
      if (id) {
        this.init()
      }
    }
  },
  methods: {
    init () {
      if (this.id) {
        FactoryStat({ id: this.id }).then(res => {
          if (res.code === 0) {
            this.option.xAxis[0].data = res.result.monthList
            this.option.series[0].data = res.result.monthVal
            this.barOption.xAxis.data = res.result.monthList
            this.barOption.series[0].data = res.result.monthVal
            this.barOption.series[1].data = res.result.monthToalVal.map((item, index) => {
              return item - res.result.monthVal[index]
            })
            this.pieOption.series[0].data = res.result.pieData

            this.dom = echarts.init(this.$refs.dom)
            this.dom.setOption(this.option)
            this.bar = echarts.init(this.$refs.bar)
            this.bar.setOption(this.barOption)
            this.pie = echarts.init(this.$refs.pie)
            this.pie.setOption(this.pieOption)
          }
        })
      }
    },
    resize () {
      this.dom.resize()
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.init()
    })
  },
  beforeDestroy () {

  }
}
</script>
