<template>
  <div>
    <empty v-if="showEmpty" :height="height" style="max-height: 300px;"></empty>
    <div v-show="!showEmpty">
      <div v-show="!button" :id="domId" :style="{'width':'100%','height': height + 'px','padding-top':'15px','margin':'auto'}"></div>
      <v-simple-table v-if="button" dense fixed-header :height="height-100">
        <template v-slot:default>
          <thead>
            <tr>
              <th v-for="head in headers" :key="head.title" class="text-left">
                {{ head.title }}
              </th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in items" :key="item.id">
              <td v-for="head in headers" :key="head.title"> {{ item[head.value] }} </td>
            </tr>
          </tbody>
        </template>
      </v-simple-table>
    </div>
    <full-screen ref="fullScreen" @fullscreen="fullscreen" style="z-index: 99999"/>
  </div>
</template>

<script>
// 折线图
import Empty from '@/components/Common/empty'
import { generateUUID } from '@/utils/index'
import FullScreen from './echartFull.vue'
import cloneDeep from 'lodash/cloneDeep'
export default {
  components: { FullScreen, Empty },
  props: {
    noSeriesLabel: {
      type: Boolean,
      default: false
    },
    rotate: {
      type: [String, Number],
      default: 0
    },
    button: {
      type: Number,
      default: 0
    },
    height: {
      type: [Number, String],
      default: 485
    },
    // 附加数据
    option: {
      type: [Object, Array],
      default: () => {}
    },
    headers: {
      type: Array,
      default: () => []
    },
    items: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      domId: generateUUID(),
      chart: {},
      saveOption: null
    }
  },
  computed: {
    showEmpty () {
      if (!this.chart || !this.chart.getOption) {
        return true
      }
      const option = this.chart.getOption()
      const series = option?.series
      return this.checkEmpty(series)
    }
  },
  watch: {
    rotate (val) {
      if (!this.saveOption.xAxis?.axisLabel) this.saveOption.xAxis.axisLabel = {}
      this.saveOption.xAxis.axisLabel.rotate = val
      this.chart.clear()
      this.setChartOption()
    },
    // showEmpty: {
    //   handler (val) {
    //     this.$nextTick(() => {
    //       if (!val) this.initMap()
    //     })
    //   },
    //   deep: true,
    //   immediate: true
    // },
    option: {
      handler (newVal, oldVal) {
        if (!Object.keys(this.chart).length) return
        const obj = this.originAssign(newVal)
        this.saveOption = obj
        this.chart.clear()
        this.setChartOption()
      },
      deep: true
    }
  },
  mounted () {
    this.initMap()
    if (this.showEmpty) this.$emit('finished')
  },
  methods: {
    // 校验参数是否为空
    checkEmpty (series) {
      if (!series) return true
      if (Array.isArray(series)) {
        return !series.length || series.every(_e => !_e.data || !_e.data.length)
        // if (series.length === 1) {
        //   return !series[0].data.length
        // }
        // return !series.length
      }
      return !series?.data || !series.data.length
    },
    originAssign (origin) {
      if (!origin.series && !origin.series.length) return Object.assign(origin, this.finish())
      const data = cloneDeep(origin)
      data.grid = { ...data?.grid, right: '6.5%' }
      if (data.xAxis) {
        data.xAxis.nameTextStyle = {
          padding: [0, 0, 0, -12]
        }
        data.xAxis.axisLabel = {
          interval: 0,
          rotate: this.rotate
        }
      }

      if (!data.legend) {
        data.legend = {
          show: true
        }
      }
      // 柱状图顶部显示数字
      if (this.noSeriesLabel) {
        data.series.forEach(item => {
          if (item.label) {
            item.label.color = '#666'
          }
        })
        return Object.assign(data, this.finish())
      }
      data.series.forEach(item => {
        if (data.series.length === 1 && item.type === 'pie') {
          data.legend = {
            show: false
          }
        }
        if (item.label) {
          item.label.color = '#666'
        }
        if (item.type !== 'bar') return
        if (data.legend) {
          data.legend.type = 'plain'
        }
        item.label = {
          show: true,
          position: item?.label?.position || 'top',
          color: '#666',
          formatter: function (params) {
            if (!params.value || +params.value === 0) {
              return ''
            }
            return params.value
          }
        }
      })
      return Object.assign(data, this.finish())
    },
    finish () {
      return {
        toolbox: {
          show: true,
          top: '2%',
          feature: {
            myRefresh: {
              show: true,
              title: '刷新',
              icon: 'path://M733.04 379.104a264.112 264.112 0 0 0-468.112 41.76 14.336 14.336 0 0 1-17.968 8.16l-20.256-7.008a12.352 12.352 0 0 1-7.456-16.192 312.112 312.112 0 0 1 556.736-48.56l12.704-44.352a16 16 0 0 1 7.632-9.584l24.752-13.712a14.464 14.464 0 0 1 20.912 16.64l-38.128 132.96a11.136 11.136 0 0 1-13.76 7.632l-132.96-38.128a14.464 14.464 0 0 1-3.04-26.56l24.752-13.712a16 16 0 0 1 12.16-1.392l42.032 12.048z m-447.52 280.352a264.112 264.112 0 0 0 468.112-41.76 14.336 14.336 0 0 1 17.968-8.16l20.256 7.008a12.352 12.352 0 0 1 7.44 16.176c-46.368 118.032-160.8 199.072-290.432 199.072-110.96 0-210.768-59.296-266.304-150.432l-12.704 44.288a16 16 0 0 1-7.616 9.584l-24.752 13.712a14.464 14.464 0 0 1-20.928-16.64l38.128-132.96a11.136 11.136 0 0 1 13.76-7.632l132.976 38.128a14.464 14.464 0 0 1 3.04 26.56l-24.768 13.712a16 16 0 0 1-12.16 1.392l-42.016-12.048z',
              onclick: (e) => {
                // 刷新不需要回调操作
                if (this.$listeners?.refresh) {
                  this.$emit('refresh')
                  return
                }
                this.chart.clear()
                this.setChartOption()
              }
            },
            myTool: {
              show: true,
              title: '放大查看',
              // 阿里图标库直接使用symbol引入自动生成路径 ，看path路径
              icon: 'path://M184 789.088L389.309 583.78a8 8 0 0 1 11.313 0l39.598 39.598a8 8 0 0 1 0 11.313L234.912 840H384c8.837 0 16 7.163 16 16v48a8 8 0 0 1-8 8H144c-17.673 0-32-14.327-32-32V632a8 8 0 0 1 8-8h48c8.837 0 16 7.163 16 16v149.088z m656-554.422L634.569 440.098a8 8 0 0 1-11.314 0L583.657 400.5a8 8 0 0 1 0-11.314L788.843 184H640c-8.837 0-16-7.163-16-16v-48a8 8 0 0 1 8-8h248c17.673 0 32 14.327 32 32v248a8 8 0 0 1-8 8h-48c-8.837 0-16-7.163-16-16V234.666z',
              // 弹框
              onclick: (e) => {
                this.$refs.fullScreen.show('', e.getOption(this.config), 'id')
              }
            },
            saveAsImage: {
              title: '下载图片'
            }
          }
        }
      }
    },
    fullscreen () {
      this.$emit('fullscreen')
    },
    initMap () {
      this.chart = this.$echarts.init(document.getElementById(this.domId), null, { renderer: 'svg' })
      if (Object.keys(this.option).length) {
        const obj = this.originAssign(this.option)
        this.saveOption = obj
        this.setChartOption()
      }

      this.chart.on('click', (e) => {
        this.$emit('click', e)
      })
      this.chart.on('mouseover', (e) => {
        this.$emit('mousemove', e, this.chart)
      })
      this.chart.on('finished', (e) => {
        this.$emit('finished', e)
      })
    },
    setChartOption () {
      this.chart.setOption(this.saveOption)
    },
    getChart () {
      return this.chart
    }
  },
  destroyed () {
    // window.removeEventListener('resize', throttle(this.handleResize, 1000))
  }
}
</script>
