<template>
  <div class="select-box">
    <Select v-model="params.id" label="选择景区" :options="options" @on-change="initChart" />
  </div>
  <div class="area" :id="id" />
</template>

<script setup>
  import { useEchart } from '@/hooks/echart'
  import { fitChartSize } from '@/utils/dataUtil'
  import { getAreaApi, getSpotApi } from '@/api/sentiment.js'

  const { id, setOption } = useEchart()

  let params = reactive({ id: '' })
  let option = null
  let options = ref([])
  const initChart = async () => {
    let res = await getAreaApi(params)
    if (res.data.length > 0) {
      if (option) {
        option.series[0].data = res.data
      } else {
        option = {
          legend: {
            top: '10%',
            itemWidth: fitChartSize(20),
            itemHeight: fitChartSize(20),
            textStyle: {
              color: '#fff',
              fontSize: fitChartSize(20)
            }
          },
          series: [
            {
              name: '',
              type: 'pie',
              radius: ['30%', '60%'],
              center: ['50%', '56%'],
              roseType: 'area',
              labelLine: {
                normal: {
                  show: true,
                  length: 1
                }
              },
              itemStyle: {
                borderRadius: fitChartSize(10)
              },
              data: res.data
            }
          ]
        }
      }
      setOption(option)
    }
  }
  const getStop = async () => {
    let res = await getSpotApi()
    options.value = res.data
  }
  onMounted(() => {
    getStop()
    initChart()
  })
</script>

<style scoped lang="scss">
  .select-box {
    position: absolute;
    z-index: 99;
    top: vh(10);
    right: vw(10);
  }
  .area {
    width: vw(840);
    height: vh(400);
  }
</style>
