<template>
  <div>
    <div v-if="showEmpty"  :id="domId" :ref="refval" style="height:500px;width:800px; margin:0 auto;zoom:1;"></div>
    <div v-else>
      <div style="height:80px;">
        <h3 style="text-align:center;" @mouseover="onmouseenter" @mouseout="onmouseleave" >{{ wdtitle }}</h3>
        <div id="cloudheader" ref="cloudheader" class="tooltip" v-show="testtipShow"> {{ tooltipText }}</div>
      </div>
      <empty :height="300"></empty>
    </div>

    <div v-if="showTooltip" :style="style" class="tooltip">{{ tooltipText }}</div>
  </div>
</template>

<script>
import { generateUUID } from '@/utils/index'
import empty from '@/components/Common/empty.vue'
export default {
  name: 'word-cloud',
  components: { empty },
  props: {
    height: {
      type: Number,
      default: 400
    },
    data: {
      type: Array,
      default: () => { return [] }
    },
    // 外部控制隐藏
    propShowEmpty: {
      type: Boolean,
      default: false
    },
    wdtitle: {
      type: String,
      default: ''
    },
    tooltipText: {
      type: String,
      default: ''
    },
    refval: {
      type: String,
      default: 'citu_wordcloud'
    },
    is999: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      domId: generateUUID(),
      testtipShow: false,
      chart: null,
      showEmpty: false,
      showTooltip: false,
      style: {
        display: 'none',
        position: 'fixed'
      },
      timer: null
    }
  },
  mounted () {
    this.showEmpty = this.checkEmpty()
    this.$nextTick(_ => this.initChart())
  },
  methods: {
    onmouseenter (e) {
      this.testtipShow = true
      this.$refs.cloudheader.style.top = e.clientY + 'px'
      this.$refs.cloudheader.style.left = e.clientX + 'px'
      this.$refs.cloudheader.style.position = 'fixed'
      this.$refs.cloudheader.style.transition = 'all 0.3s'
    },
    onmouseleave (e) {
      this.testtipShow = false
    },
    checkEmpty () {
      return this.propShowEmpty ? this.propShowEmpty : Boolean(this.data.length > 0)
    },
    initChart () {
      // 背景图是椭圆
      const shapeB64 = 'data:image/png;base64, '
      const maskImage = new Image()
      maskImage.src = shapeB64
      const self = document.getElementById(this.domId)
      if (!self) return
      this.chart = this.$echarts.init(self)
      const option = {
        title: {
          text: this.wdtitle || '热词',
          left: 'center',
          triggerEvent: true,
          top: 20,
          bottom: 30
        },
        tooltip: {},
        maskImage,
        series: [
          {
            type: 'wordCloud',
            gridSize: 5, // 网格尺寸
            // size: ['50%', '60%'],
            rotationRange: [-45, 0, 45, 90], // 旋转范围
            textStyle: {
              normal: {
                fontFamily: '微软雅黑'
              },
              emphasis: {
                shadowBlur: 5, // 阴影距离
                shadowColor: '#333' // 阴影颜色
              }
            },
            left: 'center',
            top: 'center',
            width: '80%',
            height: '70%',
            right: null,
            bottom: null,
            sizeRange: this.is999 ? [16, 60] : [12, 60],
            layoutAnimation: true,
            keepAspect: true,
            data: this.data
          }
        ]
      }
      this.chart.setOption(option)
      this.chart.on('click', (e) => this.$emit('click', e))
      this.chart.on('mousemove', this.onMousemove)
      this.chart.on('mouseout', this.onMouseout)
    },
    onMousemove (event) {
      if (event.componentType === 'title') {
        this.handlerShowTooltip(event)
        this.$emit('mousemoveTitle', event)
      } else {
        this.$emit('mousemove', event)
      }
    },
    onMouseout (event) {
      if (event.componentType === 'title') {
        this.handlerHideTooltip(event)
        this.$emit('mouseoutTitle', event)
      } else {
        this.$emit('mouseout', event)
      }
    },
    handlerShowTooltip (e) {
      if (!this.tooltipText) return
      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(() => {
        const { clientX, clientY } = e.event.event
        this.style = {
          position: 'fixed',
          top: clientY + 'px',
          left: clientX + 4 + 'px'
        }
        if (!this.showTooltip) {
          this.showTooltip = true
        }
      }, 100)
    },
    handlerHideTooltip (e) {
      this.showTooltip = false
      if (this.timer) {
        clearTimeout(this.timer)
        this.timer = null
      }
    }
  },
  watch: {
    data: {
      handler (newval, oldval) {
        if (!newval) return
        if (this.chart != null) {
          this.chart.dispose()
        }
        this.showEmpty = this.checkEmpty()
        this.$nextTick(() => {
          this.initChart()
        })
      },
      deep: true,
      immediate: true
    }
  }
}
</script>

<style lang="less" scoped>
#citu_wordcloud {
  height: 400px;
  width: 800px;
  margin: auto;
}

.tooltip {
  background: #1f68be;
  color: #fff;
  z-index: 2176;
  border-radius: 4px;
  padding: 10px;
  z-index: 2000;
  font-size: 12px;
  line-height: 1.2;
  min-width: 10px;
  max-width: 300px;
  word-wrap: break-word;
  opacity:.85
}
</style>
