<template>
  <m-card title="重点工作" class="box" :mode="mode" :no-bg="false">
    <div v-if="show" ref="cloudRef" class="cloud" />
  </m-card>
</template>

<script lang="ts">
import {
  defineComponent,
  watch,
  computed,
  shallowRef,
  onMounted,
  PropType,
  onBeforeUnmount,
  ref,
} from 'vue'
import { init as initChart, ECharts } from 'echarts/core'
import 'echarts-wordcloud'
import { ajax, api } from '@/ajax'

export default defineComponent({
  name: 'KeyTask',
  props: {
    mode: {
      type: String as PropType<string>,
      default: '2',
    },
    height: {
      type: String as PropType<string>,
      default: '2rem',
    },
    color: {
      type: Array as PropType<string[]>,
      default: () => {
        return [
          '#3a96f5',
          '#5faaf7',
          '#78bafe',
          '#1563f2',
          '#add2f8',
          '#e24bf4',
          '#1acaff',
          '#ffde00',
          '#89fda5',
        ]
      },
    },
    // data: {
    //   type: Array as PropType<{ name: string; value: number }[]>,
    //   default: () => {
    //     return [
    //       { name: '明厨亮灶', value: 100 * Math.random() },
    //       { name: '民宿群租', value: 100 * Math.random() },
    //       { name: '垃圾分类', value: 120 },
    //       { name: '小型工程纳管', value: 100 * Math.random() },
    //       { name: '非机动车停放', value: 100 * Math.random() },
    //       { name: '马桶改造', value: 100 * Math.random() },
    //       { name: '电梯加装', value: 100 * Math.random() },
    //       { name: '居改非', value: 100 * Math.random() },
    //       { name: '无证无照整治', value: 100 * Math.random() },
    //       { name: '楼道堆物', value: 100 * Math.random() },
    //       { name: '党建联建', value: 100 * Math.random() },
    //       { name: '动迁改造', value: 100 * Math.random() },
    //       { name: '文明城区创建', value: 120 },
    //       // { name: '重塑老城厢', value: 100 * Math.random() },
    //       { name: '推动商旅文联动', value: 100 * Math.random() },
    //       { name: '水环境治理', value: 100 * Math.random() },
    //       { name: '供水防涝', value: 100 * Math.random() },
    //       { name: '美丽街区', value: 100 * Math.random() },
    //       { name: '美丽家园', value: 100 * Math.random() },
    //       { name: '非机动车安全管理', value: 100 * Math.random() },
    //       { name: '房屋隐患排查', value: 100 * Math.random() },
    //     ]
    //   },
    // },
    show: {
      type: Boolean as PropType<boolean>,
      default: false,
    },
    bg: {
      type: String as PropType<string>,
      default: '#000',
    },
  },
  setup(props) {
    const sizeRate = computed(() => Math.floor((screen.height * 1.6) / 100))
    const cloudRef = shallowRef<HTMLElement | null>(null)
    const myChart = shallowRef<ECharts | null>(null)
    const data = ref<any[]>([])
    const init = () => {
      if (!cloudRef.value) return
      myChart.value = initChart(cloudRef.value)
      const option = {
        tooltip: {
          show: false,
        },
        backgroundColor: props.bg,
        series: [
          {
            type: 'wordCloud',
            sizeRange: [sizeRate.value, sizeRate.value * 2],
            rotationRange: [0, 0],
            rotationStep: 0,
            gridSize: sizeRate.value,
            shape: 'pentagon',
            width: '100%',
            height: '100%',
            textStyle: {
              color: function (item: any) {
                // const index = Math.floor(Math.random() * props.color.length)
                // return props.color[index]
                return `rgba(255,255,255,${(item?.data?.value || 0) / 100})`
              },
              fontWeight: 550,
            },
            data: data.value,
          },
        ],
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.value.setOption(option)
      myChart.value.resize()
    }

    onMounted(() => {
      window.addEventListener('resize', init)
      window.addEventListener('orientationchange', init)
    })
    onBeforeUnmount(() => {
      window.removeEventListener('resize', init)
      window.removeEventListener('orientationchange', init)
      if (!myChart.value) return
      myChart.value.dispose()
      myChart.value = null
    })

    watch(
      () => props.show,
      (type) => {
        if (!type) return
        ajax
          .get({
            url: api.GET_FOCUS_WORK,
            params: { pageSize: 9000 },
            showLoading: false,
          })
          .then((res) => {
            const { content = [] } = res?.data || {}
            data.value = content.map((item: any) => ({
              name: item.focusWorkName,
              value: +item.showRate || 0,
            }))
            init()
          })
      },
      { immediate: true }
    )
    return {
      cloudRef,
    }
  },
})
</script>

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