<template>
    <div class="reststop-detail-page">
        <!-- 休息站基本信息 -->
        <div class="reststop-header">
            <div class="reststop-title">{{ reststopInfo.RESTSTATION_NAME }}</div>
            <div class="reststop-location" style="display: inline-block;">{{ reststopInfo.RESTSTATION_LOCATION }}</div>

            <div class="status-badges" style="display: inline-block;">
                <div class="status-badge">
                    {{ getDoorLockStatusText(reststopInfo.LOCK_STATUS) }}
                </div>
            </div>
        </div>

        <!-- 订单信息 -->
        <div class="order-section" v-if="orderDetail">
            <div class="section-title">订单信息</div>
            <div class="order-card">
                <div class="order-item">
                    <div class="order-label">订单状态</div>
                    <div class="order-value" :class="orderDetail.RESTSTATIONBILL_STATE === 2 ? 'order-active' :
                        (orderDetail.RESTSTATIONBILL_STATE === 2 ? 'order-completed' : 'order-cancelled')
                        ">
                        {{ getOrderStatusText(orderDetail.RESTSTATIONBILL_STATE) }}
                    </div>
                </div>

                <div class="order-item">
                    <div class="order-label">下单时间</div>
                    <div class="order-value">{{ orderDetail.OPERATE_DATE }}</div>
                </div>

                <div class="order-item">
                    <div class="order-label">剩余时间</div>
                    <div class="order-value remaining-time">
                        {{ orderDetail.REMAIN_SECONDS || '已结束' }}
                    </div>
                </div>
            </div>
        </div>

        <!-- 设备状态 -->
        <div class="device-section">
            <div class="section-title">设备状态</div>
            <div class="device-grid">
                <div class="device-item">
                    <div class="device-icon">🔒</div>
                    <div class="device-info">
                        <div class="device-name">门锁</div>
                        <div class="device-status" :class="[
                            reststopInfo.LOCK_STATUS === 1 ? 'status-unlocked' : 'status-locked'
                        ]">
                            {{ reststopInfo.LOCK_STATUS === 1 ? '未锁定' : '已锁定' }}
                        </div>
                    </div>
                </div>

                <div class="device-item">
                    <div class="device-icon">🧹</div>
                    <div class="device-info">
                        <div class="device-name">保洁</div>
                        <div class="device-status"
                            :class="reststopInfo.CLEANING_STATUS === 1 ? 'device-dirty' : reststopInfo.CLEANING_STATUS === 2 ? 'status-locked' : reststopInfo.CLEANING_STATUS === 3 ? 'status-unlocked' : ''">
                            {{ getCleaningStatusText(reststopInfo.CLEANING_STATUS) }}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 评价信息 -->
        <div class="rating-section" v-if="reststopInfo.RESTSTATIONBILL_SCORE">
            <div class="section-title">用户评价</div>
            <div class="rating-card">
                <div class="rating-score">
                    <div class="score-number">{{ reststopInfo.RESTSTATIONBILL_SCORE }}</div>
                    <div class="score-stars">
                        <span class="star star-filled" v-for="i in reststopInfo.RESTSTATIONBILL_SCORE" :key="i">★</span>
                    </div>
                </div>
                <div class="rating-desc">用户综合评分</div>
            </div>
        </div>

        <!-- 联系信息 -->
        <div class="contact-section">
            <div class="section-title">联系信息</div>
            <div class="contact-card">
                <div class="contact-item" @click="makePhoneCall">
                    <div class="contact-icon">📞</div>
                    <div class="contact-info">
                        <div class="contact-label">应急联系</div>
                        <div class="contact-value">{{ reststopInfo.EMERGENCY_CONTACT }}</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 操作按钮 -->
        <!-- <div class="action-section">
            <div class="action-btn" :class="[
                reststopInfo.orderStatus === 'active' ? 'action-active' :
                    (reststopInfo.doorLockStatus === 'locked' ? 'action-occupied' :
                        (reststopInfo.cleaningStatus === 'cleaning' ? 'action-cleaning' : 'action-normal'))
            ]" @click="handleMainAction">
                {{ getMainActionText() }}
            </div>
            <div class="secondary-btn" v-if="reststopInfo.orderStatus === 'active'" @click="handleRenewal">
                续费使用
            </div>
        </div> -->
    </div>
</template>

<script>
export default {
    data() {
        return {
            menu: {},
            safeHeight: "",
            reststopId: "",
            reststopInfo: {},
            orderDetail: {}
        };
    },
    onLoad(query) {
        this.menu = uni.getMenuButtonBoundingClientRect();

        if (query.id) {
            this.reststopId = query.id;

            this.loadReststopDetail();
        }
    },

    methods: {
        // 加载休息站详情
        async loadReststopDetail() {
            const req = {
                RESTSTATIONId: this.reststopId,
                type: 'encryption'
            }
            uni.showLoading({
                title: '加载中...',
                mask: true
            });
            const data = await this.$api.$posMemberPost("/Member/GetRESTSTATIONDetail", req)
            uni.hideLoading();
            let detail = data.Result_Data
            this.reststopInfo = detail;
            console.log('this.reststopInfothis.reststopInfothis.reststopInfo', this.reststopInfo);

            this.handleGetOrderList()
        },
        // 获取订单信息
        async handleGetOrderList() {
            const req = {
                SearchParameter: {
                    RESTSTATION_IDS: this.reststopInfo.RESTSTATION_ID,
                    RESTSTATIONBILL_STATES: "1,2,3"
                },
                PageIndex: 1,
                PageSize: 1,
                sortStr: "OPERATE_DATE desc",
                type: 'encryption'
            }
            const data = await this.$api.$posMemberPost("/Member/GetRESTSTATIONBILLList", req)
            let list = data.Result_Data.List
            if (list && list.length > 0) {
                let result = list[0].OPERATE_DATE.replace('T', ' ');
                this.orderDetail = {
                    ...list[0],
                    OPERATE_DATE: result,
                }
            } else {
                this.orderDetail = {}
            }
            console.log(' this.orderDetail', this.orderDetail);
        },
        // 拨打电话
        makePhoneCall() {
            uni.makePhoneCall({
                phoneNumber: this.reststopInfo.EMERGENCY_CONTACT
            });
        },

        // 处理主要操作
        handleMainAction() {
            if (this.reststopInfo.orderStatus === 'active') {
                uni.showToast({
                    title: '您有正在进行的订单',
                    icon: 'none'
                });
                return;
            }

            if (this.reststopInfo.doorLockStatus === 'locked') {
                uni.showToast({
                    title: '当前休息站被占用',
                    icon: 'none'
                });
                return;
            }

            if (this.reststopInfo.cleaningStatus === 'cleaning') {
                uni.showToast({
                    title: '休息站正在清洁中',
                    icon: 'none'
                });
                return;
            }

            // 跳转到下单页面
            uni.showModal({
                title: '确认下单',
                content: '确定要使用此休息站吗？',
                success: (res) => {
                    if (res.confirm) {
                        this.createOrder();
                    }
                }
            });
        },

        // 处理续费
        handleRenewal() {
            if (this.reststopInfo.renewalStatus !== 'available') {
                uni.showToast({
                    title: '当前不可续费',
                    icon: 'none'
                });
                return;
            }

            uni.showModal({
                title: '续费确认',
                content: '确定要续费使用此休息站吗？',
                success: (res) => {
                    if (res.confirm) {
                        this.renewOrder();
                    }
                }
            });
        },

        // 创建订单
        createOrder() {
            uni.showLoading({
                title: '下单中...',
                mask: true
            });

            setTimeout(() => {
                uni.hideLoading();
                this.reststopInfo.orderStatus = 'active';
                this.reststopInfo.orderTime = new Date().toISOString();
                this.reststopInfo.remainingTime = '120分钟';
                this.reststopInfo.doorLockStatus = 'locked';

                uni.showToast({
                    title: '下单成功',
                    icon: 'success'
                });
            }, 2000);
        },

        // 续费订单
        renewOrder() {
            uni.showLoading({
                title: '续费中...',
                mask: true
            });

            setTimeout(() => {
                uni.hideLoading();
                this.reststopInfo.remainingTime = '240分钟';

                uni.showToast({
                    title: '续费成功',
                    icon: 'success'
                });
            }, 2000);
        },

        // 格式化日期时间
        formatDateTime(dateTime) {
            if (!dateTime) return '';
            try {
                const date = new Date(dateTime);
                const year = date.getFullYear();
                const month = (date.getMonth() + 1).toString().padStart(2, '0');
                const day = date.getDate().toString().padStart(2, '0');
                const hours = date.getHours().toString().padStart(2, '0');
                const minutes = date.getMinutes().toString().padStart(2, '0');
                return `${year}-${month}-${day} ${hours}:${minutes}`;
            } catch (error) {
                return dateTime;
            }
        },

        // 获取门锁状态文本
        getDoorLockStatusText(status) {
            const statusMap = {
                1: '可使用',
                2: '使用中'
            };
            return statusMap[status] || '';
        },

        // 获取保洁状态文本
        getCleaningStatusText(status) {
            const statusMap = {
                1: '待清洁',
                2: '清洁中',
                3: '已清洁'
            };
            return statusMap[status] || '';
        },

        // 获取订单状态文本
        getOrderStatusText(status) {
            const statusMap = {
                1: '待付款',
                2: '使用中',
                3: '已完成'
            };
            return statusMap[status] || '';
        },

        // 获取续费状态文本
        getRenewalStatusText(status) {
            const statusMap = {
                'available': '可续费',
                'unavailable': '不可续费'
            };
            return statusMap[status] || '';
        },

        // 获取主要操作按钮文本
        getMainActionText() {
            if (this.reststopInfo.orderStatus === 'active') return '使用中';
            if (this.reststopInfo.doorLockStatus === 'locked') return '被占用';
            if (this.reststopInfo.cleaningStatus === 'cleaning') return '清洁中';
            return '立即使用';
        }
    }
};
</script>

<style scoped lang="less">
.reststop-detail-page {
    width: 100vw;
    min-height: 100vh;
    background: #f8fafc;
    overflow-y: scroll;
    padding-bottom: 180rpx;

    .reststop-header {
        background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
        padding: 24rpx;
        color: white;

        .reststop-title {
            font-size: 30rpx;
            font-weight: 600;
            margin-bottom: 12rpx;
        }

        .reststop-location {
            font-size: 24rpx;
        }

        .status-badges {
            display: flex;
            gap: 16rpx;

            .status-badge {
                padding: 6rpx 12rpx;
                border-radius: 20rpx;
                font-size: 24rpx;
                font-weight: 500;
                margin-left: 16rpx;


            }
        }
    }

    .order-section,
    .device-section,
    .rating-section,
    .contact-section {
        margin: 24rpx;
        background: white;
        border-radius: 24rpx;
        padding: 24rpx;
        box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);

        .section-title {
            font-size: 28rpx;
            font-weight: 600;
            color: #1f2937;
            margin-bottom: 24rpx;
            position: relative;
            padding-left: 16rpx;

            &::before {
                content: '';
                position: absolute;
                left: 0;
                top: 8rpx;
                bottom: 8rpx;
                width: 6rpx;
                background: #22c55e;
                border-radius: 3rpx;
            }
        }
    }

    .contact-section {
        margin: 24rpx 24rpx calc(24rpx + env(safe-area-inset-bottom) + 24rpx + 64rpx + 56rpx);
    }

    .order-card {
        .order-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16rpx;

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

            .order-label {
                font-size: 24rpx;
                color: #6b7280;
            }

            .order-value {
                font-size: 24rpx;
                color: #374151;
                font-weight: 500;

                &.remaining-time {
                    color: #f59e0b;
                    font-weight: 600;
                }

                &.order-active {
                    color: #10b981;
                }

                &.order-completed {
                    color: #6b7280;
                }

                &.renewal-available {
                    color: #10b981;
                }

                &.renewal-unavailable {
                    color: #ef4444;
                }
            }
        }
    }

    .device-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24rpx;

        .device-item {
            display: flex;
            align-items: center;
            padding: 16rpx;
            background: #f9fafb;
            border-radius: 16rpx;

            .device-icon {
                font-size: 40rpx;
                margin-right: 16rpx;
            }

            .device-info {
                .device-name {
                    font-size: 24rpx;
                    color: #374151;
                    font-weight: 500;
                    margin-bottom: 4rpx;
                }

                .device-status {
                    font-size: 24rpx;

                    &.status-unlocked {
                        color: #10b981;
                    }

                    &.status-locked {
                        color: #f59e0b;
                    }

                    &.device-clean {
                        color: #10b981;
                    }

                    &.device-cleaning {
                        color: #3b82f6;
                    }

                    &.device-dirty {
                        color: #ef4444;
                    }
                }
            }
        }
    }

    .rating-card {
        text-align: center;

        .rating-score {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 16rpx;

            .score-number {
                font-size: 40rpx;
                font-weight: 700;
                color: #f59e0b;
                margin-right: 16rpx;
            }

            .score-stars {
                .star {
                    font-size: 28rpx;
                    margin: 0 4rpx;

                    &.star-filled {
                        color: #f59e0b;
                    }

                    &.star-empty {
                        color: #e5e7eb;
                    }
                }
            }
        }

        .rating-desc {
            font-size: 24rpx;
            color: #6b7280;
        }
    }

    .contact-card {
        .contact-item {
            display: flex;
            align-items: center;
            padding: 24rpx;
            background: #f9fafb;
            border-radius: 16rpx;
            transition: all 0.3s ease;

            &:active {
                background: #f3f4f6;
            }

            .contact-icon {
                font-size: 32rpx;
                margin-right: 16rpx;
            }

            .contact-info {
                flex: 1;

                .contact-label {
                    font-size: 24rpx;
                    color: #6b7280;
                    margin-bottom: 4rpx;
                }

                .contact-value {
                    font-size: 24rpx;
                    color: #374151;
                    font-weight: 500;
                }
            }

            .contact-arrow {
                font-size: 24rpx;
                color: #9ca3af;
            }
        }
    }

    .action-section {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        background: white;
        border-top: 1rpx solid #f0f0f0;
        padding: 24rpx 32rpx calc(24rpx + env(safe-area-inset-bottom));
        z-index: 100;

        .action-btn {
            width: 100%;
            padding: 16rpx;
            border-radius: 32rpx;
            font-size: 28rpx;
            font-weight: 600;
            text-align: center;
            color: white;
            transition: all 0.3s ease;
            margin-bottom: 16rpx;
            box-sizing: border-box;

            &.action-normal {
                background: linear-gradient(135deg, #22c55e, #16a34a);

                &:active {
                    opacity: 0.9;
                }
            }

            &.action-active {
                background: linear-gradient(135deg, #f59e0b, #d97706);

                &:active {
                    opacity: 0.9;
                }
            }

            &.action-occupied,
            &.action-cleaning {
                background: linear-gradient(135deg, #9ca3af, #6b7280);

                &:active {
                    opacity: 0.9;
                }
            }
        }

        .secondary-btn {
            width: 100%;
            padding: 16rpx;
            border-radius: 32rpx;
            font-size: 28rpx;
            font-weight: 500;
            text-align: center;
            background: #f3f4f6;
            color: #374151;
            transition: all 0.3s ease;
            box-sizing: border-box;

            &:active {
                background: #e5e7eb;
            }
        }
    }
}

.reststop-detail-page::-webkit-scrollbar {
    display: none;
}
</style>