<template>
  <div :class="className" :style="{height:height,width:width}"/>
</template>

<script>
// import echarts from 'echarts'
import * as echarts from 'echarts'
import resize from './mixins/resize'
import {parseTime} from '@/utils'

require('echarts/theme/macarons') // echarts theme

const animationDuration = 6000

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '450px'
    },
    chartData: {
      type: Object,
      required: true
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {

        this.setOptions(val)
        // setTimeout(() => {
        //   this.setOptions(val)
        // }, 500)
      }
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
    // setTimeout(() => {
    //   this.initChart()
    // }, 500)
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      const _that = this
      this.chart = echarts.init(this.$el, 'vintage')
      // this.setOptions(this.chartData)

      this.chart.on('click', function (params) {
        if (params.componentType === 'series' && params.componentSubType === 'bar') {
          _that.$emit('getMachineTask', params.dataIndex)
        }
      })
    },
    setOptions(data) {
      const _that = this
      this.chart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: function (params, ticket, callback) {
            const value = params[0].value[1]
            const time = new Date(value)
            return params[0].name + ' ' + parseTime(time, '{m}-{d} {h}:{i}')
          }
        },
        grid: {
          left: '2%',
          right: '2%',
          bottom: '12%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          axisTick: {
            alignWithLabel: true
          }
        }],
        yAxis: [{
          type: 'time',
          min: 'dataMin',
          max: data.yMaxValue,
          axisTick: {
            show: false
          }
        }],
        dataZoom: [
          {
            type: 'inside'
          },
          {
            type: 'slider'
          }
        ],
        series: [{
          name: '机台负荷',
          type: 'bar',
          barWidth: '60%',
          data: data.dataResult,
          markLine: {
            lineStyle: {
              width: 2,
              type: 'solid',
              color: 'rgba(255, 100, 100, 60)'
            },
            data: [
              {
                name: '首次交货',
                yAxis: data.line1Time,
                label: {
                  formatter: '17:00'
                }
              },
              {
                name: '二次交货',
                yAxis: data.line2Time,
                label: {
                  formatter: '8:00'
                }
              }
            ]
          },
          animationDuration
        }],
        toolbox: {
          itemSize: 20,
          feature: {
            myRefresh: {
              show: true,
              title: '刷新',
              icon: 'path://M140.209231 537.206154l117.76-98.067692-46.867693-17.329231 14.178462 4.332307C262.301538 302.867692 376.910769 212.676923 512 212.676923s249.698462 90.190769 286.72 213.464615l90.584615-27.175384C840.861538 236.307692 690.018462 118.153846 512 118.153846c-176.443077 0-325.710769 116.184615-375.729231 276.086154L114.215385 385.969231l25.993846 151.236923zM912.935385 643.150769l-24.812308-153.993846-118.941539 100.824615 29.144616 10.633847c-37.809231 121.698462-151.630769 210.707692-285.932308 210.707692-135.089231 0-249.698462-90.190769-286.72-213.464615l-90.584615 27.175384C183.138462 787.692308 333.981538 905.846154 512 905.846154c175.261538 0 323.347692-114.215385 374.547692-272.541539l26.387693 9.846154z',
              onclick: function () {
                // alert('myToolHandler2')
                _that.$emit('refreshInfo')
              }
            }
          }
        }
      })
    }
  }
}
</script>
