{extend name="PatientAPP/layout" /}
{block name="css"}
<style>
    .mine-container { background: #f5f6fa; min-height: 100vh; padding-bottom: 70px; }
    .mine-header {
        background: linear-gradient(135deg, #018fa5 0%, #027a8c 50%, #016577 100%);
        padding: 40px 20px 30px;
        position: relative;
        overflow: hidden;
    }
    .mine-header::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -20%;
        width: 200px;
        height: 200px;
        background: rgba(255,255,255,0.08);
        border-radius: 50%;
    }
    .mine-header::after {
        content: '';
        position: absolute;
        bottom: -30%;
        left: -10%;
        width: 150px;
        height: 150px;
        background: rgba(255,255,255,0.05);
        border-radius: 50%;
    }
    .user-profile { display: flex; align-items: center; position: relative; z-index: 1; }
    .user-avatar-box {
        width: 65px; height: 65px;
        border-radius: 50%;
        background: rgba(255,255,255,0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 15px;
        border: 2px solid rgba(255,255,255,0.35);
    }
    .user-avatar-box .van-icon { color: #fff; font-size: 32px; }
    .user-text { color: #fff; flex: 1; }
    .user-nickname { font-size: 19px; font-weight: 600; margin-bottom: 4px; }
    .user-phone { font-size: 13px; opacity: 0.8; }
    .user-arrow { color: rgba(255,255,255,0.7); }

    /* 统计卡片 */
    .stats-card {
        margin: -18px 15px 12px;
        background: #fff;
        border-radius: 14px;
        padding: 18px 10px;
        box-shadow: 0 3px 12px rgba(1,143,165,0.1);
        position: relative;
        z-index: 2;
        display: flex;
    }
    .stat-item { flex: 1; text-align: center; cursor: pointer; }
    .stat-num { font-size: 21px; font-weight: 700; color: #333; }
    .stat-label { font-size: 12px; color: #999; margin-top: 4px; }
    .stat-item:nth-child(1) .stat-num { color: #018fa5; }
    .stat-item:nth-child(2) .stat-num { color: #e6a23c; }
    .stat-item:nth-child(3) .stat-num { color: #67c23a; }

    /* 订单快捷入口 */
    .order-section {
        margin: 0 15px 12px;
        background: #fff;
        border-radius: 14px;
        padding: 16px 0;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }
    .section-header-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 16px 14px;
    }
    .section-title-text { font-size: 15px; font-weight: 600; color: #333; }
    .section-more-link { font-size: 12px; color: #999; display: flex; align-items: center; }
    .order-grid { display: flex; padding: 0 10px; }
    .order-item { flex: 1; text-align: center; cursor: pointer; padding: 8px 0; }
    .order-icon-wrap {
        width: 44px; height: 44px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 8px;
        position: relative;
    }
    .order-icon-wrap .van-badge { position: absolute; top: -2px; right: -2px; }
    .order-label { font-size: 12px; color: #666; }

    /* 功能菜单 */
    .menu-section {
        margin: 0 15px 12px;
        background: #fff;
        border-radius: 14px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }
    .menu-section .van-cell { padding: 14px 16px; }
    .menu-section .van-cell__left-icon { color: #018fa5; margin-right: 10px; font-size: 20px; }
    .menu-icon-wrap {
        width: 28px; height: 28px;
        border-radius: 7px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 12px;
        flex-shrink: 0;
    }
    .menu-icon-wrap .van-icon { font-size: 16px; color: #fff; }
</style>
{/block}

{block name="app"}
<div id="app" v-cloak>
    <div class="mine-container">
        <!-- 头部用户信息 -->
        <div class="mine-header">
            <div class="user-profile">
                <div class="user-avatar-box">
                    <van-icon name="user-o" />
                </div>
                <div class="user-text">
                    <div class="user-nickname">{{ userInfo.nickname }}</div>
                    <div class="user-phone">{{ userInfo.phone }}</div>
                </div>
                <van-icon name="arrow" class="user-arrow" size="16" />
            </div>
        </div>

        <!-- 订单统计 -->
        <div class="stats-card">
            <div class="stat-item" @click="goOrderList('all')">
                <div class="stat-num">{{ stats.totalOrders }}</div>
                <div class="stat-label">全部订单</div>
            </div>
            <div class="stat-item" @click="goOrderList('pending')">
                <div class="stat-num">{{ stats.pending }}</div>
                <div class="stat-label">待服务</div>
            </div>
            <div class="stat-item" @click="goOrderList('completed')">
                <div class="stat-num">{{ stats.completed }}</div>
                <div class="stat-label">已完成</div>
            </div>
        </div>

        <!-- 我的订单 -->
        <div class="order-section">
            <div class="section-header-bar">
                <span class="section-title-text">我的订单</span>
                <div class="section-more-link" @click="goOrderList('all')">
                    全部订单 <van-icon name="arrow" size="11" />
                </div>
            </div>
            <div class="order-grid">
                <div class="order-item" @click="goOrderList('pending_payment')">
                    <div class="order-icon-wrap" style="background:#fff4e5;">
                        <van-icon name="clock-o" color="#e6a23c" size="20" />
                        <van-badge :content="orderBadge.pendingPayment" v-if="orderBadge.pendingPayment > 0" />
                    </div>
                    <span class="order-label">待付款</span>
                </div>
                <div class="order-item" @click="goOrderList('pending_service')">
                    <div class="order-icon-wrap" style="background:#e8f4fd;">
                        <van-icon name="todo-list-o" color="#1989fa" size="20" />
                        <van-badge :content="orderBadge.pendingService" v-if="orderBadge.pendingService > 0" />
                    </div>
                    <span class="order-label">待服务</span>
                </div>
                <div class="order-item" @click="goOrderList('in_progress')">
                    <div class="order-icon-wrap" style="background:#eaf9f1;">
                        <van-icon name="guide-o" color="#07c160" size="20" />
                        <van-badge :content="orderBadge.inProgress" v-if="orderBadge.inProgress > 0" />
                    </div>
                    <span class="order-label">进行中</span>
                </div>
                <div class="order-item" @click="goOrderList('completed')">
                    <div class="order-icon-wrap" style="background:#f0f2f5;">
                        <van-icon name="certificate" color="#969799" size="20" />
                    </div>
                    <span class="order-label">已完成</span>
                </div>
                <div class="order-item" @click="goOrderList('review')">
                    <div class="order-icon-wrap" style="background:#fef0f0;">
                        <van-icon name="star-o" color="#ee0a24" size="20" />
                        <van-badge :content="orderBadge.review" v-if="orderBadge.review > 0" />
                    </div>
                    <span class="order-label">待评价</span>
                </div>
            </div>
        </div>

        <!-- 工具服务 -->
        <div class="menu-section">
            <van-cell title="我的收藏" is-link @click="onMenuClick('collect')">
                <template #icon>
                    <div class="menu-icon-wrap" style="background:linear-gradient(135deg,#ff6b6b,#ff8e53);">
                        <van-icon name="like-o" />
                    </div>
                </template>
            </van-cell>
            <van-cell title="常用护工" is-link @click="onMenuClick('favorite_nurse')">
                <template #icon>
                    <div class="menu-icon-wrap" style="background:linear-gradient(135deg,#018fa5,#02b5d1);">
                        <van-icon name="contact" />
                    </div>
                </template>
            </van-cell>
            <van-cell title="地址管理" is-link @click="onMenuClick('address')">
                <template #icon>
                    <div class="menu-icon-wrap" style="background:linear-gradient(135deg,#67c23a,#85ce61);">
                        <van-icon name="location-o" />
                    </div>
                </template>
            </van-cell>
            <van-cell title="在线客服" is-link @click="onMenuClick('service')">
                <template #icon>
                    <div class="menu-icon-wrap" style="background:linear-gradient(135deg,#e6a23c,#f0c78a);">
                        <van-icon name="service-o" />
                    </div>
                </template>
            </van-cell>
        </div>

        <!-- 设置相关 -->
        <div class="menu-section">
            <van-cell title="账号设置" is-link @click="onMenuClick('setting')">
                <template #icon>
                    <div class="menu-icon-wrap" style="background:linear-gradient(135deg,#909399,#b1b3b8);">
                        <van-icon name="setting-o" />
                    </div>
                </template>
            </van-cell>
            <van-cell title="关于我们" is-link @click="onMenuClick('about')">
                <template #icon>
                    <div class="menu-icon-wrap" style="background:linear-gradient(135deg,#7232dd,#9b69e6);">
                        <van-icon name="info-o" />
                    </div>
                </template>
            </van-cell>
        </div>

        <!-- 退出按钮 -->
        <div style="padding: 20px 15px;">
            <van-button type="danger" block round plain @click="onLogout">退出登录</van-button>
        </div>

        <!-- 底部栏 -->
        {include file="PatientAPP/Component/van-tabbar" /}
    </div>
</div>
{/block}

{block name="js"}
<script>
    const app = Vue.createApp({
        data() {
            return {
                activeTab: 'mine',
                userInfo: {
                    nickname: '患者用户',
                    phone: '138****8888',
                    avatar: ''
                },
                stats: {
                    totalOrders: 12,
                    pending: 2,
                    completed: 10
                },
                orderBadge: {
                    pendingPayment: 0,
                    pendingService: 1,
                    inProgress: 1,
                    review: 0
                },
                menuList: [
                    { icon: 'like-o', title: '我的收藏', color: '#ff6b6b', action: 'collect' },
                    { icon: 'contact', title: '常用护工', color: '#018fa5', action: 'favorite_nurse' },
                    { icon: 'location-o', title: '地址管理', color: '#67c23a', action: 'address' },
                    { icon: 'service-o', title: '在线客服', color: '#e6a23c', action: 'service' },
                ]
            };
        },
        methods: {
            goOrderList(type) {
                const map = {
                    all: '全部订单',
                    pending_payment: '待付款',
                    pending_service: '待服务',
                    pending: '待服务',
                    in_progress: '进行中',
                    completed: '已完成',
                    review: '待评价'
                };
                vant.showToast({ message: `查看${map[type] || '订单列表'}`, position: 'top' });
            },
            onMenuClick(action) {
                const map = {
                    collect: '我的收藏',
                    favorite_nurse: '常用护工',
                    address: '地址管理',
                    service: '在线客服',
                    setting: '账号设置',
                    about: '关于我们'
                };
                vant.showToast({ message: map[action] || action, position: 'top' });
            },
            onLogout() {
                vant.showDialog({
                    title: '提示',
                    message: '确定要退出登录吗？'
                }).then(() => {
                    vant.showToast({ type: 'success', message: '已退出登录' });
                }).catch(() => {});
            }
        },
        watch: {
            activeTab(val) {
                if (val !== 'mine') onTabBarChange(val);
            }
        }
    });
    app.use(vant);
    app.use(vant.Lazyload);
    app.mount('#app');
</script>
{/block}