<template>
  <div class="profile-page-content">
        <!-- 个人信息 -->
        <div class="profile-page-content__card">
          <div class="profile-page-content__card-header">
            <h3 class="profile-page-content__card-title">个人信息</h3>
            <button class="profile-page-content__edit-btn" @click="handleEdit('info')">
              <svg viewBox="0 0 16 16" fill="none" class="profile-page-content__edit-icon"><path d="M11.5 2.5l2 2L5 13H3v-2l8.5-8.5z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/></svg>
            </button>
          </div>
          <div class="profile-page-content__info-name">{{ profile.name }}</div>
          <div class="profile-page-content__info-contacts">
            <span class="profile-page-content__contact-item">📱 {{ profile.phone }}</span>
            <span class="profile-page-content__contact-item">✉️ {{ profile.email }}</span>
            <span class="profile-page-content__contact-item">📍 {{ resolveRegionName(profile.regionCode) }}</span>
          </div>
          <div class="profile-page-content__info-contacts" v-if="profile.wechat">
            <span class="profile-page-content__contact-item">💬 {{ profile.wechat }}</span>
          </div>
        </div>

        <!-- 作品集 -->
        <div class="profile-page-content__card">
          <div class="profile-page-content__card-header">
            <h3 class="profile-page-content__card-title">作品集</h3>
            <button class="profile-page-content__edit-btn" @click="handleEdit('portfolio')">
              <svg viewBox="0 0 16 16" fill="none" class="profile-page-content__edit-icon"><path d="M11.5 2.5l2 2L5 13H3v-2l8.5-8.5z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/></svg>
            </button>
          </div>
          <!-- 有链接时显示可点击链接 -->
          <a
            v-if="profile.portfolioUrl"
            :href="profile.portfolioUrl"
            target="_blank"
            rel="noopener noreferrer"
            class="profile-page-content__portfolio-link"
          >{{ profile.portfolioUrl }}</a>
          <!-- 无链接时显示占位提示 -->
          <span v-else class="profile-page-content__portfolio-empty">暂未添加作品集链接</span>
        </div>

        <!-- 教育经历 -->
        <div class="profile-page-content__card">
          <div class="profile-page-content__card-header">
            <h3 class="profile-page-content__card-title">教育经历</h3>
            <button class="profile-page-content__edit-btn" @click="handleEdit('education')">
              <svg viewBox="0 0 16 16" fill="none" class="profile-page-content__edit-icon"><path d="M11.5 2.5l2 2L5 13H3v-2l8.5-8.5z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/></svg>
            </button>
          </div>
          <div v-for="(edu, i) in profile.education" :key="i" class="profile-page-content__section-item">
            <div class="profile-page-content__item-row">
              <div class="profile-page-content__item-left">
                <div class="profile-page-content__item-title">{{ edu.school }}</div>
                <div class="profile-page-content__item-sub">{{ getDegreeText(edu.studyType, edu.degree) }} · {{ edu.major }}</div>
                <div class="profile-page-content__item-date">{{ edu.startDate }} - {{ edu.endDate }}</div>
              </div>
            </div>
            <ul class="profile-page-content__item-list" v-if="edu.description?.length && edu.description[0]?.text">
              <li v-for="desc in edu.description" :key="desc.id">{{ desc.text }}</li>
            </ul>
          </div>
        </div>

        <!-- 工作经历 -->
        <div class="profile-page-content__card">
          <div class="profile-page-content__card-header">
            <h3 class="profile-page-content__card-title">工作经历</h3>
            <button class="profile-page-content__edit-btn" @click="handleEdit('work')">
              <svg viewBox="0 0 16 16" fill="none" class="profile-page-content__edit-icon"><path d="M11.5 2.5l2 2L5 13H3v-2l8.5-8.5z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/></svg>
            </button>
          </div>
          <div v-for="(exp, i) in profile.works" :key="i" class="profile-page-content__section-item">
            <div class="profile-page-content__item-row">
              <div class="profile-page-content__item-left">
                <div class="profile-page-content__item-title">{{ exp.companyName }}</div>
                <div class="profile-page-content__item-sub">{{ exp.position }}</div>
              </div>
              <div class="profile-page-content__item-period">{{ exp.startDate }} - {{ exp.endDate || '至今' }}</div>
            </div>
            <ul class="profile-page-content__item-list">
              <li v-for="desc in exp.description" :key="desc.id">{{ desc.text }}</li>
            </ul>
          </div>
        </div>

        <!-- 实习经历 -->
        <div class="profile-page-content__card">
          <div class="profile-page-content__card-header">
            <h3 class="profile-page-content__card-title">实习经历</h3>
            <button class="profile-page-content__edit-btn" @click="handleEdit('internship')">
              <svg viewBox="0 0 16 16" fill="none" class="profile-page-content__edit-icon"><path d="M11.5 2.5l2 2L5 13H3v-2l8.5-8.5z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/></svg>
            </button>
          </div>
          <div v-for="(exp, i) in profile.internships" :key="i" class="profile-page-content__section-item">
            <div class="profile-page-content__item-row">
              <div class="profile-page-content__item-left">
                <div class="profile-page-content__item-title">{{ exp.companyName }}</div>
                <div class="profile-page-content__item-sub">{{ exp.position }}</div>
              </div>
              <div class="profile-page-content__item-period">{{ exp.startDate }} - {{ exp.endDate }}</div>
            </div>
            <ul class="profile-page-content__item-list">
              <li v-for="desc in exp.description" :key="desc.id">{{ desc.text }}</li>
            </ul>
          </div>
        </div>

        <!-- 项目经历 -->
        <div class="profile-page-content__card">
          <div class="profile-page-content__card-header">
            <h3 class="profile-page-content__card-title">项目经历</h3>
            <button class="profile-page-content__edit-btn" @click="handleEdit('project')">
              <svg viewBox="0 0 16 16" fill="none" class="profile-page-content__edit-icon"><path d="M11.5 2.5l2 2L5 13H3v-2l8.5-8.5z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/></svg>
            </button>
          </div>
          <div v-for="(proj, i) in profile.projects" :key="i" class="profile-page-content__section-item">
            <div class="profile-page-content__item-row">
              <div class="profile-page-content__item-left">
                <div class="profile-page-content__item-title">{{ proj.projectName }}</div>
                <div class="profile-page-content__item-sub">{{ proj.role }}</div>
              </div>
              <div class="profile-page-content__item-period">{{ proj.startDate }} - {{ proj.endDate }}</div>
            </div>
            <ul class="profile-page-content__item-list">
              <li v-for="desc in proj.description" :key="desc.id">{{ desc.text }}</li>
            </ul>
          </div>
        </div>

        <!-- 技能 -->
        <div class="profile-page-content__card">
          <div class="profile-page-content__card-header">
            <h3 class="profile-page-content__card-title">技能</h3>
            <button class="profile-page-content__edit-btn" @click="handleEdit('skills')">
              <svg viewBox="0 0 16 16" fill="none" class="profile-page-content__edit-icon"><path d="M11.5 2.5l2 2L5 13H3v-2l8.5-8.5z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/></svg>
            </button>
          </div>
          <div class="profile-page-content__tags">
            <span v-for="(skill, i) in profile.skills" :key="i" class="profile-page-content__tag">{{ skill }}</span>
          </div>
        </div>

        <!-- 竞赛 -->
        <div class="profile-page-content__card">
          <div class="profile-page-content__card-header">
            <h3 class="profile-page-content__card-title">竞赛</h3>
            <button class="profile-page-content__edit-btn" @click="handleEdit('competition')">
              <svg viewBox="0 0 16 16" fill="none" class="profile-page-content__edit-icon"><path d="M11.5 2.5l2 2L5 13H3v-2l8.5-8.5z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/></svg>
            </button>
          </div>
          <div v-for="(comp, i) in profile.competitions" :key="i" class="profile-page-content__section-item">
            <div class="profile-page-content__item-row">
              <div class="profile-page-content__item-left">
                <div class="profile-page-content__item-title">{{ comp.competitionName }} · {{ comp.award }}</div>
              </div>
              <div class="profile-page-content__item-period">{{ comp.awardDate }}</div>
            </div>
            <ul class="profile-page-content__item-list" v-if="comp.description[0]?.text">
              <li v-for="desc in comp.description" :key="desc.id">{{ desc.text }}</li>
            </ul>
          </div>
        </div>

        <!-- 证书 -->
        <div class="profile-page-content__card">
          <div class="profile-page-content__card-header">
            <h3 class="profile-page-content__card-title">证书</h3>
            <button class="profile-page-content__edit-btn" @click="handleEdit('certificate')">
              <svg viewBox="0 0 16 16" fill="none" class="profile-page-content__edit-icon"><path d="M11.5 2.5l2 2L5 13H3v-2l8.5-8.5z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/></svg>
            </button>
          </div>
          <div class="profile-page-content__tags">
            <span v-for="(cert, i) in profile.certificates" :key="i" class="profile-page-content__tag">{{ cert }}</span>
          </div>
        </div>
  </div>
</template>

<script setup lang="ts">
import { resolveRegionName } from '@/utils/region'

interface ProfileData {
  name: string
  phone: string
  email: string
  idNumber: string
  /** 所在城市编码 — 对应接口字段 regionCode */
  regionCode: string
  /** 作品集链接 — 对应接口字段 portfolioUrl */
  portfolioUrl: string
  wechat?: string
  education: Array<{
    school: string
    major: string
    studyType: number
    degree: number
    startDate: string
    endDate: string
    description: Array<{ id: string; text: string }>
  }>
  works: Array<{
    companyName: string
    position: string
    startDate: string
    endDate: string
    description: Array<{ id: string; text: string }>
  }>
  internships: Array<{
    companyName: string
    position: string
    startDate: string
    endDate: string
    description: Array<{ id: string; text: string }>
  }>
  projects: Array<{
    projectName: string
    companyName: string
    role: string
    startDate: string
    endDate: string
    description: Array<{ id: string; text: string }>
  }>
  skills: string[]
  competitions: Array<{
    competitionName: string
    award: string
    awardDate: string
    description: Array<{ id: string; text: string }>
  }>
  certificates: string[]
}

const props = defineProps<{
  profile: ProfileData
}>()

const emit = defineEmits<{
  edit: [section: string]
}>()

/** 获取学历文本 — 根据学历类型和学历代码生成显示文本 */
function getDegreeText(studyType: number, degree: number): string {
  const studyTypeText = studyType === 0 ? '全日制' : '非全日制'
  const degreeMap: Record<number, string> = {
    1: '大专',
    2: '本科',
    3: '硕士',
    4: '博士',
  }
  return `${studyTypeText}${degreeMap[degree] || ''}`
}

function handleEdit(section: string) {
  emit('edit', section)
}
</script>

<style scoped lang="scss">
@use '../assets/styles/components/profile-page-content';
</style>
