<!-- 服务设施管理 -->
<template>
    <view class="emergency-details">
        <view class="emergency-details-header facilities-theme">
            <button class="emergency-back-btn" @tap="closeFacilitiesPage">←</button>
            <text class="h1">🏪 服务设施管理</text>
            <text class="current-area">设备状态监控与维护</text>
        </view>

        <!-- 宣传横幅 -->
        <view class="promo-banner" @tap="viewServiceDetails">
            <view class="promo-image">
                <text>🏞️</text>
                <view class="promo-content">
                    <view class="promo-title">阳澄湖服务区</view>
                    <view class="promo-subtitle">品质服务 · 舒适体验 · 安全便民</view>
                </view>
            </view>
        </view>

        <!-- 概览 -->
        <view class="section m15">
            <view class="section-header">📊 设施状态概览</view>
            <view class="stats-grid p15 noMargin">
                <view class="stat-card">
                    <view class="stat-number ok">7</view>
                    <view class="stat-label">正常运行</view>
                </view>
                <view class="stat-card">
                    <view class="stat-number warn">1</view>
                    <view class="stat-label">维护中</view>
                </view>
                <view class="stat-card">
                    <view class="stat-number danger">0</view>
                    <view class="stat-label">故障停用</view>
                </view>
            </view>
        </view>

        <!-- 设施列表 -->
        <view class="facilities-section">
            <view class="facilities-header">🏪 服务设施详情</view>
            <view class="event-list noPad">
                <!-- 加油站 -->
                <view class="event-item left-ok">
                    <view class="event-header">
                        <view class="event-title">⛽ 加油站服务</view>
                        <view class="event-meta">
                            <view class="event-priority priority-low ok">运行正常</view>
                        </view>
                    </view>
                    <view class="event-content">
                        <view class="event-description">
                            <text class="line">• 92#汽油：7.8元/升 95#汽油：8.3元/升</text>
                            <text class="line">• 0#柴油：7.2元/升</text>
                            <text class="line">• 24小时营业，支持现金、刷卡、手机支付</text>
                        </view>
                        <view class="event-actions">
                            <button class="event-action-btn btn-primary" @tap="checkFuelStock">库存查询</button>
                            <button class="event-action-btn btn-success" @tap="contactFuelStaff">联系加油员</button>
                        </view>
                    </view>
                </view>

                <!-- 充电桩 -->
                <view class="event-item left-ok">
                    <view class="event-header">
                        <view class="event-title">🔌 新能源充电桩</view>
                        <view class="event-meta">
                            <view class="event-priority priority-low ok">运行正常</view>
                        </view>
                    </view>
                    <view class="event-content">
                        <view class="event-description">
                            <text class="line">• 快充桩：8个（60kW） 慢充桩：4个（7kW）</text>
                            <text class="line">• 当前使用：6个桩在充电中</text>
                            <text class="line">• 支持国标充电接口，扫码即充</text>
                        </view>
                        <view class="event-actions">
                            <button class="event-action-btn btn-primary" @tap="checkChargingStatus">充电状态</button>
                            <button class="event-action-btn btn-warning" @tap="reportChargingIssue">故障上报</button>
                        </view>
                    </view>
                </view>

                <!-- 餐厅 -->
                <view class="event-item left-ok">
                    <view class="event-header">
                        <view class="event-title">🍽️ 餐厅服务</view>
                        <view class="event-meta">
                            <view class="event-priority priority-low ok">营业中</view>
                        </view>
                    </view>
                    <view class="event-content">
                        <view class="event-description">
                            <text class="line">• 营业时间：06:00-23:00</text>
                            <text class="line">• 特色：苏式小笼包、阳澄湖大闸蟹套餐</text>
                            <text class="line">• 座位：80个，当前客流量适中</text>
                        </view>
                        <view class="event-actions">
                            <button class="event-action-btn btn-primary" @tap="viewMenu">查看菜单</button>
                            <button class="event-action-btn btn-success" @tap="contactChef">联系厨房</button>
                        </view>
                    </view>
                </view>

                <!-- 便利店 -->
                <view class="event-item left-ok">
                    <view class="event-header">
                        <view class="event-title">🛒 便利店</view>
                        <view class="event-meta">
                            <view class="event-priority priority-low ok">营业中</view>
                        </view>
                    </view>
                    <view class="event-content">
                        <view class="event-description">
                            <text class="line">• 24小时营业</text>
                            <text class="line">• 商品：日用品、零食饮料、汽车用品、纪念品</text>
                            <text class="line">• 特色：阳澄湖特产、江南小食</text>
                        </view>
                        <view class="event-actions">
                            <button class="event-action-btn btn-primary" @tap="checkInventory">库存管理</button>
                            <button class="event-action-btn btn-success" @tap="contactCashier">联系收银</button>
                        </view>
                    </view>
                </view>

                <!-- 停车场 -->
                <view class="event-item left-warn">
                    <view class="event-header">
                        <view class="event-title">🅿️ 停车场</view>
                        <view class="event-meta">
                            <view class="event-priority priority-medium">部分维护</view>
                        </view>
                    </view>
                    <view class="event-content">
                        <view class="event-description">
                            <text class="line">• 总车位：200个 大车位：50个</text>
                            <text class="line">• 当前可用：180个（B区20个车位灯光维修中）</text>
                            <text class="line">• 免费停车，24小时开放</text>
                        </view>
                        <view class="event-actions">
                            <button class="event-action-btn btn-warning"
                                @tap="contactMaintenance('parking')">联系维修</button>
                            <button class="event-action-btn btn-primary" @tap="checkParkingStatus">车位状态</button>
                        </view>
                    </view>
                </view>

                <!-- 其他设施 -->
                <view class="event-item left-ok">
                    <view class="event-header">
                        <view class="event-title">🏢 其他设施服务</view>
                        <view class="event-meta">
                            <view class="event-priority priority-low ok">服务正常</view>
                        </view>
                    </view>
                    <view class="event-content">
                        <view class="event-description">
                            <text class="line">• 🚻 洗手间：24小时开放，含无障碍设施</text>
                            <text class="line">• 📶 免费WiFi：全区覆盖，密码：YCH888</text>
                            <text class="line">• 🔧 汽修服务：8:00-18:00，应急救援24小时</text>
                        </view>
                        <view class="event-actions">
                            <button class="event-action-btn btn-primary" @tap="viewAllServices">查看详情</button>
                            <button class="event-action-btn btn-success" @tap="contactService">联系服务</button>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<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;

.emergency-details {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 750rpx;
    height: 100%;
    background: @bg;
    z-index: 1000;
    overflow-y: auto;

    .emergency-details-header {
        background: linear-gradient(135deg, @danger, #ff3838);
        color: #fff;
        padding: 40rpx;
        position: relative;
        box-shadow: @shadow;

        &.facilities-theme {
            background: linear-gradient(135deg, #20bf6b, #0fb9b1);
        }

        .emergency-back-btn {
            position: absolute;
            left: 30rpx;
            top: 30rpx;
            background: rgba(255, 255, 255, .2);
            border: none;
            color: #fff;
            font-size: 36rpx;
            width: 80rpx;
            height: 80rpx;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .h1 {
            text-align: center;
            display: block;
            margin-bottom: 6rpx;
        }

        .current-area {
            text-align: center;
            display: block;
            opacity: .9;
        }
    }

    .event-list {
        padding: 30rpx;

        .event-item {
            background: #fff;
            border-radius: 24rpx;
            margin-bottom: 30rpx;
            overflow: hidden;
            box-shadow: @shadow;
            border-left: 8rpx solid @danger;

            &.warning {
                border-left-color: @warn;
            }

            &.resolved {
                border-left-color: @ok;
                opacity: .85;
            }

            &.left-ok {
                border-left-color: @ok;
            }

            &.left-warn {
                border-left-color: @warn;
            }

            .event-header {
                padding: 30rpx;
                border-bottom: 1rpx solid #f1f3f4;
                background: #fff;

                .event-title {
                    font-weight: 700;
                    font-size: 32rpx;
                    margin-bottom: 10rpx;
                    display: flex;
                    align-items: center;
                    gap: 16rpx;
                }

                .event-meta {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    font-size: 24rpx;
                    color: @muted;

                    .event-time {
                        display: flex;
                        align-items: center;
                        gap: 8rpx;
                    }

                    .event-priority {
                        padding: 6rpx 16rpx;
                        border-radius: 20rpx;
                        font-size: 22rpx;
                        font-weight: 700;

                        &.priority-high {
                            background: #ffe6e6;
                            color: #d32f2f;
                        }

                        &.priority-medium {
                            background: #fff3e0;
                            color: #f57c00;
                        }

                        &.priority-low {
                            background: #e8f5e8;
                            color: #388e3c;
                        }

                        &.ok {
                            background: #e8f5e8;
                            color: #2e7d32;
                        }
                    }
                }
            }

            .event-content {
                padding: 30rpx;

                .event-description {
                    margin-bottom: 24rpx;
                    line-height: 1.6;
                    color: #333;

                    .line {
                        display: block;
                    }
                }

                .event-actions {
                    display: flex;
                    gap: 20rpx;
                    flex-wrap: wrap;
                    margin-bottom: 16rpx;

                    .event-action-btn {
                        padding: 16rpx 24rpx;
                        border: none;
                        border-radius: 12rpx;
                        font-size: 24rpx;
                        font-weight: 700;
                        color: #fff;

                        &.btn-primary {
                            background: @primary;
                        }

                        &.btn-success {
                            background: @ok;
                        }

                        &.btn-warning {
                            background: @warn;
                            color: #fff;
                        }
                    }
                }

                .event-status {
                    display: flex;
                    align-items: center;
                    gap: 10rpx;
                    font-size: 24rpx;
                    margin-top: 10rpx;
                    padding: 16rpx 20rpx;
                    background: @bg;
                    border-radius: 12rpx;

                    .status-dot {
                        width: 16rpx;
                        height: 16rpx;
                        border-radius: 50%;

                        &.status-processing {
                            background: @warn;
                        }

                        &.status-resolved {
                            background: @ok;
                        }

                        &.status-pending {
                            background: @danger;
                        }
                    }
                }
            }
        }
    }

    .add-event-btn {
        position: fixed;
        bottom: 160rpx;
        right: 40rpx;
        width: 96rpx;
        height: 96rpx;
        background: linear-gradient(135deg, @primary, @primary2);
        border-radius: 50%;
        border: none;
        color: #fff;
        font-size: 40rpx;
        box-shadow: 0 8rpx 24rpx rgba(74, 144, 226, .4);
    }

    .promo-banner {
        margin: 30rpx;
        border-radius: 24rpx;
        overflow: hidden;
        box-shadow: @shadow;

        .promo-image {
            width: 100%;
            height: 240rpx;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 48rpx;
            position: relative;
            overflow: hidden;

            .promo-content {
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                background: linear-gradient(transparent, rgba(0, 0, 0, .7));
                padding: 40rpx 30rpx 30rpx;
                color: #fff;

                .promo-title {
                    font-size: 32rpx;
                    font-weight: 700;
                    margin-bottom: 8rpx;
                }

                .promo-subtitle {
                    font-size: 24rpx;
                    opacity: .9;
                }
            }
        }
    }

    .facilities-section {
        margin: 30rpx;
        background: #fff;
        border-radius: 24rpx;
        overflow: hidden;
        box-shadow: @shadow;

        .facilities-header {
            background: linear-gradient(135deg, #20bf6b, #0fb9b1);
            color: #fff;
            padding: 30rpx;
            font-weight: 700;
            font-size: 32rpx;
            display: flex;
            align-items: center;
            gap: 16rpx;
        }
    }
}
</style>