<template>
  <div>
    <TitleBox titleText="装备状态" @handleMore="handleMore" style="margin-bottom: 10px" />
    <div ref="diamondChart" class="chart-container"></div>

    <!-- 装备状态 -->
    <EquipStatusMore ref="equipStatusMore" />
  </div>
</template>

<script>
import TitleBox from '../TitleBox'
import * as echarts from 'echarts'
import { getEquipmentStatusApi } from '@/api/wsScreen/index'
import EquipStatusMore from '@/views/home/components/provincial/Dialog/EquipStatusMore'

export default {
  name: 'Bottom1-1',
  components: {
    TitleBox,
    EquipStatusMore,
  },
  data() {
    return {
      chartData: [],
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    handleMore() {
      this.$refs.equipStatusMore.openDialog()
    },
    async getList() {
      try {
        const res = await getEquipmentStatusApi()
        console.log('🚀 ~ 装备状态 ~ res:', res)
        if (!res.data) return
        this.chartData = res.data.map((item) => {
          return {
            ...item,
            value: item.num,
          }
        })
        this.$nextTick(() => {
          this.initChart()
        })
      } catch (error) {
        console.log('🚀 ~ 装备状态 ~ error:', error)
      }
    },
    initChart() {
      const chartDom = this.$refs.diamondChart
      const myChart = echarts.init(chartDom)

      const xData = this.chartData.map((item) => item.name)
      const BAR_COLOR_MAP = [
        {
          bottom: '#51ABF7',
          top: '#78C5FF',
        },
        {
          bottom: '#5EDDCA',
          top: '#32E1C6',
        },
        {
          bottom: '#FFB644',
          top: '#FFC468',
        },
        {
          bottom: '#FFAB6F',
          top: '#F8AC86',
        },
      ]
      const seriesData = this.chartData.map((item, index) => {
        const color = BAR_COLOR_MAP[index] || BAR_COLOR_MAP[0]

        return {
          value: item.value,

          // ✅ 柱体颜色（静态）
          itemStyle: {
            borderRadius: [50, 50, 0, 0],
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              { offset: 0, color: color.bottom },
              { offset: 1, color: color.top },
            ]),
          },

          // ✅ label 颜色（静态）
          label: {
            show: true,
            position: 'top',
            fontSize: 16,
            fontWeight: 'bold',
            color: color.top,
            formatter: `${item.value}/${item.proportion}%`,
          },
        }
      })

      const option = {
        title: [
          {
            text: '单位：台',
            left: '5%',
            top: 0,
            textStyle: {
              color: '#999',
              fontSize: 12,
            },
          },
        ],

        graphic: [
          {
            type: 'group',
            right: '6%',
            top: 0,
            children: [
              // {
              //   type: 'rect',
              //   z: 100,
              //   left: 0,
              //   top: 3.5,
              //   shape: {
              //     width: 10,
              //     height: 5,
              //   },
              //   style: {
              //     fill: '#31B5C4',
              //     stroke: null,
              //   },
              // },
              // {
              //   type: 'text',
              //   z: 100,
              //   left: 20,
              //   top: 0,
              //   style: {
              //     text: '装备状态数',
              //     fill: '#999',
              //     font: '12px sans-serif',
              //   },
              // },
            ],
          },
        ],

        grid: {
          left: '16%',
          right: '6%',
          top: '16%',
          bottom: '15%',
        },

        xAxis: {
          data: xData,
          axisTick: { show: false },
          axisLine: { show: true },
          axisLabel: {
            interval: 0,
            color: '#999',
            fontSize: 14,
            margin: 10,
          },
        },

        yAxis: {
          splitLine: { show: false },
          axisTick: { show: true },
          axisLine: { show: true },
          axisLabel: {
            color: '#999',
            fontSize: 14,
          },
        },

        series: [
          {
            type: 'bar',
            barWidth: 20, // 👉 宽度 = 28px
            barMinHeight: 6,
            z: 10,
            data: seriesData,
          },
        ],
      }

      myChart.setOption(option)
      window.addEventListener('resize', () => myChart.resize())
    },
  },
}
</script>

<style lang="scss" scoped>
.chart-container {
  width: 100%; /* 宽度 */
  height: 270px; /* 高度 */
  margin: 0 auto;
}
</style>
