<template>
  <view class="service-area-overview">
    <!-- 标题 -->
    <view class="section-title">服务区概况</view>

    <!-- 服务区类型统计 - 第一行 -->
    <view class="metrics-row">
      <view class="metric-card full-width">
        <text class="metric-value" style="color: #56BCE6;">{{ serviceData.ServerpartTotalCount || 0 }}</text>
        <text class="metric-label">管理站点/座</text>
      </view>
    </view>

    <!-- 服务区类型统计 - 第二行 -->
    <view class="metrics-row">
      <view class="metric-card">
        <text class="metric-value" style="color: #56BCE6;">{{ serviceData.serviceAllTotal || 0 }}</text>
        <text class="metric-label">服务区/座</text>
      </view>
      <view class="metric-card">
        <text class="metric-value" style="color: #ef5a0d;">{{ serviceData.ParkingServiceCount || 0 }}</text>
        <text class="metric-label">停车区/座</text>
      </view>
      <view class="metric-card">
        <text class="metric-value" style="color: #1aba80;">{{ serviceData.WaterStationCount || 0 }}</text>
        <text class="metric-label">加水站/座</text>
      </view>
    </view>

    <!-- 服务区类型统计 - 第三行 -->
    <view class="metrics-row">
      <view class="metric-card">
        <text class="metric-value" style="color: #f41a09;">{{ serviceData.ViewingDeckCount || 0 }}</text>
        <text class="metric-label">观景台/座</text>
      </view>
      <view class="metric-card">
        <text class="metric-value" style="color: #b5ebf7;">{{ serviceData.RestAreaCount || 0 }}</text>
        <text class="metric-label">休息区/座</text>
      </view>
      <view class="metric-card">
        <text class="metric-value" style="color: #757575;">{{ serviceData.ClosedCount || 0 }}</text>
        <text class="metric-label">关停/座</text>
      </view>
    </view>

    <!-- 设备设施分布图 -->
    <view class="chart-title">设备设施</view>
    <view class="chart-section">
      <view class="chart-container">
        <!-- 图表加载效果 -->
        <ChartLoading v-if="!hasFacilityData" text="数据加载中..." />
        <!-- 实际图表 -->
        <QiunDataCharts v-else type="column" :opts="facilityChartOpts" :chartData="facilityChartData" :canvas2d="true"
          :inScrollView="true" canvasId="facilityChart" tooltipFormat="facilityChartData" />
      </view>
    </view>

    <!-- 服务承载状态 -->
    <view class="load-section">
      <view class="section-title">服务承载</view>
      <view class="load-cards">
        <view class="load-card busy">
          <view class="load-icon">🔥</view>
          <view class="load-content">
            <text class="load-title">繁忙</text>
            <view class="load-value">
              <text class="load-number">{{ loadData.busy }}</text>
              <text class="load-unit">座</text>
            </view>
          </view>
        </view>
        <view class="load-card idle">
          <view class="load-icon">😊</view>
          <view class="load-content">
            <text class="load-title">空闲</text>
            <view class="load-value">
              <text class="load-number">{{ loadData.idle }}</text>
              <text class="load-unit">座</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 服务区类型分布饼图 -->
    <view class="chart-title">服务区类型分布</view>
    <view class="chart-section">
      <view class="chart-container">
        <!-- 图表加载效果 -->
        <ChartLoading v-if="isLoading" text="数据加载中..." />
        <!-- 实际饼图 -->
        <QiunDataCharts v-else type="pie" :opts="areaTypePieOpts" :chartData="areaTypePieData" :canvas2d="true"
          :inScrollView="true" canvasId="areaTypePieChart" tooltipFormat="areaTypePieData" />
      </view>
    </view>
  </view>
</template>

<script>
import QiunDataCharts from './qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
import ChartLoading from './ChartLoading.vue'
import request from "@/util/index.js";

export default {
  components: {
    QiunDataCharts,
    ChartLoading
  },

  data() {
    return {
      isLoading: false,
      serviceData: {
        ServerpartTotalCount: 0,    // 管理站点
        serviceAllTotal: 0,          // 服务区
        ParkingServiceCount: 0,      // 停车区
        WaterStationCount: 0,        // 加水站
        ViewingDeckCount: 0,         // 观景台
        RestAreaCount: 0,            // 休息区
        ClosedCount: 0,              // 关停
        REFUELINGGUNTotal: 0,       // 加油站
        ChargingStationTotal: 0,      // 充电桩
        HASPILOTLOUNGETotal: 0,     // 司机之家
        NursingRoomTotal: 0,         // 母婴室
        URECOUNTTotal: 0,            // 尿素
        WaterCount: 0                // 加水
      },
      loadData: {
        busy: 0,
        idle: 0
      }
    }
  },

  computed: {
    // 判断设施数据是否已加载
    hasFacilityData() {
      return this.serviceData.REFUELINGGUNTotal > 0 ||
        this.serviceData.ChargingStationTotal > 0 ||
        this.serviceData.HASPILOTLOUNGETotal > 0 ||
        this.serviceData.NursingRoomTotal > 0 ||
        this.serviceData.URECOUNTTotal > 0 ||
        this.serviceData.WaterCount > 0;
    },

    // 判断饼图数据是否已加载
    hasPieData() {
      return this.serviceData.serviceAllTotal > 0 ||
        this.serviceData.ParkingServiceCount > 0 ||
        this.serviceData.WaterStationCount > 0 ||
        this.serviceData.ViewingDeckCount > 0 ||
        this.serviceData.RestAreaCount > 0 ||
        this.serviceData.ClosedCount > 0;
    },

    // 设备设施数据
    facilityChartData() {
      return {
        categories: ['加油站', '充电桩', '司机之家', '母婴室', '尿素', '加水'],
        series: [{
          name: '设施数量',
          data: [
            this.serviceData.REFUELINGGUNTotal,
            this.serviceData.ChargingStationTotal,
            this.serviceData.HASPILOTLOUNGETotal,
            this.serviceData.NursingRoomTotal,
            this.serviceData.URECOUNTTotal,
            this.serviceData.WaterCount
          ]
        }]
      }
    },

    // 设备设施图表配置
    facilityChartOpts() {
      return {
        color: ['#1890FF', '#52C41A', '#FAAD14', '#F5222D', '#722ED1', '#13C2C2'],
        padding: [15, 15, 0, 15],
        dataLabel: true,
        legend: {
          show: true
        },
        xAxis: {
          itemCount: 6,
          scrollShow: false,
          fontSize: 12
        },
        yAxis: {
          gridType: 'dash',
          dashLength: 2,
          showTitle: true,
          data: [
            {
              min: 0,
              title: '设施数量(个)',
              titleFontSize: 12,
              titleOffsetY: -5,
              titleOffsetX: 0,
            }
          ]
        },
        extra: {
          column: {
            type: 'group',
            width: 10,
            barBorderCircle: true
          }
        }
      }
    },

    // 服务区类型饼图数据
    areaTypePieData() {
      return {
        series: [{
          data: [
            { name: '服务区', value: this.serviceData.serviceAllTotal },
            { name: '停车区', value: this.serviceData.ParkingServiceCount },
            { name: '加水站', value: this.serviceData.WaterStationCount },
            { name: '观景台', value: this.serviceData.ViewingDeckCount },
            { name: '休息区', value: this.serviceData.RestAreaCount },
            { name: '关停', value: this.serviceData.ClosedCount }
          ].filter(item => item.value > 0)
        }]
      }
    },

    // 服务区类型饼图配置
    areaTypePieOpts() {
      return {
        padding: [15, 15, 15, 15],
        dataLabel: false,
        legend: {
          show: true,
          position: 'right',
          float: 'center',
          padding: 5,
          margin: 10
        },
        extra: {
          pie: {
            activeOpacity: 0.5,
            activeRadius: 10,
            labelWidth: 0,
            border: true,
            borderWidth: 0, // 设置边框宽度为0，消除扇形间隔
            borderColor: '#FFFFFF' // 边框颜色设为白色
          }
        }
      }
    }
  },

  onReady() {
    this.handleGetData()
  },

  methods: {
    // 获取服务区数据
    async handleGetData() {
      this.isLoading = true
      // 获取服务区基础设施汇总数据
      await this.handleGetServerpartServiceSummary()
      // 获取服务区繁忙度数据
      await this.handleGetCurBusyRank()
      this.isLoading = false
    },

    // 获取服务区基础设施汇总数据
    async handleGetServerpartServiceSummary() {
      const req = {
        ProvinceCode: "530000",
        type: "encryption"
      }
      const data = await request.$apiPost('CommercialApi/BaseInfo/GetServerpartServiceSummary', req)

      if (data && data.Result_Data) {
        const resultData = data.Result_Data
        this.serviceData = {
          ServerpartTotalCount: resultData.ServerpartTotalCount || 0,
          serviceAllTotal: resultData.ServerpartCount || 0,
          ParkingServiceCount: resultData.ParkingServiceCount || 0,
          WaterStationCount: resultData.WaterStationCount || 0,
          ViewingDeckCount: resultData.ViewingDeckCount || 0,
          RestAreaCount: resultData.RestAreaCount || 0,
          ClosedCount: resultData.ClosedCountCount || 0,
          REFUELINGGUNTotal: resultData.GasStationCount || 0,
          ChargingStationTotal: resultData.ChargeStationCount || 0,
          HASPILOTLOUNGETotal: resultData.DriverRoomCount || 0,
          NursingRoomTotal: resultData.NursingRoomCount || 0,
          URECOUNTTotal: resultData.UreaCount || 0,
          WaterCount: resultData.WaterCount || 0
        }
      }
    },

    // 获取服务区繁忙度数据
    async handleGetCurBusyRank() {
      const req = {
        ProvinceCode: '530000',
        ServerpartId: "",
        DataType: '1',
        type: "encryption"
      }
      const busyData = await request.$apiPost('CommercialApi/BigData/GetCurBusyRank', req)

      if (busyData && busyData.Result_Data && busyData.Result_Data.OtherData) {
        const otherData = busyData.Result_Data.OtherData
        this.loadData = {
          busy: otherData.value || 0,
          idle: otherData.data || 0
        }
      }
    },


    async handleUpdatePie() {
      this.handleGetData()
    }
  }
}
</script>

<style scoped lang="less">
.section-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 12rpx;
}

.metrics-row {
  display: flex;
  gap: 24rpx;
  margin-bottom: 24rpx;
}

.metric-card {
  flex: 1;
  background: #fff;
  border-radius: 16rpx;
  padding: 16rpx;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  text-align: center;
}

.metric-card.full-width {
  width: 100%;
}

.metric-value {
  font-size: 28rpx;
  font-weight: 600;
  display: block;
}

.metric-label {
  font-size: 24rpx;
  color: #666;
}

.chart-section {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx 24rpx 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  margin-bottom: 32rpx;
}

.chart-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 12rpx;
}

.chart-container {
  width: 100%;
  height: 400rpx;
  margin-bottom: 20rpx;
}

.load-section {
  margin-bottom: 24rpx;
}

.load-cards {
  display: flex;
  gap: 24rpx;
}

.load-card {
  flex: 1;
  background: #fff;
  border-radius: 16rpx;
  padding: 16rpx 24rpx;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  gap: 24rpx;
}

.load-card.busy {
  background: linear-gradient(135deg, #F87D75, #FF4D4F);
}

.load-card.idle {
  background: linear-gradient(135deg, #75F8EE, #13C2C2);
}

.load-icon {
  font-size: 48rpx;
  width: 80rpx;
  height: 80rpx;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.load-content {
  flex: 1;
}

.load-title {
  font-size: 24rpx;
  color: #fff;
  font-weight: 500;
  margin-bottom: 8rpx;
  display: block;
}

.load-value {
  display: flex;
  align-items: baseline;
  gap: 8rpx;
}

.load-number {
  font-size: 28rpx;
  font-weight: 600;
  color: #fff;
}

.load-unit {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.8);
}
</style>