<template>
  <m-card title="重点工作" class="box">
    <div v-if="showChart" id="cloud" class=""></div>
  </m-card>
</template>

<script lang="ts">
import { defineComponent, watch, onMounted, computed } from 'vue'
import * as echarts from 'echarts'
import store from '@/store'
import 'echarts-wordcloud'
// import echarts3 from './echart3'
// import './echarts-wordcloud'

export default defineComponent({
  name: 'KeyTask',
  setup() {
    const showChart = computed(() => store.state.curTheme === 'manage')

    // onMounted(() => init())
    const init = () => {
      const getHeight = () => {
        const height = document.documentElement.clientHeight
        document.documentElement.style.fontsize = height * 0.16 + 'px'
        // console.log((height * 0.16) / 10 + 'px')
        return (height * 0.16) / 10
      }
      //首次加载是计算
      const height = getHeight()
      // console.log(height)

      //添加监听，窗口发生变化时计算
      window.addEventListener('resize', init)
      window.addEventListener('orientationchange', init)

      const myChart = echarts.init(document.getElementById('cloud'))
      const colorList = [
        '#3a96f5',
        '#5faaf7',
        '#78bafe',
        '#1563f2',
        '#add2f8',
        '#e24bf4',
        '#1acaff',
        '#ffde00',
        '#89fda5',
      ]
      const keywords = [
        { name: '明厨亮灶', value: 100 },
        { name: '民宿群租', value: 100 },
        { name: '垃圾分类', value: 100 },
        { name: '小型工程纳管', value: 100 },
        { name: '非机动车停放', value: 100 },
        { name: '马桶改造', value: 100 },
        { name: '电梯加装', value: 100 },
        { name: '居改非', value: 100 },
        { name: '无证无照整治', value: 100 },
        { name: '楼道堆物', value: 100 },
      ]
      const option = {
        tooltip: {
          show: true,
        },
        backgroundColor: '#000',
        series: [
          {
            type: 'wordCloud',
            sizeRange: [height, height * 2],
            rotationRange: [0, 0],
            rotationStep: 45,
            gridSize: height,
            shape: 'pentagon',
            width: '90%',
            height: '95%',
            textStyle: {
              color: function () {
                const index = Math.floor(Math.random() * colorList.length)
                return colorList[index]
              },
              fontWeight: 550,
            },
            data: keywords,
          },
        ],
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    }

    watch(
      [() => showChart.value],
      ([type]) => {
        if (!type) return
        setTimeout(() => {
          init()
        }, 1900)
      },
      { immediate: true }
    )
    return {
      showChart,
    }
  },
})
</script>

<style lang="stylus" scoped>
.box
  height 2rem
  width 100%
  box-sizing border-box
  overflow hidden
  #cloud
    height 100%
    width 100%
</style>
