<template>
   <Modal :visible="show" :class="'modalArea'" style="padding: 0;background: none;" :width="400" :closeButton="false" :closeOnClickMask="true" @closed="close()">
    <div class="header">
      <div class="title" v-html="title"></div>
      <div class="close" @click="close()"><svg  viewBox="0 0 1024 1024" width="200" height="200"><path d="M999.819275 905.894092c26.805506 27.003004 26.78811 70.77902-0.051166 97.756441-13.398148 13.484106-30.970362 20.234857-48.534389 20.234857-17.58961 0-35.171034-6.758937-48.577369-20.277836L511.657192 609.698113 120.30704 1003.263723c-13.407358 13.475919-30.970362 20.217461-48.53439 20.217461-17.58961 0-35.17922-6.758937-48.585555-20.269649-26.813692-27.003004-26.78811-70.77902 0.042979-97.764628l391.33378-393.557424L23.572882 117.989251c-26.813692-27.012214-26.796296-70.780043 0.034792-97.764627 26.839275-26.985608 70.332858-26.960025 97.137341 0.042979l390.989949 393.909441L903.07693 20.61962c26.831089-26.977421 70.315462-26.960025 97.129154 0.042979 26.813692 27.01119 26.78811 70.770833-0.042979 97.764627L608.812953 511.98465l391.006322 393.909442z"></path></svg></div>
    </div>
    <div class="content">
      <div ref="echartsRef" class="echartsArea"></div>
    </div>
  </Modal>
</template>

<script setup>
import { ref, nextTick, watch } from 'vue'
import Modal from '@/components/Modal.vue'
import * as echarts from 'echarts'
import 'echarts-wordcloud'

const show = ref(false)
const data = ref({})
const title = ref("")
const echartsRef = ref(null)
let chartInstance = null

// 打开
const open = (titleText, option) => {
  init()
  show.value = true
  title.value = titleText
  data.value = JSON.parse(JSON.stringify(option))
  // 等待DOM渲染完成后初始化词云图
  nextTick(() => {
    initWordCloud()
  })
}

// 关闭
const close = () => {
  show.value = false
  init()
}

const init = () => {
  title.value = ""
  data.value = {}
  if (chartInstance) {
    chartInstance.dispose()
    chartInstance = null
  }
}

// 初始化词云图
const initWordCloud = () => {
  if (!echartsRef.value) return
  
  chartInstance = echarts.init(echartsRef.value)
  
  chartInstance.setOption(data.value)
  
  // 点击事件
  chartInstance.on('click', function (params) {
    console.log('点击了词云:', params.name, params.value)
  })
  
  // 窗口大小改变时重绘
  window.addEventListener('resize', handleResize)
}

// 处理窗口大小变化
const handleResize = () => {
  if (chartInstance) {
    chartInstance.resize()
  }
}

// 监听show变化，关闭时移除resize监听
watch(show, (newVal) => {
  if (!newVal) {
    window.removeEventListener('resize', handleResize)
  }
})

defineExpose({
  open,
  close,
})
</script>

<style lang="scss">
.modalArea{
  &>.modal-content {
    border-radius: 1rem;
    box-shadow: 0 0 10px #FDF6DE;
    padding: 0;
    border: solid 1px #FDF6DE;
  }
}

.header{
  padding: 1.2rem 1.5rem;
  border-bottom: solid 1px #FDF6DE;
  font-weight: bold;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  &>.title{
    display: flex;
    align-items: center;
    gap: .5rem;
  }
  &>.close{
    cursor: pointer;
    padding: .6rem;
    border-radius: 2rem;
    border: solid 1px #FCEFC8;
    width: fit-content;
    height: fit-content;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    &>svg{
      width: .7rem;
      height: .7rem;
    }
  }
}

.content{
  padding: 1rem;
  display: flex;
  gap: .8rem;
  flex-wrap: wrap;
  &>.echartsArea{
    width: 100%;
    height: 300px;
  }
}
</style>
