<template>
  <!-- 酒店入住人数及入住率 -->
  <div class="occupancy" :id="id" />
</template>

<script setup>
  import { fitChartSize } from '@/utils/dataUtil'
  import { useEchart } from '@/hooks/echart'

  const { id, setOption } = useEchart()

  let props = defineProps({
    list: {
      type: Array,
      default: () => []
    }
  })

  watch(
    () => props.list,
    (val) => {
      if (val.length > 0) {
        setTimeout(() => {
          init()
        }, 1000)
      }
    },
    { immediate: true }
  )

  let params = null

  const setSeriesData = () => {
    return props.list.map((item) => {
      return {
        name: item.hotel_name,
        value: item.occupancy_rate,
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(255, 112, 33, 0)'
              },
              {
                offset: 1,
                color: '#FF7021'
              }
            ]
          }
        }
      }
    })
  }
  const setScatterData = () => {
    return props.list.map((item) => {
      return {
        name: item.hotel_name,
        value: item.occupancy_rate,
        itemStyle: {
          color: '#fff',
          opacity: 1
        }
      }
    })
  }
  const setYAxisData = () => {
    return props.list.map((item) => item.occupancy_rate)
  }
  const init = () => {
    if (!params) {
      params = {
        backgroundColor: 'transparent',
        tooltip: {
          show: false
        },
        legend: {
          show: false
        },
        grid: {
          left: '4%',
          right: '4%',
          top: '16%',
          bottom: '4%',
          containLabel: false
        },
        xAxis: [
          {
            splitLine: {
              show: false
            },
            max: 100,
            type: 'value',
            show: false
          }
        ],
        yAxis: [
          {
            type: 'category',
            splitLine: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            }
          },
          {
            type: 'category',
            inverse: false,
            axisTick: 'none',
            axisLine: 'none',
            show: true,
            axisLabel: {
              color: '#fff',
              fontSize: fitChartSize(12),
              verticalAlign: 'bottom',
              padding: [0, 0, 10, 0],
              inside: true,
              formatter: function (value) {
                return `{value|${value}}{value|%}`
              },
              rich: {
                value: {
                  align: 'center',
                  color: '#fff',
                  fontWeight: 600,
                  fontSize: fitChartSize(14)
                }
              }
            },
            data: setYAxisData()
          }
        ],
        series: [
          {
            name: '',
            type: 'bar',
            barWidth: fitChartSize(8),
            showBackground: true,
            borderRadius: [0, 0, 0, 0],
            backgroundStyle: {
              color: 'rgba(0, 150, 255, 0.15)'
            },
            label: {
              show: true,
              offset: [10, -14],
              color: '#fff',
              fontWeight: 500,
              position: 'left',
              align: 'left',
              fontSize: fitChartSize(14),
              formatter: function (params) {
                return params.data.name
              }
            },
            data: setSeriesData()
          },
          {
            name: '外圆',
            type: 'scatter',
            emphasis: {
              scale: false
            },
            showSymbol: true,
            symbol: 'circle',
            symbolSize: fitChartSize(10),
            z: 2,
            data: setScatterData(),
            animationDelay: 500
          }
        ]
      }
    } else {
      params.series[0].data = setSeriesData()
      params.series[1].data = setScatterData()
    }
    setOption(params)
  }
</script>

<style scoped lang="scss">
  .occupancy {
    width: vw(360);
    height: vh(130);
  }
</style>
