// Vue 3 应用配置
const { createApp } = Vue;

createApp({
    // 数据定义
    data() {
        return {
            title: 'Vue个人资料卡片学习示例',
            isDarkTheme: false,
            isEditing: false,
            
            // 个人资料数据
            profile: {
                name: '张小明',
                title: '前端开发工程师',
                age: 25,
                city: '北京',
                email: 'zhangxiaoming@example.com',
                avatar: 'https://via.placeholder.com/120x120/4A90E2/FFFFFF?text=张小明',
                bio: '热爱编程，专注于Vue.js和现代前端技术。喜欢学习新技术，分享技术心得。',
                skills: ['Vue.js', 'JavaScript', 'HTML/CSS', 'Node.js', 'Git']
            },
            
            // 编辑时的临时数据
            editProfile: {}
        }
    },
    
    // 方法定义
    methods: {
        // 切换编辑模式
        toggleEdit() {
            if (this.isEditing) {
                // 保存编辑的数据
                this.saveProfile();
            } else {
                // 进入编辑模式，复制当前数据到编辑对象
                this.editProfile = { ...this.profile };
            }
            this.isEditing = !this.isEditing;
        },
        
        // 保存个人资料
        saveProfile() {
            // 验证数据
            if (this.editProfile.name && this.editProfile.title) {
                this.profile = { ...this.editProfile };
                this.showMessage('个人资料已更新！', 'success');
            } else {
                this.showMessage('请填写姓名和职位！', 'error');
                return;
            }
        },
        
        // 切换主题
        toggleTheme() {
            this.isDarkTheme = !this.isDarkTheme;
            this.showMessage(
                `已切换到${this.isDarkTheme ? '深色' : '浅色'}主题`, 
                'info'
            );
        },
        
        // 显示消息提示
        showMessage(message, type = 'info') {
            // 创建消息元素
            const messageEl = document.createElement('div');
            messageEl.className = `message message-${type}`;
            messageEl.textContent = message;
            
            // 添加到页面
            document.body.appendChild(messageEl);
            
            // 3秒后自动移除
            setTimeout(() => {
                if (messageEl.parentNode) {
                    messageEl.parentNode.removeChild(messageEl);
                }
            }, 3000);
        },
        
        // 重置资料到默认值
        resetProfile() {
            this.profile = {
                name: '张小明',
                title: '前端开发工程师',
                age: 25,
                city: '北京',
                email: 'zhangxiaoming@example.com',
                avatar: 'https://via.placeholder.com/120x120/4A90E2/FFFFFF?text=张小明',
                bio: '热爱编程，专注于Vue.js和现代前端技术。喜欢学习新技术，分享技术心得。',
                skills: ['Vue.js', 'JavaScript', 'HTML/CSS', 'Node.js', 'Git']
            };
            this.showMessage('已重置为默认资料', 'info');
        }
    },
    
    // 计算属性
    computed: {
        // 计算年龄段
        ageGroup() {
            if (this.profile.age < 25) return '年轻有为';
            if (this.profile.age < 35) return '正值壮年';
            return '经验丰富';
        },
        
        // 技能数量
        skillCount() {
            return this.profile.skills.length;
        }
    },
    
    // 生命周期钩子
    mounted() {
        console.log('Vue应用已挂载！');
        this.showMessage('欢迎使用Vue个人资料卡片！', 'success');
        
        // 从localStorage加载保存的主题设置
        const savedTheme = localStorage.getItem('isDarkTheme');
        if (savedTheme !== null) {
            this.isDarkTheme = JSON.parse(savedTheme);
        }
    },
    
    // 监听器
    watch: {
        // 监听主题变化，保存到localStorage
        isDarkTheme(newValue) {
            localStorage.setItem('isDarkTheme', JSON.stringify(newValue));
        }
    }
}).mount('#app');