<template>
    <div class="personal-info-example">
        <div class="container">
            <h1 class="page-title">个人信息弹窗示例</h1>
            
            <div class="example-content">
                <el-card class="demo-card">
                    <template #header>
                        <h3>个人信息弹窗组件</h3>
                    </template>
                    
                    <div class="demo-description">
                        <p>这是一个个人信息编辑弹窗组件，包含以下功能：</p>
                        <ul>
                            <li>✅ 头像上传和预览</li>
                            <li>✅ 昵称编辑（必填，失焦自动保存）</li>
                            <li>✅ 个性签名编辑（失焦自动保存）</li>
                            <li>✅ 手机号显示和修改</li>
                            <li>✅ 豆豆数量显示和查看详情</li>
                            <li>✅ 快捷充值功能</li>
                        </ul>
                    </div>
                    
                    <div class="demo-actions">
                        <el-button 
                            type="primary" 
                            @click="openPersonalInfoModal"
                            :disabled="!isLoggedIn"
                        >
                            {{ isLoggedIn ? '打开个人信息弹窗' : '请先登录' }}
                        </el-button>
                        
                        <el-button 
                            v-if="!isLoggedIn"
                            @click="openLogin"
                        >
                            登录
                        </el-button>
                    </div>
                </el-card>

                <!-- 当前用户信息预览 -->
                <el-card v-if="isLoggedIn" class="user-preview-card">
                    <template #header>
                        <h3>当前用户信息</h3>
                    </template>
                    
                    <div class="user-preview">
                        <div class="user-avatar">
                            <el-avatar :size="60" :src="userInfo.headImage">
                                <el-icon><UserFilled /></el-icon>
                            </el-avatar>
                        </div>
                        <div class="user-details">
                            <div class="user-item">
                                <span class="label">昵称：</span>
                                <span class="value">{{ userInfo.nickName || '未设置' }}</span>
                            </div>
                            <div class="user-item">
                                <span class="label">个性签名：</span>
                                <span class="value">{{ userInfo.personalSignature || '暂无个性签名' }}</span>
                            </div>
                            <div class="user-item">
                                <span class="label">手机号：</span>
                                <span class="value">{{ maskPhoneNumber(userInfo.phone) }}</span>
                            </div>
                            <div class="user-item">
                                <span class="label">豆豆：</span>
                                <span class="value bean-value">{{ userInfo.integerPrice || 0 }}</span>
                            </div>
                        </div>
                    </div>
                </el-card>

                <!-- 组件使用说明 -->
                <el-card class="usage-card">
                    <template #header>
                        <h3>使用说明</h3>
                    </template>
                    
                    <div class="usage-content">
                        <h4>在导航栏中使用：</h4>
                        <p>个人信息弹窗已集成到顶部导航栏中，点击用户头像区域即可打开。</p>
                        
                        <h4>组件特性：</h4>
                        <ul>
                            <li><strong>头像上传：</strong>点击头像可上传新头像，支持jpg、png格式，最大2MB</li>
                            <li><strong>自动保存：</strong>昵称和个性签名在输入框失焦时自动保存</li>
                            <li><strong>手机号修改：</strong>支持通过验证码修改绑定手机号</li>
                            <li><strong>数据联动：</strong>修改后的信息会同步更新到导航栏显示</li>
                            <li><strong>响应式设计：</strong>适配PC端和移动端显示</li>
                        </ul>

                        <h4>代码示例：</h4>
                        <pre><code>&lt;PersonalInfoModal
    v-model="showPersonalInfoModal"
    @success="handlePersonalInfoUpdate"
/&gt;</code></pre>
                    </div>
                </el-card>
            </div>
        </div>

        <!-- 个人信息弹窗 -->
        <PersonalInfoModal
            v-model="showPersonalInfoModal"
            @success="handlePersonalInfoUpdate"
        />
    </div>
</template>

<script>
import { ref, computed, inject } from 'vue';
import { UserFilled } from '@element-plus/icons-vue';
import { useMainStore } from '@/store';
import { AUTH_INJECTION_KEY } from '@/components/auth/AuthProvider.vue';
import PersonalInfoModal from '@/components/common/PersonalInfoModal.vue';

export default {
    name: 'PersonalInfoExample',
    components: {
        UserFilled,
        PersonalInfoModal
    },
    setup() {
        const store = useMainStore();
        const authContext = inject(AUTH_INJECTION_KEY);
        const showPersonalInfoModal = ref(false);

        // 计算属性
        const isLoggedIn = computed(() => store.isAuthenticated);
        const userInfo = computed(() => store.user || {});

        // 手机号脱敏显示
        const maskPhoneNumber = (phone) => {
            if (!phone) return '未绑定';
            if (phone.length === 11) {
                return `${phone.slice(0, 3)} **** ${phone.slice(7)}`;
            }
            return phone;
        };

        // 打开登录弹窗
        const openLogin = () => {
            authContext.openLogin();
        };

        // 打开个人信息弹窗
        const openPersonalInfoModal = () => {
            showPersonalInfoModal.value = true;
        };

        // 处理个人信息更新成功
        const handlePersonalInfoUpdate = () => {
            // 刷新用户信息
            store.fetchUserInfo();
        };

        return {
            isLoggedIn,
            userInfo,
            showPersonalInfoModal,
            maskPhoneNumber,
            openLogin,
            openPersonalInfoModal,
            handlePersonalInfoUpdate
        };
    }
};
</script>

<style lang="scss" scoped>
.personal-info-example {
    min-height: 100vh;
    background: #f5f7fa;
    padding: 20px 0;

    .container {
        max-width: 1000px;
        margin: 0 auto;
        padding: 0 20px;

        .page-title {
            font-size: 28px;
            font-weight: 700;
            color: #0A2463;
            text-align: center;
            margin-bottom: 30px;
        }

        .example-content {
            display: flex;
            flex-direction: column;
            gap: 20px;

            .demo-card,
            .user-preview-card,
            .usage-card {
                .demo-description {
                    margin-bottom: 20px;

                    p {
                        color: #606266;
                        line-height: 1.6;
                        margin-bottom: 12px;
                    }

                    ul {
                        color: #606266;
                        padding-left: 20px;

                        li {
                            line-height: 1.8;
                        }
                    }
                }

                .demo-actions {
                    display: flex;
                    gap: 12px;

                    .el-button--primary {
                        background-color: #0A2463;
                        border-color: #0A2463;

                        &:hover {
                            background-color: #083354;
                            border-color: #083354;
                        }
                    }
                }

                .user-preview {
                    display: flex;
                    align-items: flex-start;
                    gap: 20px;

                    .user-avatar {
                        flex-shrink: 0;
                    }

                    .user-details {
                        flex: 1;

                        .user-item {
                            display: flex;
                            align-items: center;
                            margin-bottom: 12px;

                            .label {
                                font-weight: 500;
                                color: #303133;
                                min-width: 80px;
                            }

                            .value {
                                color: #606266;

                                &.bean-value {
                                    color: #EB8D00;
                                    font-weight: 600;
                                }
                            }
                        }
                    }
                }

                .usage-content {
                    h4 {
                        color: #0A2463;
                        margin: 16px 0 8px 0;
                        font-size: 16px;
                    }

                    p {
                        color: #606266;
                        line-height: 1.6;
                        margin-bottom: 12px;
                    }

                    ul {
                        color: #606266;
                        padding-left: 20px;
                        margin-bottom: 16px;

                        li {
                            line-height: 1.8;
                            margin-bottom: 8px;

                            strong {
                                color: #0A2463;
                            }
                        }
                    }

                    pre {
                        background: #f8f8f8;
                        border: 1px solid #e0e0e0;
                        border-radius: 6px;
                        padding: 16px;
                        overflow-x: auto;

                        code {
                            color: #0A2463;
                            font-family: 'Courier New', monospace;
                            font-size: 14px;
                        }
                    }
                }
            }
        }
    }
}

// 响应式设计
@media (max-width: 768px) {
    .personal-info-example {
        padding: 10px 0;

        .container {
            padding: 0 10px;

            .page-title {
                font-size: 24px;
                margin-bottom: 20px;
            }

            .example-content {
                gap: 16px;

                .demo-card,
                .user-preview-card,
                .usage-card {
                    .demo-actions {
                        flex-direction: column;

                        .el-button {
                            width: 100%;
                        }
                    }

                    .user-preview {
                        flex-direction: column;
                        text-align: center;

                        .user-details {
                            .user-item {
                                flex-direction: column;
                                align-items: flex-start;
                                gap: 4px;

                                .label {
                                    min-width: auto;
                                }
                            }
                        }
                    }

                    .usage-content {
                        pre {
                            padding: 12px;

                            code {
                                font-size: 12px;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style> 