<template>
  <AppLayout backGorundColor="#FFFFFF">
    <view class="resume-example-container">
      <!-- 职业选择 -->
      <view class="job-selector">
        <view 
          class="job-option" 
          :class="{ active: selectedJob === job.value }"
          v-for="job in jobTypes" 
          :key="job.value"
          @click="selectJob(job.value)"
        >
          {{ job.label }}
        </view>
      </view>

      <!-- 简历示例内容 -->
      <view class="resume-content">
        <view class="resume-header">
          <view class="name">{{ resumeData.name }}</view>
          <view class="contact-info">
            <text v-if="resumeData.phone">{{ resumeData.phone }} | </text>
            <text v-if="resumeData.email">{{ resumeData.email }} | </text>
            <text v-if="resumeData.location">{{ resumeData.location }}</text>
          </view>
        </view>

        <view class="resume-section" v-if="resumeData.education && resumeData.education.length > 0">
          <view class="section-title">教育背景</view>
          <view class="section-content">
            <view class="education-item" v-for="(edu, index) in resumeData.education" :key="index">
              <view class="edu-header">
                <text class="school">{{ edu.school }}</text>
                <text class="date">{{ edu.date }}</text>
              </view>
              <view class="degree">{{ edu.degree }} - {{ edu.major }}</view>
              <view class="desc" v-if="edu.desc">{{ edu.desc }}</view>
            </view>
          </view>
        </view>

        <view class="resume-section" v-if="resumeData.skills && resumeData.skills.length > 0">
          <view class="section-title">技能专长</view>
          <view class="section-content">
            <view class="skills-grid">
              <view class="skill-tag" v-for="(skill, index) in resumeData.skills" :key="index">
                {{ skill }}
              </view>
            </view>
          </view>
        </view>

        <view class="resume-section" v-if="resumeData.experience && resumeData.experience.length > 0">
          <view class="section-title">工作经历</view>
          <view class="section-content">
            <view class="experience-item" v-for="(exp, index) in resumeData.experience" :key="index">
              <view class="exp-header">
                <text class="company">{{ exp.company }}</text>
                <text class="date">{{ exp.date }}</text>
              </view>
              <view class="position">{{ exp.position }}</view>
              <view class="responsibilities">
                <view class="resp-item" v-for="(resp, idx) in exp.responsibilities" :key="idx">
                  {{ resp }}
                </view>
              </view>
            </view>
          </view>
        </view>

        <view class="resume-section" v-if="resumeData.projects && resumeData.projects.length > 0">
          <view class="section-title">项目经验</view>
          <view class="section-content">
            <view class="project-item" v-for="(project, index) in resumeData.projects" :key="index">
              <view class="project-header">
                <text class="project-name">{{ project.name }}</text>
                <text class="date">{{ project.date }}</text>
              </view>
              <view class="project-role">{{ project.role }}</view>
              <view class="project-desc">{{ project.desc }}</view>
              <view class="achievements">
                <view class="achievement-item" v-for="(ach, idx) in project.achievements" :key="idx">
                  ● {{ ach }}
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </AppLayout>
</template>

<script setup>
import { ref, computed } from 'vue';

// 职业类型选项
const jobTypes = [
  { label: '软件工程师', value: 'software-engineer' },
  { label: '产品经理', value: 'product-manager' },
  { label: '市场营销', value: 'marketing' },
  { label: '财务会计', value: 'accountant' },
  { label: '人力资源', value: 'hr' }
];

// 当前选中的职业
const selectedJob = ref('software-engineer');

// 选择职业
const selectJob = (jobValue) => {
  selectedJob.value = jobValue;
};

// 不同职业的简历数据
const resumeSamples = {
  'software-engineer': {
    name: '张伟',
    phone: '138-0000-0000',
    email: 'zhangwei@example.com',
    location: '北京市',
    education: [
      {
        school: '清华大学',
        date: '2016.09 - 2020.06',
        degree: '本科',
        major: '计算机科学与技术',
        desc: '主修课程：数据结构、算法设计、数据库原理、操作系统'
      }
    ],
    experience: [
      {
        company: '腾讯科技有限公司',
        date: '2022.07 - 至今',
        position: '高级前端工程师',
        responsibilities: [
          '负责公司核心产品的前端架构设计和开发',
          '主导团队技术选型，推动Vue3 + TypeScript技术栈落地',
          '优化前端性能，页面加载速度提升40%',
          '指导初级工程师，提升团队整体技术水平'
        ]
      },
      {
        company: '阿里巴巴集团',
        date: '2020.07 - 2022.06',
        position: '前端工程师',
        responsibilities: [
          '参与电商平台前端开发，使用Vue.js框架',
          '负责商品详情页和购物车模块开发',
          '优化页面响应速度，用户体验评分提升25%',
          '编写技术文档，协助测试团队完成测试用例'
        ]
      }
    ],
    skills: [
      'Vue.js', 'React', 'JavaScript', 'TypeScript', 'HTML5', 'CSS3',
      'Node.js', 'Webpack', 'Git', '小程序开发', '响应式设计'
    ],
    projects: [
      {
        name: '电商平台前端重构项目',
        date: '2023.03 - 2023.09',
        role: '前端技术负责人',
        desc: '主导公司核心电商平台的前端重构工作，提升用户体验和系统性能',
        achievements: [
          '采用微前端架构，实现多团队协同开发',
          '页面加载速度提升40%，用户停留时长增加25%',
          '代码可维护性大幅提升，bug率降低30%'
        ]
      }
    ]
  },
  'product-manager': {
    name: '李娜',
    phone: '139-0000-0000',
    email: 'lina@example.com',
    location: '上海市',
    education: [
      {
        school: '复旦大学',
        date: '2015.09 - 2019.06',
        degree: '本科',
        major: '工商管理',
        desc: '主修课程：市场营销、消费者行为学、战略管理'
      }
    ],
    experience: [
      {
        company: '字节跳动',
        date: '2021.05 - 至今',
        position: '高级产品经理',
        responsibilities: [
          '负责短视频产品功能规划和迭代优化',
          '分析用户行为数据，制定产品策略',
          '协调设计、开发、运营团队推进项目落地',
          '跟踪竞品动态，持续优化产品体验'
        ]
      },
      {
        company: '美团',
        date: '2019.07 - 2021.04',
        position: '产品经理',
        responsibilities: [
          '负责外卖商家端产品功能设计',
          '通过数据分析发现业务增长点',
          '推动商户入驻流程优化，提升转化率15%',
          '组织跨部门会议，推进项目进度'
        ]
      }
    ],
    skills: [
      '产品设计', '数据分析', '用户研究', 'Axure', 'SQL',
      '项目管理', '沟通协调', '市场调研', '竞品分析'
    ],
    projects: [
      {
        name: '智能推荐系统优化',
        date: '2023.01 - 2023.06',
        role: '项目经理',
        desc: '优化平台内容推荐算法，提升用户粘性和内容消费时长',
        achievements: [
          '推荐准确率提升20%，用户满意度显著提高',
          '日活跃用户增长12%，内容消费时长增加18%',
          '项目获公司年度创新奖'
        ]
      }
    ]
  },
  'marketing': {
    name: '王强',
    phone: '136-0000-0000',
    email: 'wangqiang@example.com',
    location: '广州市',
    education: [
      {
        school: '中山大学',
        date: '2017.09 - 2021.06',
        degree: '本科',
        major: '市场营销',
        desc: '主修课程：市场营销学、消费者心理学、品牌管理'
      }
    ],
    experience: [
      {
        company: '宝洁公司',
        date: '2021.08 - 至今',
        position: '品牌推广专员',
        responsibilities: [
          '负责洗护用品品牌线上线下推广活动策划',
          '分析市场数据，制定营销策略',
          '协调广告公司和媒体资源',
          '跟踪活动效果，撰写分析报告'
        ]
      }
    ],
    skills: [
      '品牌推广', '社交媒体营销', '数据分析', '活动策划',
      '广告投放', 'SEO/SEM', '内容营销', '客户关系管理'
    ],
    projects: [
      {
        name: '新品上市推广 campaign',
        date: '2023.03 - 2023.05',
        role: '推广负责人',
        desc: '负责公司新款洗发水产品上市的全渠道推广活动',
        achievements: [
          '首月销售额突破500万元，超出预期目标20%',
          '社交媒体话题阅读量超1000万次',
          '成功签约10位知名KOL进行产品推广'
        ]
      }
    ]
  },
  'accountant': {
    name: '陈丽',
    phone: '137-0000-0000',
    email: 'chenli@example.com',
    location: '深圳市',
    education: [
      {
        school: '厦门大学',
        date: '2018.09 - 2022.06',
        degree: '本科',
        major: '会计学',
        desc: '主修课程：财务会计、成本会计、税法、审计'
      }
    ],
    experience: [
      {
        company: '德勤会计师事务所',
        date: '2022.07 - 至今',
        position: '审计员',
        responsibilities: [
          '参与多家上市公司年度财务报表审计',
          '编制审计工作底稿，整理审计证据',
          '协助项目经理完成审计报告',
          '与客户沟通解决审计过程中发现的问题'
        ]
      }
    ],
    skills: [
      '财务报表分析', '税务筹划', '审计', 'Excel', 'SAP',
      '财务软件', '成本核算', '风险控制', '财务制度设计'
    ],
    projects: [
      {
        name: '制造业企业年度审计',
        date: '2023.09 - 2024.01',
        role: '审计小组成员',
        desc: '参与大型制造企业的年度财务报表审计工作',
        achievements: [
          '发现并纠正财务处理错误3处，涉及金额约200万元',
          '优化审计流程，提高工作效率15%',
          '协助企业完善内控制度，获得客户高度评价'
        ]
      }
    ]
  },
  'hr': {
    name: '赵敏',
    phone: '135-0000-0000',
    email: 'zhaomin@example.com',
    location: '杭州市',
    education: [
      {
        school: '浙江大学',
        date: '2019.09 - 2023.06',
        degree: '本科',
        major: '人力资源管理',
        desc: '主修课程：人力资源管理、组织行为学、薪酬管理'
      }
    ],
    experience: [
      {
        company: '华为技术有限公司',
        date: '2023.07 - 至今',
        position: '人力资源专员',
        responsibilities: [
          '负责员工招聘、面试安排和入职培训',
          '协助制定员工绩效考核方案',
          '处理员工关系问题，维护良好工作氛围',
          '管理员工档案和薪酬福利'
        ]
      }
    ],
    skills: [
      '招聘面试', '员工培训', '绩效管理', '劳动关系',
      '薪酬福利', 'HR系统', '沟通协调', '团队建设'
    ],
    projects: [
      {
        name: '新员工培训体系优化',
        date: '2024.01 - 2024.03',
        role: '项目负责人',
        desc: '优化公司新员工培训体系，提升培训效果',
        achievements: [
          '建立标准化培训流程，培训满意度提升25%',
          '开发在线学习平台，节省培训成本30%',
          '新员工试用期通过率提高至95%'
        ]
      }
    ]
  }
};

// 当前显示的简历数据
const resumeData = computed(() => {
  return resumeSamples[selectedJob.value] || resumeSamples['software-engineer'];
});
</script>

<style lang="scss" scoped>
.resume-example-container {
  padding: 32rpx;
  background: #FFFFFF;
  min-height: 100vh;
}

.job-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  margin-bottom: 32rpx;
  
  .job-option {
    padding: 16rpx 24rpx;
    background: #F5F5F5;
    border-radius: 6rpx;
    font-size: 26rpx;
    color: #666666;
    cursor: pointer;
    
    &.active {
      background: #1A1A1A;
      color: #FFFFFF;
    }
  }
}

.resume-content {
  background: #FFFFFF;
  border-radius: 8rpx;
  padding: 32rpx;
  border: 1rpx solid #F0F0F0;
}

.resume-header {
  text-align: center;
  margin-bottom: 32rpx;
  padding-bottom: 24rpx;
  border-bottom: 1rpx solid #F0F0F0;
  
  .name {
    font-size: 40rpx;
    font-weight: 600;
    color: #1A1A1A;
    margin-bottom: 16rpx;
  }
  
  .contact-info {
    font-size: 26rpx;
    color: #666666;
    line-height: 1.6;
  }
}

.resume-section {
  margin-bottom: 32rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
  
  .section-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #1A1A1A;
    margin-bottom: 20rpx;
    padding-bottom: 12rpx;
    border-bottom: 1rpx solid #F0F0F0;
  }
  
  .section-content {
    padding-left: 0;
  }
}

.education-item, .experience-item, .project-item {
  margin-bottom: 24rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.edu-header, .exp-header, .project-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8rpx;
  
  .school, .company, .project-name {
    font-size: 28rpx;
    font-weight: 600;
    color: #1A1A1A;
  }
  
  .date {
    font-size: 24rpx;
    color: #666666;
  }
}

.degree, .position, .project-role {
  font-size: 26rpx;
  color: #1A1A1A;
  margin-bottom: 8rpx;
  font-weight: 500;
}

.desc, .project-desc {
  font-size: 24rpx;
  color: #666666;
  line-height: 1.5;
}

.responsibilities, .achievements {
  margin-top: 8rpx;
  
  .resp-item, .achievement-item {
    font-size: 24rpx;
    color: #666666;
    line-height: 1.6;
    margin-bottom: 6rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
}

.skills-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  
  .skill-tag {
    padding: 12rpx 20rpx;
    background: #F5F5F5;
    border-radius: 4rpx;
    font-size: 22rpx;
    color: #1A1A1A;
  }
}
</style>
