<template>
  <view class="service-detail-page" :style="{ paddingTop: (menu.bottom + 14) + 'px' }">

    <!-- 服务区的信息 -->
    <view class="serviceDetail" style="margin-top: 16rpx;">
      <view class="detailTop">
        <view class="serviceImg" v-if="info.fileId && info.fileId.length > 0">
          <swiper scroll-x="true" circular="true" class="banner" indicator-dots="true" indicator-active-color="#272625"
            autoplay interval="3000" style="width: 100%; height: 100%">
            <swiper-item v-for="(img, i) in info.fileId" :key="i" style="width: 100%; height: 100%">
              <image style="width: 100%; height: 100%" mode="aspectFill" lazy-load="true"
                :src="'https://fwqznxj.yciccloud.com:9081/fileDownloadApi/bsys/document/docDownloadAction?fileId=' + img.fileID"
                @click="handlePreview"></image>
            </swiper-item>
          </swiper>
        </view>
      </view>

      <!-- 服务区基本信息 -->
      <view class="detailBottom">
        <view class="detailFirst">
          <text class="serviceName">{{
            info.SAName || ""
          }}</text>
          <text class="serviceStatus">营业中</text>
        </view>
        <view class="detailSecond">
          <image class="detailFixedIcon" src="/static/images/home/address.png" />
          <text class="address">
            <text class="distance">{{ info.SERVERPART_DISTANCE || "-" }}km</text>
            <text class="addressText">{{ info.belongRegion || "-" }}{{ info.belongLine || "-" }}</text>
          </text>
        </view>
        <view class="navigationBox" @click="handleGoMap">
          <image class="navigationIcon" src="/static/images/home/navigationIcon.svg" />
        </view>
      </view>
    </view>

    <!-- 主要内容区域 -->
    <scroll-view scroll-y="true" class="content-scroll"
      :style="{ height: `calc(100vh - ${(menu.bottom + 14)}px - 560rpx ) ` }">
      <view class="content-container">

        <!-- 基本信息卡片 -->
        <view class="info-card">
          <view class="card-header">
            <text class="card-title">📋 基本信息</text>
          </view>

          <view class="info-grid">
            <!-- <view class="info-item">
              <text class="info-label">服务区编码</text>
              <text class="info-value">{{ info.SACode || '-' }}</text>
            </view> -->
            <view class="info-item">
              <text class="info-label">所属片区</text>
              <text class="info-value">{{ info.belongArea || '-' }}</text>
            </view>
            <view class="info-item">
              <text class="info-label">所在线路</text>
              <text class="info-value">{{ info.belongLine || '-' }}</text>
            </view>
            <view class="info-item">
              <text class="info-label">所在地区</text>
              <text class="info-value">{{ info.belongRegion || '-' }}</text>
            </view>
            <!-- <view class="info-item">
              <text class="info-label">桩号位置</text>
              <text class="info-value">{{ info.pileNumLocation || '-' }}</text>
            </view> -->
            <view class="info-item">
              <text class="info-label">经营模式</text>
              <text class="info-value">{{ info.businessModel && info.businessModel.length > 0 ?
                info.businessModel.toString() : '-' }}</text>
            </view>
            <view class="info-item">
              <text class="info-label">产权归属</text>
              <text class="info-value">{{ info.propertyOwnership || '-' }}</text>
            </view>
          </view>
        </view>

        <!-- 面积信息卡片 -->
        <view class="area-card">
          <view class="card-header">
            <text class="card-title">📏 面积信息</text>
          </view>

          <view class="area-stats">
            <view class="stat-item">
              <text class="stat-number">{{ formatArea(info.floorArea) }}</text>
              <text class="stat-label">占地面积</text>
              <text class="stat-unit">m²</text>
            </view>
            <view class="stat-divider"></view>
            <view class="stat-item">
              <text class="stat-number">{{ formatArea(info.parkArea) }}</text>
              <text class="stat-label">停车场面积</text>
              <text class="stat-unit">m²</text>
            </view>
            <view class="stat-divider"></view>
            <view class="stat-item">
              <text class="stat-number">{{ formatArea((info.synthesisCatering || 0) + (info.supermarket || 0) +
                (info.synthesiOther || 0)) }}</text>
              <text class="stat-label">综合楼面积</text>
              <text class="stat-unit">m²</text>
            </view>
          </view>
        </view>

        <!-- 服务详情卡片 -->
        <view class="service-card">
          <!-- <view class="service-header">
            <text class="service-title">🏢 {{ info.SAName || '服务区域' }}</text>
          </view> -->

          <!-- 服务信息 -->
          <view class="service-section">
            <view class="section-header">
              <!-- <image class="section-icon" src="https://eshangtech.com/ShopICO/ahyd-BID/service/serviceHotal.svg" /> -->
              <text class="section-title">🚻 服务设施</text>
            </view>

            <view class="service-grid">
              <view class="service-row">
                <view class="service-item"
                  :class="{ 'available': info.manToiletNum > 0, 'unavailable': !info.manToiletNum }">
                  <image class="service-icon" src="https://eshangtech.com/ShopICO/ahyd-BID/service/manWc.svg" />
                  <text class="service-name">男厕</text>
                  <text class="service-count" v-if="info.manToiletNum">({{ info.manToiletNum }})</text>
                </view>
                <view class="service-item"
                  :class="{ 'available': info.womanToiletNum > 0, 'unavailable': !info.womanToiletNum }">
                  <image class="service-icon" src="https://eshangtech.com/ShopICO/ahyd-BID/service/womanWc.svg" />
                  <text class="service-name">女厕</text>
                  <text class="service-count" v-if="info.womanToiletNum">({{ info.womanToiletNum }})</text>
                </view>
              </view>
              <view class="service-row">
                <view class="service-item"
                  :class="{ 'available': info.otherWCNum > 0, 'unavailable': !info.otherWCNum }">
                  <text class="service-name">第三卫生间</text>
                  <text class="service-count" v-if="info.otherWCNum">({{ info.otherWCNum }})</text>
                </view>
                <view class="service-item"
                  :class="{ 'available': info.babyCareRoomNum > 0, 'unavailable': !info.babyCareRoomNum }">
                  <text class="service-name">母婴室</text>
                  <text class="service-count" v-if="info.babyCareRoomNum">({{ info.babyCareRoomNum }})</text>
                </view>
              </view>
              <view class="service-row">
                <view class="service-item" :class="{ 'available': info.faucetNum > 0, 'unavailable': !info.faucetNum }">
                  <text class="service-name">水龙头</text>
                  <text class="service-count" v-if="info.faucetNum">({{ info.faucetNum }})</text>
                </view>
                <view class="service-item"
                  :class="{ 'available': info.repairStationArea > 0, 'unavailable': !info.repairStationArea }">
                  <text class="service-name">汽修站</text>
                </view>
              </view>
              <view class="service-row">
                <view class="service-item"
                  :class="{ 'available': info.addWaterArea > 0, 'unavailable': !info.addWaterArea }">
                  <text class="service-name">加水区域</text>
                </view>
                <view class="service-item empty-item">
                  <!-- 空白项保持对齐 -->
                </view>
              </view>
            </view>
          </view>

          <!-- 车位信息 -->
          <view class="service-section">
            <view class="section-header">
              <!-- <image class="section-icon" src="https://eshangtech.com/ShopICO/ahyd-BID/service/serviceCar.svg" /> -->
              <text class="section-title">🚗 停车位</text>
            </view>

            <view class="parking-grid">
              <view class="parking-row">
                <view class="parking-item">
                  <text class="parking-label">小型车位</text>
                  <text class="parking-count">{{ info.minStallNum || 0 }}</text>
                </view>
                <view class="parking-item">
                  <text class="parking-label">中型车位</text>
                  <text class="parking-count">{{ info.middleStallNum || 0 }}</text>
                </view>
              </view>
              <view class="parking-row">
                <view class="parking-item">
                  <text class="parking-label">大型车位</text>
                  <text class="parking-count">{{ info.maxStallNum || 0 }}</text>
                </view>
                <view class="parking-item">
                  <text class="parking-label">加油车道</text>
                  <text class="parking-count">{{ info.addOilRoadNum || 0 }}</text>
                </view>
              </view>
            </view>
          </view>

          <!-- 经营信息 -->
          <view class="service-section">
            <view class="section-header">
              <!-- <image class="section-icon" src="https://eshangtech.com/ShopICO/ahyd-BID/service/serviceFood.svg" /> -->
              <text class="section-title">🏪 经营服务</text>
            </view>

            <view class="business-grid">
              <view class="business-row">
                <view class="business-item"
                  :class="{ 'available': info.synthesisCatering > 0, 'unavailable': !info.synthesisCatering }">
                  <text class="business-name">餐饮服务</text>
                  <text class="business-count" v-if="info.synthesisCatering">({{ formatArea(info.synthesisCatering)
                    }}m²)</text>
                </view>
                <view class="business-item"
                  :class="{ 'available': info.supermarket > 0, 'unavailable': !info.supermarket }">
                  <text class="business-name">超市便利店</text>
                  <text class="business-count" v-if="info.supermarket">({{ formatArea(info.supermarket) }}m²)</text>
                </view>
              </view>
              <view class="business-row">
                <view class="business-item"
                  :class="{ 'available': info.LPGStationsArea > 0, 'unavailable': !info.LPGStationsArea }">
                  <text class="business-name">加气站</text>
                  <text class="business-count" v-if="info.LPGStationsArea">({{ formatArea(info.LPGStationsArea)
                    }}m²)</text>
                </view>
                <view class="business-item"
                  :class="{ 'available': info.chargingStationArea > 0, 'unavailable': !info.chargingStationArea }">
                  <text class="business-name">充电站</text>
                  <text class="business-count" v-if="info.chargingStationArea">({{ formatArea(info.chargingStationArea)
                    }}m²)</text>
                </view>
              </view>
            </view>

            <view class="business-type" v-if="info.businessModel && info.businessModel.length > 0">
              <text class=" business-type-label">经营模式：</text>
              <view class="business-type-tag">
                <text class="business-type-text">{{ info.businessModel && info.businessModel.length > 0 ?
                  info.businessModel.toString() : '-' }}</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 设施详情卡片 -->
        <view class="info-card">
          <view class="card-header">
            <text class="card-title">⚡ 设施详情</text>
          </view>

          <view class="info-grid">
            <view class="info-item">
              <text class="info-label">污水处理方量</text>
              <text class="info-value">{{ info.sewageTreatmentVolume || '-' }}m³</text>
            </view>
            <view class="info-item">
              <text class="info-label">变压器功率</text>
              <text class="info-value">{{ info.transformerVA || '-' }}VA</text>
            </view>
            <view class="info-item">
              <text class="info-label">加油枪数量</text>
              <text class="info-value">{{ info.oilGunNum || 0 }}支</text>
            </view>
            <view class="info-item">
              <text class="info-label">充电桩数量</text>
              <text class="info-value">{{ info.chargingStationPileNum || 0 }}桩</text>
            </view>
            <view class="info-item">
              <text class="info-label">充电枪数量</text>
              <text class="info-value">{{ info.chargingStationGunNum || 0 }}枪</text>
            </view>
            <view class="info-item">
              <text class="info-label">直流快充枪</text>
              <text class="info-value">{{ info.DCFastGunNum || 0 }}枪</text>
            </view>
            <view class="info-item">
              <text class="info-label">直流慢充枪</text>
              <text class="info-value">{{ info.slowGunNum || 0 }}枪</text>
            </view>
          </view>
        </view>

        <!-- 区域面积卡片 -->
        <view class="info-card">
          <view class="card-header">
            <text class="card-title">🏗️ 区域面积 <text
                style="font-size: 24rpx;font-weight: 400;margin-left: 8rpx;">/m²</text></text>
          </view>

          <view class="info-grid">
            <view class="info-item">
              <text class="info-label">行车道面积</text>
              <text class="info-value">{{ formatArea(info.drivewayArea) }}</text>
            </view>
            <view class="info-item">
              <text class="info-label">办公区面积</text>
              <text class="info-value">{{ formatArea(info.officeArea) }}</text>
            </view>
            <view class="info-item">
              <text class="info-label">卫生间面积</text>
              <text class="info-value">{{ formatArea(info.WCArea) }}</text>
            </view>
            <view class="info-item">
              <text class="info-label">绿化面积</text>
              <text class="info-value">{{ formatArea(info.greenArea) }}</text>
            </view>
            <view class="info-item">
              <text class="info-label">员工住宿区</text>
              <text class="info-value">{{ formatArea(info.employeeRoomArea) }}</text>
            </view>
            <view class="info-item">
              <text class="info-label">驾驶员休息室</text>
              <text class="info-value">{{ formatArea(info.driverRoomArea) }}</text>
            </view>
          </view>
        </view>

      </view>
    </scroll-view>
  </view>
</template>

<script>
import request from '@/util/index.js'

export default {
  name: "mapDetail",
  data() {
    return {
      info: {},
      menu: {},
      typeList: [
        { url: 'https://eshangtech.com/ShopICO/ahyd-BID/service/health.svg', name: 'A类', isShow: false },
        { url: 'https://eshangtech.com/ShopICO/ahyd-BID/service/time.svg', name: '2015-06-10', isShow: false },
        { url: 'https://eshangtech.com/ShopICO/ahyd-BID/service/baby.svg', name: '母婴室', isShow: false },
        { url: 'https://eshangtech.com/ShopICO/ahyd-BID/service/car.svg', name: '司机之家', isShow: false },
        { url: 'https://eshangtech.com/ShopICO/ahyd-BID/service/Charging.svg', name: '充电桩', isShow: false },
        { url: 'https://eshangtech.com/ShopICO/ahyd-BID/service/hotel.svg', name: '客房', isShow: false }
      ],
      topBg: [],
      seatInfo: {}
    }
  },

  onLoad() {
    this.menu = uni.getMenuButtonBoundingClientRect()
    this.handleGetPageData()
  },
  props: {
    selectIndex: {
      type: Number,
      default: 0
    }
  },
  watch: {
    selectIndex: {
      handler(value) {
        if (value === 0) {
          this.handleGetPageData()
        }
      },
      immediate: true,
    }
  },
  methods: {
    // 跳转导航
    handleGoMap() {
      uni.openLocation({
        latitude: this.info.latitude * 1,
        longitude: this.info.longitude * 1,
        scale: 16,
        name: this.info.SAName,
        success(data) {
          console.log(data);
        },
        fail(err) {
          console.log(err);
        },
      });
    },
    // 改变服务区
    handleChangeService() {
      this.$util.toNextRoute("navigateTo", "/pages/map/index?type=attendanceStatus");
    },
    // 返回上一页
    handleBack() {
      uni.navigateBack({
        delta: 1
      })
    },

    // 获取页面数据
    handleGetPageData() {
      let systemInfo = uni.getSystemInfoSync()
      this.menu = uni.getMenuButtonBoundingClientRect()
      let seat = uni.getStorageSync('currentService')
      // this.handleSearch(seat)
      this.handleGetData(seat)
      this.topBg = []
    },
    handleGetData(obj) {
      // 模拟新数据结构的示例数据
      let res = {
        ...obj,
        // fileId: obj.fileId ? JSON.parse(obj.fileId) : [],
        // businessModel: obj.businessModel ? JSON.parse(obj.businessModel) : [],
      }
      console.log('新数据结构示例:', res);
      this.info = res
    },
    // 搜索服务区信息
    async handleSearch(seat) {
      let currentService = uni.getStorageSync("currentService");
      let seatInfo = uni.getStorageSync("seatInfo");
      this.seatInfo = JSON.parse(seatInfo);

      let reqs = {
        longitude: this.seatInfo.longitude,
        ServerpartId: currentService.Serverpart_ID || currentService.SERVERPART_ID,
        latitude: this.seatInfo.latitude,
      }

      try {
        const totalData = await request.$webGet('CommercialApi/BaseInfo/GetServerpartInfo', reqs)
        this.info = totalData.Result_Data

        // 设置设施显示状态
        this.typeList[4].isShow = this.info.HASCHARGE
        this.typeList[5].isShow = this.info.HASGUESTROOM
        this.typeList[2].isShow = this.info.HASMOTHER
        this.typeList[3].isShow = this.info.HASPILOTLOUNGE

        if (this.info.SERVERPART_TYPE) {
          this.typeList[0].name = this.getServiceType(this.info.SERVERPART_TYPE)
          this.typeList[0].isShow = true
        }

        this.typeList[1].isShow = this.info.STARTDATE

        // 设置图片
        if (this.info && this.info.ImageLits && this.info.ImageLits.length > 0) {
          this.topBg = this.info.ImageLits
        } else {
          this.topBg = ['https://eshangtech.com/ShopICO/ahyd-BID/service/default.png']
        }
      } catch (error) {
        console.error('获取服务区信息失败:', error)
      }
    },

    // 获取服务区类型
    getServiceType(type) {
      const typeMap = {
        1000: 'A类',
        1010: 'A类（示范）',
        2000: 'B类',
        3000: 'C类',
        4000: 'D类'
      }
      return typeMap[type] || ''
    },


    // 格式化面积
    formatArea(area) {
      if (!area) return '-'
      return parseFloat(area).toLocaleString()
    },

    // 预览图片
    handlePreview() {
      uni.previewImage({
        current: this.topBg[0],
        urls: this.topBg
      })
    },

  }
}
</script>

<style lang="less" scoped>
@bg: #f8f9fa;
@muted: #666;
@card: #fff;
@shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
@primary: #27B25F;
@primary2: #4CCC7F;
@ok: #2ed573;
@warn: #ff9f43;
@danger: #ff4757;

.service-detail-page {
  width: 100vw;
  background-color: #F5F5F5;
  box-sizing: border-box;
  padding-bottom: env(safe-area-inset-bottom);

  .summaryTab {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    background-image: url("https://eshangtech.com/minTestImg/pageBg.png");
    z-index: 99;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding-bottom: 16px;

    .leftArrow {
      width: 100%;
      height: 24px;
      position: absolute;
      z-index: 99999999999;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      padding: 0 32rpx;

      .img {
        width: 24px;
        height: 24px;
        margin-right: 8px;
        z-index: 99;
      }

      .picker {
        .selectService {
          display: flex;
          align-items: center;

          .img {
            width: 40px;
            height: 40px;
            z-index: 2;
          }

          .select {
            height: 32px;
            background: #fff;
            border-radius: 0 16px 16px 0;
            transform: translateX(-40px);
            box-sizing: border-box;
            padding-left: 35px;
            padding-right: 8rpx;
            display: flex;
            align-items: center;

            .content {
              display: flex;
              flex-direction: column;
              align-items: flex-start;

              .uni-input {
                padding: 0;
                background: transparent;
                font-size: 14px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #160002;
                line-height: 20px;
                height: 20px;
              }

              .area {
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #786B6C;
                line-height: 16px;
                margin: 0;
              }
            }
          }
        }
      }
    }
  }

  .serviceDetail {
    width: calc(100% - 64rpx);
    height: 440rpx;
    background: #ffffff;
    border-radius: 16rpx;
    margin-left: 32rpx;

    .detailTop {
      width: 100%;
      height: 320rpx;
      border-radius: 16rpx;
      overflow: hidden;

      .serviceImg {
        width: 100%;
        height: 100%;
      }
    }

    .detailBottom {
      width: 100%;
      box-sizing: border-box;
      padding: 4rpx 24rpx 24rpx;
      position: relative;

      .detailFirst {
        width: 100%;

        .serviceName {
          width: calc(100% - 190rpx);
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 28rpx;
          color: #130f05;
          line-height: 36rpx;
          text-align: left;
          font-style: normal;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          margin-right: 16rpx;
        }

        .serviceStatus {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #009f43;
          line-height: 32rpx;
          text-align: justify;
          font-style: normal;
          display: inline-block;
          padding: 2rpx 6rpx;
          background: #e9f8ee;
          border-radius: 4rpx;
        }
      }

      .detailSecond {
        width: 100%;
        display: flex;
        align-items: center;

        .detailFixedIcon {
          width: 24rpx;
          height: 24rpx;
          margin-right: 4rpx;
        }

        .address {
          width: calc(100% - 120rpx);
          display: inline-block;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;

          .distance {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #130f05;
            line-height: 36rpx;
            text-align: left;
            font-style: normal;
            margin-right: 8rpx;
          }

          .addressText {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #716f69;
            line-height: 36rpx;
            text-align: left;
            font-style: normal;
          }
        }
      }

      .navigationBox {
        width: 64rpx;
        height: 64rpx;
        position: absolute;
        right: 24rpx;
        top: 32rpx;

        .navigationIcon {
          width: 100%;
          height: 100%;
        }
      }
    }
  }


  .content-scroll {
    background: @bg;
    // margin-top: 24rpx;
  }

  .content-container {
    padding: 32rpx;
  }

  .service-info {
    background: #fff;
    margin: 24rpx 32rpx 0;
    border-radius: 24rpx;
    padding: 40rpx;
    box-shadow: @shadow;

    .service-name-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16rpx;

      .service-name {
        font-size: 36rpx;
        font-weight: 700;
        color: #160002;
        flex: 1;
      }

      .status-badge {
        background: linear-gradient(135deg, @primary, @primary2);
        padding: 8rpx 20rpx;
        border-radius: 20rpx;

        .status-text {
          font-size: 24rpx;
          font-weight: 500;
          color: #fff;
        }
      }
    }

    .service-location {
      margin-bottom: 32rpx;

      .location-text {
        font-size: 28rpx;
        color: #786B6C;
        line-height: 1.4;
      }
    }

    .nav-button-row {
      .nav-button {
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, @primary, @primary2);
        color: #fff;
        padding: 24rpx;
        border-radius: 20rpx;
        gap: 16rpx;

        .nav-icon {
          width: 28rpx;
          height: 28rpx;
          filter: brightness(0) invert(1);
        }

        .nav-text {
          font-size: 28rpx;
          font-weight: 600;
        }
      }
    }
  }

  .info-card,
  .area-card {
    background: #fff;
    border-radius: 24rpx;
    padding: 24rpx 24rpx 16rpx;
    margin-bottom: 32rpx;
    box-shadow: @shadow;

    .card-header {
      display: flex;
      align-items: center;
      margin-bottom: 8rpx;

      .header-icon {
        width: 48rpx;
        height: 48rpx;
        background: linear-gradient(135deg, @primary, @primary2);
        border-radius: 12rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 20rpx;

        .icon {
          width: 24rpx;
          height: 24rpx;
          filter: brightness(0) invert(1);
        }
      }

      .card-title {
        font-size: 28rpx;
        font-weight: 600;
        color: #160002;
      }
    }

    .info-grid {
      .info-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16rpx 0;
        border-bottom: 2rpx solid #F5F5F5;

        &:last-child {
          border-bottom: none;
        }

        .info-label {
          font-size: 24rpx;
          color: #786B6C;
          font-weight: 400;
        }

        .info-value {
          font-size: 24rpx;
          color: #160002;
          font-weight: 600;
          text-align: right;
          flex: 1;
          margin-left: 30rpx;
        }
      }
    }

    .area-stats {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .stat-item {
        flex: 1;
        text-align: center;

        .stat-number {
          display: block;
          font-size: 28rpx;
          font-weight: 600;
          color: @primary;
          margin-bottom: 8rpx;
        }

        .stat-label {
          display: block;
          font-size: 24rpx;
          color: #786B6C;
          margin-bottom: 4rpx;
        }

        .stat-unit {
          font-size: 22rpx;
          color: #A69E9F;
        }
      }

      .stat-divider {
        width: 2rpx;
        height: 80rpx;
        background: #E5E5E5;
        margin: 0 32rpx;
      }
    }
  }

  .service-card {
    background: #fff;
    border-radius: 24rpx;
    padding: 24rpx;
    margin-bottom: 32rpx;
    box-shadow: @shadow;

    .service-header {
      margin-bottom: 16rpx;

      .service-title {
        font-size: 32rpx;
        font-weight: 700;
        color: #160002;
      }
    }

    .service-section {
      margin-bottom: 24rpx;

      &:last-child {
        margin-bottom: 0;
      }

      .section-header {
        display: flex;
        align-items: center;
        margin-bottom: 24rpx;

        .section-icon {
          width: 32rpx;
          height: 32rpx;
          margin-right: 16rpx;
        }

        .section-title {
          font-size: 28rpx;
          font-weight: 600;
          color: #160002;
        }
      }

      .service-grid {
        .service-row {
          display: flex;
          gap: 16rpx;
          margin-bottom: 16rpx;

          &:last-child {
            margin-bottom: 0;
          }
        }

        .service-item {
          flex: 1;
          display: flex;
          align-items: center;
          background: #F0F0F0;
          padding: 16rpx;
          border-radius: 16rpx;
          border: 3rpx solid transparent;

          &.available {
            background: linear-gradient(135deg, rgba(@primary, 0.15), rgba(@primary2, 0.1));
            border: 3rpx solid @primary;
            box-shadow: 0 4rpx 12rpx rgba(@primary, 0.2);
          }

          &.unavailable {
            .service-name {
              text-decoration: line-through;
              color: #999;
            }
          }

          &.empty-item {
            background: transparent;
            border: none;
            box-shadow: none;
          }

          .service-icon {
            width: 28rpx;
            height: 28rpx;
            margin-right: 12rpx;
          }

          .service-name {
            font-size: 24rpx;
            color: #160002;
            font-weight: 500;
            flex: 1;
          }

          .service-count {
            font-size: 20rpx;
            color: #786B6C;
            margin-left: 8rpx;
          }
        }
      }

      .parking-grid {
        .parking-row {
          display: flex;
          gap: 16rpx;
          margin-bottom: 16rpx;

          &:last-child {
            margin-bottom: 0;
          }
        }

        .parking-item {
          flex: 1;
          background: #F8F9FA;
          border-radius: 20rpx;
          padding: 12rpx 16rpx;
          text-align: center;

          .parking-icon {
            width: 56rpx;
            height: 56rpx;
            margin: 0 auto 20rpx;
            border-radius: 16rpx;

            &.car-icon {
              background: linear-gradient(135deg, #FF6B6B, #FF8787);
            }

            &.bus-icon {
              background: linear-gradient(135deg, #4ECDC4, #6BCDB9);
            }

            &.truck-icon {
              background: linear-gradient(135deg, #45B7D1, #5DBBCC);
            }

            &.danger-icon {
              background: linear-gradient(135deg, #FFA726, #FFB74D);
            }
          }

          .parking-label {
            display: block;
            font-size: 24rpx;
            color: #786B6C;
          }

          .parking-count {
            font-size: 28rpx;
            font-weight: 700;
            color: #160002;
          }
        }
      }

      .business-grid {
        margin-bottom: 24rpx;

        .business-row {
          display: flex;
          gap: 16rpx;
          margin-bottom: 16rpx;

          &:last-child {
            margin-bottom: 0;
          }
        }

        .business-item {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          background: #F0F0F0;
          padding: 12rpx 20rpx;
          border-radius: 16rpx;
          border: 3rpx solid transparent;

          &.available {
            background: linear-gradient(135deg, rgba(#1677FE, 0.15), rgba(#1677FE, 0.1));
            border: 3rpx solid #1677FE;
            box-shadow: 0 4rpx 12rpx rgba(#1677FE, 0.2);
          }

          &.unavailable {
            .business-name {
              text-decoration: line-through;
              color: #999;
            }
          }

          .business-name {
            font-size: 24rpx;
            color: #160002;
            font-weight: 400;
            text-align: center;
          }

          .business-count {
            font-size: 20rpx;
            color: #786B6C;
            margin-left: 8rpx;
          }
        }
      }

      .business-type {
        display: flex;
        align-items: center;

        .business-type-label {
          font-size: 24rpx;
          color: #786B6C;
          margin-right: 16rpx;
        }

        .business-type-tag {
          background: linear-gradient(135deg, @primary, @primary2);
          padding: 8rpx 20rpx;
          border-radius: 20rpx;

          .business-type-text {
            font-size: 24rpx;
            color: white;
            font-weight: 500;
          }
        }
      }
    }
  }

}
</style>