<template>
  <div id="center">
    <div class="up">
      <div
        class="bg-color-black item"
        v-for="item in titleItem"
        :key="item.title"
      >
        <p class="ml-3 colorBlue fw-b fs-xl">{{ item.title }}</p>
        <div>
          <dv-digital-flop
            class="dv-dig-flop ml-1 mt-2 pl-3"
            :config="item.number"
          />
        </div>
      </div>
    </div>
    <div class="down">
      <div class="ranking bg-color-black">
        <span>
          <icon name="chart-pie" class="text-icon"></icon>
        </span>
        <span class="fs-xl text mx-2 mb-1 pl-3">设备使用排名榜</span>
        <dv-scroll-ranking-board class="dv-scr-rank-board mt-1" :config="ranking" />
      </div>
      <div class="percent">
        <div class="item bg-color-black">
          <span>设备在线率</span>
          <CenterChart
            :id="rate[0].id"
            :tips="rate[0].tips"
            :colorObj="rate[0].colorData"
          />
        </div>
        <div class="item bg-color-black">
          <span>设备使用率</span>
          <CenterChart
            :id="rate[1].id"
            :tips="rate[1].tips"
            :colorObj="rate[1].colorData"
          />
        </div>
        <div class="water">
          <dv-water-level-pond class="dv-wa-le-po" :config="water" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CenterChart from '@/components/echart/center/centerChartRate'
import { getComprehensiveCenterStats } from '@/api/data'

export default {
  data() {
    return {
      titleItem: [
        {
          title: '总设备数',
          number: {
            number: [0],
            toFixed: 0,
            textAlign: 'left',
            content: '{nt}次',
            style: {
              fontSize: 26,
              fill: '#3fc0fb'
            }
          }
        },
        {
          title: '在线设备',
          number: {
            number: [0],
            toFixed: 0,
            textAlign: 'left',
            content: '{nt}台',
            style: {
              fontSize: 26,
              fill: '#67e0e3'
            }
          }
        },
        {
          title: '今日按摩次数',
          number: {
            number: [0],
            toFixed: 0,
            textAlign: 'left',
            content: '{nt}次',
            style: {
              fontSize: 26,
              fill: '#ff9800'
            }
          }
        },
        {
          title: '离线设备',
          number: {
            number: [0],
            toFixed: 0,
            textAlign: 'left',
            content: '{nt}台',
            style: {
              fontSize: 26,
              fill: '#f56c6c'
            }
          }
        },
        {
          title: '本月按摩时长',
          number: {
            number: [0],
            toFixed: 0,
            textAlign: 'left',
            content: '{nt}分钟',
            style: {
              fontSize: 26,
              fill: '#67c23a'
            }
          }
        },
        {
          title: '活跃设备',
          number: {
            number: [0],
            toFixed: 0,
            textAlign: 'left',
            content: '{nt}台',
            style: {
              fontSize: 26,
              fill: '#409eff'
            }
          }
        }
      ],
      ranking: {
        data: [],
        carousel: 'single',
        unit: '次'
      },
      water: {
        data: [0],
        shape: 'roundRect',
        formatter: '{value}%',
        waveNum: 3
      },
      rate: [
        {
          id: 'centerRate1',
          tips: 0,
          colorData: {
            textStyle: '#3fc0fb',
            series: {
              color: ['#00bcd44a', 'transparent'],
              dataColor: {
                normal: '#03a9f4',
                shadowColor: '#97e2f5'
              }
            }
          }
        },
        {
          id: 'centerRate2',
          tips: 0,
          colorData: {
            textStyle: '#67e0e3',
            series: {
              color: ['#faf3a378', 'transparent'],
              dataColor: {
                normal: '#ff9800',
                shadowColor: '#fcebad'
              }
            }
          }
        }
      ]
    }
  },
  components: {
    CenterChart
  },
  created() {
    this.loadCenterData()
  },
  methods: {
    async loadCenterData() {
      try {
        const response = await getComprehensiveCenterStats()
        if (response.code === 200) {
          const data = response.data
          
          // 更新标题项 - 使用设备相关数据
          this.updateTitleItems(data)
          
          // 更新排名数据 - 设备使用排名
          this.ranking = data.ranking
          
          // 更新率数据 - 设备在线率和使用率
          this.updateRateData(data)
          
          // 更新水位图数据 - 设备总体运行状态
          if (data.waterData) {
            this.water = data.waterData
          }
        }
      } catch (error) {
        console.error('加载中心面板数据失败:', error)
        // 使用默认数据
        this.setDefaultDeviceData()
      }
    },

    updateTitleItems(data) {
      // 根据后端返回的设备统计数据更新标题项
      if (data.titleItems && data.titleItems.length >= 6) {
        this.titleItem = data.titleItems.map((item, index) => {
          const config = {
            number: [item.number?.number?.[0] || 0],
            toFixed: 0,
            textAlign: 'left',
            content: '{nt}' + this.getUnitByIndex(index),
            style: {
              fontSize: 26,
              fill: this.getColorByIndex(index)
            }
          }
          
          return {
            title: item.title,
            number: config
          }
        })
      }
    },

    updateRateData(data) {
      // 更新设备在线率和使用率
      if (data.rateData && data.rateData.length >= 2) {
        this.rate[0].tips = data.rateData[0].tips || 0  // 设备在线率
        this.rate[1].tips = data.rateData[1].tips || 0  // 设备使用率
      }
    },

    getUnitByIndex(index) {
      const units = ['台', '台', '次', '台', '分钟', '台']
      return units[index] || ''
    },

    getColorByIndex(index) {
      const colors = ['#3fc0fb', '#67e0e3', '#ff9800', '#f56c6c', '#67c23a', '#409eff']
      return colors[index] || '#3fc0fb'
    },

    setDefaultDeviceData() {
      // 设置默认设备数据
      this.ranking.data = [
        { name: '设备A', value: 156 },
        { name: '设备B', value: 128 },
        { name: '设备C', value: 97 },
        { name: '设备D', value: 85 },
        { name: '设备E', value: 73 }
      ]
      
      this.rate[0].tips = 75  // 默认在线率75%
      this.rate[1].tips = 60  // 默认使用率60%
      this.water.data = [68]  // 默认总体运行率68%
    }
  }
}
</script>

<style lang="scss" scoped>
#center {
  display: flex;
  flex-direction: column;
  .up {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    .item {
      border-radius: 6px;
      padding-top: 8px;
      margin-top: 8px;
      width: 32%;
      height: 70px;
      .dv-dig-flop {
        width: 150px;
        height: 30px;
      }
    }
  }
  .down {
    padding: 6px 4px;
    padding-bottom: 0;
    width: 100%;
    display: flex;
    height: 255px;
    justify-content: space-between;
    .bg-color-black {
      border-radius: 5px;
    }
    .ranking {
      padding: 10px;
      width: 59%;
      .dv-scr-rank-board {
        height: 225px;
      }
    }
    .percent {
      width: 40%;
      display: flex;
      flex-wrap: wrap;
      .item {
        width: 50%;
        height: 120px;
        span {
          margin-top: 8px;
          font-size: 14px;
          display: flex;
          justify-content: center;
        }
      }
      .water {
        width: 100%;
        .dv-wa-le-po {
          height: 120px;
        }
      }
    }
  }
}
</style>