<template>
  <!-- 定制简历编辑面板 — 手风琴折叠式，点击模块名展开编辑，失焦/选择后自动调用PUT接口保存 -->
  <div class="job-resume-edit">
    <!-- 遍历所有模块，统一渲染折叠面板 -->
    <div v-for="sec in sectionList" :key="sec.key" class="job-resume-edit__section">
      <!-- 模块标题栏 -->
      <div class="job-resume-edit__section-header" @click="toggle(sec.key)">
        <span class="job-resume-edit__section-title">{{ sec.label }}</span>
        <svg viewBox="0 0 12 12" fill="none" class="job-resume-edit__section-arrow" :class="{ 'job-resume-edit__section-arrow--open': openSections[sec.key] }">
          <path d="M3 4.5l3 3 3-3" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </div>

      <!-- 展开内容区 -->
      <div v-if="openSections[sec.key]" class="job-resume-edit__section-body">

        <!-- ========== 基本信息 ========== -->
        <template v-if="sec.key === 'info'">
          <div class="job-resume-edit__field"><label class="job-resume-edit__label">姓名</label><input class="job-resume-edit__input" placeholder="请输入姓名" v-model="editData.resume.name" @blur="autoSave" /></div>
          <div class="job-resume-edit__field"><label class="job-resume-edit__label">邮箱</label><input class="job-resume-edit__input" type="email" placeholder="请输入邮箱" v-model="editData.resume.email" @blur="autoSave" /></div>
          <div class="job-resume-edit__field"><label class="job-resume-edit__label">电话</label><input class="job-resume-edit__input" type="tel" placeholder="请输入电话" v-model="editData.resume.mobileNumber" @blur="autoSave" /></div>
          <div class="job-resume-edit__field"><label class="job-resume-edit__label">城市</label><input class="job-resume-edit__input" placeholder="请输入城市" v-model="editData.resume.city" @blur="autoSave" /></div>
          <div class="job-resume-edit__field"><label class="job-resume-edit__label">微信</label><input class="job-resume-edit__input" placeholder="请输入微信号" v-model="editData.resume.wechatNumber" @blur="autoSave" /></div>
          <div class="job-resume-edit__field"><label class="job-resume-edit__label">作品集链接</label><input class="job-resume-edit__input" placeholder="请输入作品集链接" v-model="editData.resume.portfolioUrl" @blur="autoSave" /></div>
        </template>

        <!-- ========== 个人概述 ========== -->
        <template v-else-if="sec.key === 'summary'">
          <textarea class="job-resume-edit__textarea" placeholder="请输入个人概述" v-model="editData.resume.summary" rows="4" @blur="autoSave"></textarea>
        </template>

        <!-- ========== 教育经历 ========== -->
        <template v-else-if="sec.key === 'education'">
          <div v-for="(edu, idx) in editData.education" :key="'edu-'+idx" class="job-resume-edit__card">
            <div class="job-resume-edit__card-header">
              <span class="job-resume-edit__card-index"><svg viewBox="0 0 16 16" fill="none" class="job-resume-edit__card-index-dot"><circle cx="8" cy="8" r="3" fill="currentColor"/></svg>教育经历{{ idx + 1 }}</span>
              <button v-if="editData.education.length > 1" class="job-resume-edit__card-delete" @click="removeItem('education', idx)"><svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.2214 3.31982C12.2595 3.43697 12.2595 3.56318 12.2214 3.68034C12.1834 3.79749 12.1092 3.89959 12.0095 3.97201C11.9099 4.04441 11.7899 4.08341 11.6667 4.08341H11.0833L11.0816 4.12483L10.5373 11.7495C10.5235 11.9445 10.4608 12.1328 10.3552 12.2972C10.2496 12.4617 10.1044 12.5969 9.93283 12.6906C9.76131 12.7843 9.56901 12.8334 9.37359 12.8334H4.62583C4.4304 12.8334 4.2381 12.7843 4.06658 12.6906C3.89506 12.5969 3.74983 12.4617 3.6442 12.2972C3.53858 12.1328 3.47596 11.9445 3.46209 11.7495L2.91783 4.12541L2.91666 4.08341H2.33334C2.21014 4.08341 2.09011 4.04441 1.99046 3.97201C1.89079 3.89959 1.81662 3.79749 1.77855 3.68034C1.74048 3.56318 1.74048 3.43697 1.77855 3.31982C1.81662 3.20266 1.89079 3.10056 1.99046 3.02815C2.09011 2.95575 2.21014 2.91675 2.33334 2.91675H11.6667C11.7899 2.91675 11.9099 2.95575 12.0095 3.02815C12.1092 3.10056 12.1834 3.20266 12.2214 3.31982ZM4.62632 11.6666H9.37368L9.91504 4.08325H4.08496L4.62632 11.6666Z" fill="#52CAD1"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.72145 1.56981C8.75952 1.68696 8.75952 1.81316 8.72145 1.93031C8.68338 2.04747 8.6092 2.14957 8.50954 2.22197C8.40988 2.29438 8.28986 2.33337 8.16667 2.33337H5.83333C5.71014 2.33337 5.59012 2.29438 5.49046 2.22197C5.3908 2.14957 5.31662 2.04747 5.27855 1.93031C5.24048 1.81316 5.24048 1.68696 5.27855 1.56981C5.31662 1.45265 5.3908 1.35056 5.49046 1.27815C5.59012 1.20574 5.71014 1.16675 5.83333 1.16675H8.16667C8.28986 1.16675 8.40988 1.20574 8.50954 1.27815C8.6092 1.35056 8.68338 1.45265 8.72145 1.56981Z" fill="#52CAD1"/>
</svg>
                <span class="ml5">删除</span>
</button>
            </div>
            <div class="job-resume-edit__field"><label class="job-resume-edit__label">学校</label><input class="job-resume-edit__input" placeholder="请输入学校" v-model="edu.school" @blur="autoSave" /></div>
            <div class="job-resume-edit__field"><label class="job-resume-edit__label">专业</label><input class="job-resume-edit__input" placeholder="请输入专业" v-model="edu.major" @blur="autoSave" /></div>
            <div class="job-resume-edit__row">
              <div class="job-resume-edit__field job-resume-edit__field--half"><label class="job-resume-edit__label">学历类型</label><select class="job-resume-edit__select" v-model="edu.studyType" @change="autoSave"><option value="全日制">全日制</option><option value="非全日制">非全日制</option></select></div>
              <div class="job-resume-edit__field job-resume-edit__field--half"><label class="job-resume-edit__label">学历</label><select class="job-resume-edit__select" v-model="edu.degree" @change="autoSave"><option value="大专">大专</option><option value="本科">本科</option><option value="硕士">硕士</option><option value="博士">博士</option></select></div>
            </div>
            <div class="job-resume-edit__row">
              <div class="job-resume-edit__field job-resume-edit__field--half"><label class="job-resume-edit__label">入学时间</label><el-date-picker v-model="edu.startDate" type="month" placeholder="选择" format="YYYY-MM" value-format="YYYY-MM" class="job-resume-edit__date-picker" :teleported="true" @change="autoSave" /></div>
              <div class="job-resume-edit__field job-resume-edit__field--half"><label class="job-resume-edit__label">毕业时间</label><el-date-picker v-model="edu.endDate" type="month" placeholder="选择" format="YYYY-MM" value-format="YYYY-MM" class="job-resume-edit__date-picker" :teleported="true" @change="autoSave" /></div>
            </div>
            <div class="job-resume-edit__field">
              <label class="job-resume-edit__label">经历描述</label>
              <textarea class="job-resume-edit__textarea" placeholder="请输入描述，每行一条" v-model="descTextMap.education[idx]" rows="4" @blur="syncDescFromText('education', idx)"></textarea>
            </div>
          </div>
          <button class="job-resume-edit__add-btn job-resume-edit__add-btn--full" @click="addItem('education')"><span class="job-resume-edit__add-icon">+</span> 新增教育经历</button>
        </template>

        <!-- ========== 实习经历 ========== -->
        <template v-else-if="sec.key === 'internship'">
          <div v-for="(item, idx) in editData.internship" :key="'intern-'+idx" class="job-resume-edit__card">
            <div class="job-resume-edit__card-header">
              <span class="job-resume-edit__card-index"><svg viewBox="0 0 16 16" fill="none" class="job-resume-edit__card-index-dot"><circle cx="8" cy="8" r="3" fill="currentColor"/></svg>实习经历{{ idx + 1 }}</span>
              <button v-if="editData.internship.length > 1" class="job-resume-edit__card-delete" @click="removeItem('internship', idx)"><svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.2214 3.31982C12.2595 3.43697 12.2595 3.56318 12.2214 3.68034C12.1834 3.79749 12.1092 3.89959 12.0095 3.97201C11.9099 4.04441 11.7899 4.08341 11.6667 4.08341H11.0833L11.0816 4.12483L10.5373 11.7495C10.5235 11.9445 10.4608 12.1328 10.3552 12.2972C10.2496 12.4617 10.1044 12.5969 9.93283 12.6906C9.76131 12.7843 9.56901 12.8334 9.37359 12.8334H4.62583C4.4304 12.8334 4.2381 12.7843 4.06658 12.6906C3.89506 12.5969 3.74983 12.4617 3.6442 12.2972C3.53858 12.1328 3.47596 11.9445 3.46209 11.7495L2.91783 4.12541L2.91666 4.08341H2.33334C2.21014 4.08341 2.09011 4.04441 1.99046 3.97201C1.89079 3.89959 1.81662 3.79749 1.77855 3.68034C1.74048 3.56318 1.74048 3.43697 1.77855 3.31982C1.81662 3.20266 1.89079 3.10056 1.99046 3.02815C2.09011 2.95575 2.21014 2.91675 2.33334 2.91675H11.6667C11.7899 2.91675 11.9099 2.95575 12.0095 3.02815C12.1092 3.10056 12.1834 3.20266 12.2214 3.31982ZM4.62632 11.6666H9.37368L9.91504 4.08325H4.08496L4.62632 11.6666Z" fill="#52CAD1"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.72145 1.56981C8.75952 1.68696 8.75952 1.81316 8.72145 1.93031C8.68338 2.04747 8.6092 2.14957 8.50954 2.22197C8.40988 2.29438 8.28986 2.33337 8.16667 2.33337H5.83333C5.71014 2.33337 5.59012 2.29438 5.49046 2.22197C5.3908 2.14957 5.31662 2.04747 5.27855 1.93031C5.24048 1.81316 5.24048 1.68696 5.27855 1.56981C5.31662 1.45265 5.3908 1.35056 5.49046 1.27815C5.59012 1.20574 5.71014 1.16675 5.83333 1.16675H8.16667C8.28986 1.16675 8.40988 1.20574 8.50954 1.27815C8.6092 1.35056 8.68338 1.45265 8.72145 1.56981Z" fill="#52CAD1"/>
</svg>
                <span class="ml5">删除</span>
</button>
            </div>
            <div class="job-resume-edit__field"><label class="job-resume-edit__label">公司名称</label><input class="job-resume-edit__input" placeholder="请输入公司名称" v-model="item.companyName" @blur="autoSave" /></div>
            <div class="job-resume-edit__field"><label class="job-resume-edit__label">职位</label><input class="job-resume-edit__input" placeholder="请输入职位" v-model="item.position" @blur="autoSave" /></div>
            <div class="job-resume-edit__row">
              <div class="job-resume-edit__field job-resume-edit__field--half"><label class="job-resume-edit__label">开始时间</label><el-date-picker v-model="item.startDate" type="month" placeholder="选择" format="YYYY-MM" value-format="YYYY-MM" class="job-resume-edit__date-picker" :teleported="true" @change="autoSave" /></div>
              <div class="job-resume-edit__field job-resume-edit__field--half"><label class="job-resume-edit__label">结束时间</label><el-date-picker v-model="item.endDate" type="month" placeholder="选择" format="YYYY-MM" value-format="YYYY-MM" class="job-resume-edit__date-picker" :teleported="true" @change="autoSave" /></div>
            </div>
            <div class="job-resume-edit__field">
              <label class="job-resume-edit__label">经历描述</label>
              <textarea class="job-resume-edit__textarea" placeholder="请输入描述，每行一条" v-model="descTextMap.internship[idx]" rows="4" @blur="syncDescFromText('internship', idx)"></textarea>
            </div>
          </div>
          <button class="job-resume-edit__add-btn job-resume-edit__add-btn--full" @click="addItem('internship')"><span class="job-resume-edit__add-icon">+</span> 新增实习经历</button>
        </template>

        <!-- ========== 工作经历 ========== -->
        <template v-else-if="sec.key === 'work'">
          <div v-for="(item, idx) in editData.work" :key="'work-'+idx" class="job-resume-edit__card">
            <div class="job-resume-edit__card-header">
              <span class="job-resume-edit__card-index"><svg viewBox="0 0 16 16" fill="none" class="job-resume-edit__card-index-dot"><circle cx="8" cy="8" r="3" fill="currentColor"/></svg>工作经历{{ idx + 1 }}</span>
              <button v-if="editData.work.length > 1" class="job-resume-edit__card-delete" @click="removeItem('work', idx)"><svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.2214 3.31982C12.2595 3.43697 12.2595 3.56318 12.2214 3.68034C12.1834 3.79749 12.1092 3.89959 12.0095 3.97201C11.9099 4.04441 11.7899 4.08341 11.6667 4.08341H11.0833L11.0816 4.12483L10.5373 11.7495C10.5235 11.9445 10.4608 12.1328 10.3552 12.2972C10.2496 12.4617 10.1044 12.5969 9.93283 12.6906C9.76131 12.7843 9.56901 12.8334 9.37359 12.8334H4.62583C4.4304 12.8334 4.2381 12.7843 4.06658 12.6906C3.89506 12.5969 3.74983 12.4617 3.6442 12.2972C3.53858 12.1328 3.47596 11.9445 3.46209 11.7495L2.91783 4.12541L2.91666 4.08341H2.33334C2.21014 4.08341 2.09011 4.04441 1.99046 3.97201C1.89079 3.89959 1.81662 3.79749 1.77855 3.68034C1.74048 3.56318 1.74048 3.43697 1.77855 3.31982C1.81662 3.20266 1.89079 3.10056 1.99046 3.02815C2.09011 2.95575 2.21014 2.91675 2.33334 2.91675H11.6667C11.7899 2.91675 11.9099 2.95575 12.0095 3.02815C12.1092 3.10056 12.1834 3.20266 12.2214 3.31982ZM4.62632 11.6666H9.37368L9.91504 4.08325H4.08496L4.62632 11.6666Z" fill="#52CAD1"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.72145 1.56981C8.75952 1.68696 8.75952 1.81316 8.72145 1.93031C8.68338 2.04747 8.6092 2.14957 8.50954 2.22197C8.40988 2.29438 8.28986 2.33337 8.16667 2.33337H5.83333C5.71014 2.33337 5.59012 2.29438 5.49046 2.22197C5.3908 2.14957 5.31662 2.04747 5.27855 1.93031C5.24048 1.81316 5.24048 1.68696 5.27855 1.56981C5.31662 1.45265 5.3908 1.35056 5.49046 1.27815C5.59012 1.20574 5.71014 1.16675 5.83333 1.16675H8.16667C8.28986 1.16675 8.40988 1.20574 8.50954 1.27815C8.6092 1.35056 8.68338 1.45265 8.72145 1.56981Z" fill="#52CAD1"/>
</svg>
                <span class="ml5">删除</span>
</button>
            </div>
            <div class="job-resume-edit__field"><label class="job-resume-edit__label">公司名称</label><input class="job-resume-edit__input" placeholder="请输入公司名称" v-model="item.companyName" @blur="autoSave" /></div>
            <div class="job-resume-edit__field"><label class="job-resume-edit__label">职位</label><input class="job-resume-edit__input" placeholder="请输入职位" v-model="item.position" @blur="autoSave" /></div>
            <div class="job-resume-edit__row">
              <div class="job-resume-edit__field job-resume-edit__field--half"><label class="job-resume-edit__label">开始时间</label><el-date-picker v-model="item.startDate" type="month" placeholder="选择" format="YYYY-MM" value-format="YYYY-MM" class="job-resume-edit__date-picker" :teleported="true" @change="autoSave" /></div>
              <div class="job-resume-edit__field job-resume-edit__field--half"><label class="job-resume-edit__label">结束时间</label><el-date-picker v-model="item.endDate" type="month" placeholder="选择" format="YYYY-MM" value-format="YYYY-MM" class="job-resume-edit__date-picker" :teleported="true" @change="autoSave" /></div>
            </div>
            <div class="job-resume-edit__field">
              <label class="job-resume-edit__label">经历描述</label>
              <textarea class="job-resume-edit__textarea" placeholder="请输入描述，每行一条" v-model="descTextMap.work[idx]" rows="4" @blur="syncDescFromText('work', idx)"></textarea>
            </div>
          </div>
          <button class="job-resume-edit__add-btn job-resume-edit__add-btn--full" @click="addItem('work')"><span class="job-resume-edit__add-icon">+</span> 新增工作经历</button>
        </template>

        <!-- ========== 项目经历 ========== -->
        <template v-else-if="sec.key === 'project'">
          <div v-for="(item, idx) in editData.project" :key="'proj-'+idx" class="job-resume-edit__card">
            <div class="job-resume-edit__card-header">
              <span class="job-resume-edit__card-index"><svg viewBox="0 0 16 16" fill="none" class="job-resume-edit__card-index-dot"><circle cx="8" cy="8" r="3" fill="currentColor"/></svg>项目经历{{ idx + 1 }}</span>
              <button v-if="editData.project.length > 1" class="job-resume-edit__card-delete" @click="removeItem('project', idx)"><svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.2214 3.31982C12.2595 3.43697 12.2595 3.56318 12.2214 3.68034C12.1834 3.79749 12.1092 3.89959 12.0095 3.97201C11.9099 4.04441 11.7899 4.08341 11.6667 4.08341H11.0833L11.0816 4.12483L10.5373 11.7495C10.5235 11.9445 10.4608 12.1328 10.3552 12.2972C10.2496 12.4617 10.1044 12.5969 9.93283 12.6906C9.76131 12.7843 9.56901 12.8334 9.37359 12.8334H4.62583C4.4304 12.8334 4.2381 12.7843 4.06658 12.6906C3.89506 12.5969 3.74983 12.4617 3.6442 12.2972C3.53858 12.1328 3.47596 11.9445 3.46209 11.7495L2.91783 4.12541L2.91666 4.08341H2.33334C2.21014 4.08341 2.09011 4.04441 1.99046 3.97201C1.89079 3.89959 1.81662 3.79749 1.77855 3.68034C1.74048 3.56318 1.74048 3.43697 1.77855 3.31982C1.81662 3.20266 1.89079 3.10056 1.99046 3.02815C2.09011 2.95575 2.21014 2.91675 2.33334 2.91675H11.6667C11.7899 2.91675 11.9099 2.95575 12.0095 3.02815C12.1092 3.10056 12.1834 3.20266 12.2214 3.31982ZM4.62632 11.6666H9.37368L9.91504 4.08325H4.08496L4.62632 11.6666Z" fill="#52CAD1"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.72145 1.56981C8.75952 1.68696 8.75952 1.81316 8.72145 1.93031C8.68338 2.04747 8.6092 2.14957 8.50954 2.22197C8.40988 2.29438 8.28986 2.33337 8.16667 2.33337H5.83333C5.71014 2.33337 5.59012 2.29438 5.49046 2.22197C5.3908 2.14957 5.31662 2.04747 5.27855 1.93031C5.24048 1.81316 5.24048 1.68696 5.27855 1.56981C5.31662 1.45265 5.3908 1.35056 5.49046 1.27815C5.59012 1.20574 5.71014 1.16675 5.83333 1.16675H8.16667C8.28986 1.16675 8.40988 1.20574 8.50954 1.27815C8.6092 1.35056 8.68338 1.45265 8.72145 1.56981Z" fill="#52CAD1"/>
</svg>
                <span class="ml5">删除</span>
</button>
            </div>
            <div class="job-resume-edit__field"><label class="job-resume-edit__label">项目名称</label><input class="job-resume-edit__input" placeholder="请输入项目名称" v-model="item.projectName" @blur="autoSave" /></div>
            <div class="job-resume-edit__field"><label class="job-resume-edit__label">所属公司</label><input class="job-resume-edit__input" placeholder="请输入所属公司" v-model="item.companyName" @blur="autoSave" /></div>
            <div class="job-resume-edit__field"><label class="job-resume-edit__label">项目角色</label><input class="job-resume-edit__input" placeholder="请输入项目角色" v-model="item.role" @blur="autoSave" /></div>
            <div class="job-resume-edit__row">
              <div class="job-resume-edit__field job-resume-edit__field--half"><label class="job-resume-edit__label">开始时间</label><el-date-picker v-model="item.startDate" type="month" placeholder="选择" format="YYYY-MM" value-format="YYYY-MM" class="job-resume-edit__date-picker" :teleported="true" @change="autoSave" /></div>
              <div class="job-resume-edit__field job-resume-edit__field--half"><label class="job-resume-edit__label">结束时间</label><el-date-picker v-model="item.endDate" type="month" placeholder="选择" format="YYYY-MM" value-format="YYYY-MM" class="job-resume-edit__date-picker" :teleported="true" @change="autoSave" /></div>
            </div>
            <div class="job-resume-edit__field">
              <label class="job-resume-edit__label">经历描述</label>
              <textarea class="job-resume-edit__textarea" placeholder="请输入描述，每行一条" v-model="descTextMap.project[idx]" rows="4" @blur="syncDescFromText('project', idx)"></textarea>
            </div>
          </div>
          <button class="job-resume-edit__add-btn job-resume-edit__add-btn--full" @click="addItem('project')"><span class="job-resume-edit__add-icon">+</span> 新增项目经历</button>
        </template>

        <!-- ========== 竞赛 ========== -->
        <template v-else-if="sec.key === 'competition'">
          <div v-for="(item, idx) in editData.competition" :key="'comp-'+idx" class="job-resume-edit__card">
            <div class="job-resume-edit__card-header">
              <span class="job-resume-edit__card-index"><svg viewBox="0 0 16 16" fill="none" class="job-resume-edit__card-index-dot"><circle cx="8" cy="8" r="3" fill="currentColor"/></svg>竞赛经历{{ idx + 1 }}</span>
              <button v-if="editData.competition.length > 1" class="job-resume-edit__card-delete" @click="removeItem('competition', idx)">
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.2214 3.31982C12.2595 3.43697 12.2595 3.56318 12.2214 3.68034C12.1834 3.79749 12.1092 3.89959 12.0095 3.97201C11.9099 4.04441 11.7899 4.08341 11.6667 4.08341H11.0833L11.0816 4.12483L10.5373 11.7495C10.5235 11.9445 10.4608 12.1328 10.3552 12.2972C10.2496 12.4617 10.1044 12.5969 9.93283 12.6906C9.76131 12.7843 9.56901 12.8334 9.37359 12.8334H4.62583C4.4304 12.8334 4.2381 12.7843 4.06658 12.6906C3.89506 12.5969 3.74983 12.4617 3.6442 12.2972C3.53858 12.1328 3.47596 11.9445 3.46209 11.7495L2.91783 4.12541L2.91666 4.08341H2.33334C2.21014 4.08341 2.09011 4.04441 1.99046 3.97201C1.89079 3.89959 1.81662 3.79749 1.77855 3.68034C1.74048 3.56318 1.74048 3.43697 1.77855 3.31982C1.81662 3.20266 1.89079 3.10056 1.99046 3.02815C2.09011 2.95575 2.21014 2.91675 2.33334 2.91675H11.6667C11.7899 2.91675 11.9099 2.95575 12.0095 3.02815C12.1092 3.10056 12.1834 3.20266 12.2214 3.31982ZM4.62632 11.6666H9.37368L9.91504 4.08325H4.08496L4.62632 11.6666Z" fill="#52CAD1"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.72145 1.56981C8.75952 1.68696 8.75952 1.81316 8.72145 1.93031C8.68338 2.04747 8.6092 2.14957 8.50954 2.22197C8.40988 2.29438 8.28986 2.33337 8.16667 2.33337H5.83333C5.71014 2.33337 5.59012 2.29438 5.49046 2.22197C5.3908 2.14957 5.31662 2.04747 5.27855 1.93031C5.24048 1.81316 5.24048 1.68696 5.27855 1.56981C5.31662 1.45265 5.3908 1.35056 5.49046 1.27815C5.59012 1.20574 5.71014 1.16675 5.83333 1.16675H8.16667C8.28986 1.16675 8.40988 1.20574 8.50954 1.27815C8.6092 1.35056 8.68338 1.45265 8.72145 1.56981Z" fill="#52CAD1"/>
</svg>

                <span class="ml5">删除</span></button>
            </div>
            <div class="job-resume-edit__field"><label class="job-resume-edit__label">竞赛名称</label><input class="job-resume-edit__input" placeholder="请输入竞赛名称" v-model="item.competitionName" @blur="autoSave" /></div>
            <div class="job-resume-edit__field"><label class="job-resume-edit__label">获奖名次</label><input class="job-resume-edit__input" placeholder="请输入获奖名次" v-model="item.award" @blur="autoSave" /></div>
            <div class="job-resume-edit__field"><label class="job-resume-edit__label">获奖时间</label><el-date-picker v-model="item.awardDate" type="month" placeholder="选择" format="YYYY-MM" value-format="YYYY-MM" class="job-resume-edit__date-picker" :teleported="true" @change="autoSave" /></div>
            <div class="job-resume-edit__field">
              <label class="job-resume-edit__label">获奖描述</label>
              <textarea class="job-resume-edit__textarea" placeholder="请输入获奖描述" v-model="item.description[0].text" rows="3" @blur="autoSave"></textarea>
            </div>
          </div>
          <button class="job-resume-edit__add-btn job-resume-edit__add-btn--full" @click="addItem('competition')"><span class="job-resume-edit__add-icon">+</span> 新增竞赛</button>
        </template>

        <!-- ========== 证书 ========== -->
        <template v-else-if="sec.key === 'certificate'">
          <div class="job-resume-edit__tags">
            <div v-for="(cert, idx) in editData.resume.certificates" :key="'cert-'+idx" class="job-resume-edit__tag">
              <span>{{ cert }}</span>
              <button class="job-resume-edit__tag-remove" @click="removeTag('certificates', idx)"><svg viewBox="0 0 16 16" fill="none" class="job-resume-edit__tag-remove-icon"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg></button>
            </div>
          </div>
          <div class="job-resume-edit__field">
            <input class="job-resume-edit__input" placeholder="输入证书名称后按回车添加" v-model="newCertInput" @keydown.enter="addTag('certificates')" @blur="addTag('certificates')" />
          </div>
        </template>

        <!-- ========== 技能 ========== -->
        <template v-else-if="sec.key === 'skills'">
          <div class="job-resume-edit__tags">
            <div v-for="(skill, idx) in editData.resume.skills" :key="'skill-'+idx" class="job-resume-edit__tag">
              <span>{{ skill }}</span>
              <button class="job-resume-edit__tag-remove" @click="removeTag('skills', idx)"><svg viewBox="0 0 16 16" fill="none" class="job-resume-edit__tag-remove-icon"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg></button>
            </div>
          </div>
          <div class="job-resume-edit__field">
            <input class="job-resume-edit__input" placeholder="输入技能名称后按回车添加" v-model="newSkillInput" @keydown.enter="addTag('skills')" @blur="addTag('skills')" />
          </div>
        </template>

      </div>
    </div>
  </div>
</template>


<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import { updateCustomizeResume } from '@/api/jobs'
import type { CustomizeResumeData } from '@/api/jobs'

// ==================== 类型定义 ====================

/** 描述段落 */
interface DescParagraph {
  id: string
  text: string
}

/** 教育经历编辑项 */
interface EduEditItem {
  id: string; school: string; major: string; degree: string; studyType: string
  startDate: string; endDate: string; description: DescParagraph[]
}

/** 工作/实习经历编辑项 */
interface WorkEditItem {
  id: string; companyName: string; position: string
  startDate: string; endDate: string; description: DescParagraph[]
}

/** 项目经历编辑项 */
interface ProjectEditItem {
  id: string; companyName: string; projectName: string; role: string
  startDate: string; endDate: string; description: DescParagraph[]
}

/** 竞赛经历编辑项 */
interface CompEditItem {
  id: string; competitionName: string; award: string; awardDate: string
  description: DescParagraph[]
}

/** 编辑数据完整结构 */
interface EditFormData {
  resume: {
    avatarUrl: string; name: string; email: string; mobileNumber: string
    city: string; wechatNumber: string; portfolioUrl: string
    skills: string[]; certificates: string[]; summary: string
  }
  education: EduEditItem[]
  work: WorkEditItem[]
  internship: WorkEditItem[]
  project: ProjectEditItem[]
  competition: CompEditItem[]
}

// ==================== Props ====================

const props = defineProps<{
  /** 定制简历数据（从父组件传入） */
  resumeData: CustomizeResumeData
  /** 岗位ID（父组件传入，用于自动保存接口调用） */
  jobId: string
}>()

/** 数据变更时通知父组件同步更新简历模板预览 */
const emit = defineEmits<{
  (e: 'update', data: CustomizeResumeData): void
}>()

// ==================== 模块列表配置 ====================

/** 折叠面板模块列表 */
const sectionList = [
  { key: 'info', label: '基本信息' },
  { key: 'summary', label: '个人概述' },
  { key: 'education', label: '教育经历' },
  { key: 'internship', label: '实习经历' },
  { key: 'work', label: '工作经历' },
  { key: 'project', label: '项目经历' },
  { key: 'competition', label: '竞赛' },
  { key: 'certificate', label: '证书' },
  { key: 'skills', label: '技能' },
]

/** 各模块展开状态 */
const openSections = reactive<Record<string, boolean>>({
  info: false, summary: false, education: false, internship: false,
  work: false, project: false, competition: false, certificate: false,
  skills: false,
})

/** 切换模块展开/收起 */
function toggle(key: string) {
  openSections[key] = !openSections[key]
}

// ==================== 编辑数据 ====================

/** 生成短随机ID */
function genId(): string {
  return Math.random().toString(36).substring(2, 8)
}

/** 编辑表单数据（响应式） */
const editData = reactive<EditFormData>({
  resume: { avatarUrl: '', name: '', email: '', mobileNumber: '', city: '', wechatNumber: '', portfolioUrl: '', skills: [], certificates: [], summary: '' },
  education: [],
  work: [],
  internship: [],
  project: [],
  competition: [],
})

/** 从 props.resumeData 初始化编辑数据 */
function initEditData(data: CustomizeResumeData) {
  const r = data.resume || {}
  editData.resume.avatarUrl = r.avatarUrl || ''
  editData.resume.name = r.name || ''
  editData.resume.email = r.email || ''
  editData.resume.mobileNumber = r.mobileNumber || ''
  editData.resume.city = r.city || ''
  editData.resume.wechatNumber = r.wechatNumber || ''
  editData.resume.portfolioUrl = r.portfolioUrl || ''
  editData.resume.skills = r.skills ? [...r.skills] : []
  editData.resume.certificates = r.certificates ? [...r.certificates] : []
  editData.resume.summary = r.summary || ''

  editData.education = (data.education || []).map(e => ({
    id: e.id || genId(), school: e.school || '', major: e.major || '',
    degree: e.degree || '本科', studyType: e.studyType || '全日制',
    startDate: e.startDate || '', endDate: e.endDate || '',
    description: (e.description || []).map(d => ({ id: d.id || genId(), text: d.text || '' })),
  }))

  editData.work = (data.work || []).map(w => ({
    id: w.id || genId(), companyName: w.companyName || '', position: w.position || '',
    startDate: w.startDate || '', endDate: w.endDate || '',
    description: (w.description || []).map(d => ({ id: d.id || genId(), text: d.text || '' })),
  }))

  editData.internship = (data.internship || []).map(i => ({
    id: i.id || genId(), companyName: i.companyName || '', position: i.position || '',
    startDate: i.startDate || '', endDate: i.endDate || '',
    description: (i.description || []).map(d => ({ id: d.id || genId(), text: d.text || '' })),
  }))

  editData.project = (data.project || []).map(p => ({
    id: p.id || genId(), companyName: p.companyName || '', projectName: p.projectName || '',
    role: p.role || '', startDate: p.startDate || '', endDate: p.endDate || '',
    description: (p.description || []).map(d => ({ id: d.id || genId(), text: d.text || '' })),
  }))

  editData.competition = (data.competition || []).map(c => ({
    id: c.id || genId(), competitionName: c.competitionName || '', award: c.award || '',
    awardDate: c.awardDate || '',
    description: c.description?.length ? c.description.map(d => ({ id: d.id || genId(), text: d.text || '' })) : [{ id: genId(), text: '' }],
  }))
}

// ==================== 描述文本映射（合并编辑用） ====================

/** 每个模块每条经历的描述文本（将description数组用换行拼成单个字符串） */
const descTextMap = reactive<Record<string, string[]>>({
  education: [],
  work: [],
  internship: [],
  project: [],
})

/** 从 editData 的 description 数组生成合并文本 */
function buildDescTextMap() {
  descTextMap.education = editData.education.map(e => e.description.map(d => d.text).join('\n'))
  descTextMap.work = editData.work.map(w => w.description.map(d => d.text).join('\n'))
  descTextMap.internship = editData.internship.map(i => i.description.map(d => d.text).join('\n'))
  descTextMap.project = editData.project.map(p => p.description.map(d => d.text).join('\n'))
}

/** 将文本框内容按换行拆分回 description 数组，并触发自动保存 */
function syncDescFromText(type: 'education' | 'work' | 'internship' | 'project', itemIdx: number) {
  const text = descTextMap[type][itemIdx] || ''
  const lines = text.split('\n').filter(s => s.trim())
  const oldDesc = editData[type][itemIdx].description
  // 保留原有id，超出的生成新id
  const newDesc: DescParagraph[] = lines.map((line, i) => ({
    id: i < oldDesc.length ? oldDesc[i].id : genId(),
    text: line,
  }))
  // 如果全部为空则保留一个空描述
  editData[type][itemIdx].description = newDesc.length ? newDesc : [{ id: genId(), text: '' }]
  autoSave()
}

/** 监听 props 变化，初始化编辑数据 */
watch(() => props.resumeData, (val) => {
  if (val) {
    initEditData(val)
    buildDescTextMap()
  }
}, { immediate: true, deep: true })

// ==================== 自动保存（失焦/选择后触发PUT接口） ====================

/** 防抖定时器 */
let saveTimer: ReturnType<typeof setTimeout> | null = null

/** 将编辑数据转换为接口所需的 CustomizeResumeData 格式 */
function buildSavePayload(): CustomizeResumeData {
  return {
    // 主表字段：以原始数据为基础，覆盖编辑数据，确保不丢失任何字段
    resume: {
      ...(props.resumeData?.resume || {}),
      avatarUrl: editData.resume.avatarUrl,
      name: editData.resume.name,
      email: editData.resume.email,
      mobileNumber: editData.resume.mobileNumber,
      city: editData.resume.city,
      wechatNumber: editData.resume.wechatNumber,
      portfolioUrl: editData.resume.portfolioUrl,
      skills: [...editData.resume.skills],
      certificates: [...editData.resume.certificates],
      summary: editData.resume.summary,
    },
    education: editData.education.map(e => ({
      id: e.id, school: e.school, major: e.major, degree: e.degree,
      studyType: e.studyType, startDate: e.startDate, endDate: e.endDate,
      description: e.description.map(d => ({ id: d.id, text: d.text })),
    })),
    work: editData.work.map(w => ({
      id: w.id, companyName: w.companyName, position: w.position,
      startDate: w.startDate, endDate: w.endDate,
      description: w.description.map(d => ({ id: d.id, text: d.text })),
    })),
    internship: editData.internship.map(i => ({
      id: i.id, companyName: i.companyName, position: i.position,
      startDate: i.startDate, endDate: i.endDate,
      description: i.description.map(d => ({ id: d.id, text: d.text })),
    })),
    project: editData.project.map(p => ({
      id: p.id, companyName: p.companyName, projectName: p.projectName,
      role: p.role, startDate: p.startDate, endDate: p.endDate,
      description: p.description.map(d => ({ id: d.id, text: d.text })),
    })),
    competition: editData.competition.map(c => ({
      id: c.id, competitionName: c.competitionName, award: c.award,
      awardDate: c.awardDate,
      description: c.description.map(d => ({ id: d.id, text: d.text })),
    })),
  }
}

/** 自动保存 — 防抖300ms后调用PUT接口，同时通知父组件更新预览 */
function autoSave() {
  if (saveTimer) clearTimeout(saveTimer)
  saveTimer = setTimeout(async () => {
    const payload = buildSavePayload()
    // 通知父组件同步更新简历模板预览
    emit('update', payload)
    try {
      await updateCustomizeResume(payload,props.jobId)
    } catch (e) {
      console.error('[JobResumeCustomEditPanel] 自动保存失败', e)
    }
  }, 300)
}

// ==================== 列表操作（新增/删除条目、描述段落） ====================

/** 新增一条经历记录 */
function addItem(type: 'education' | 'work' | 'internship' | 'project' | 'competition') {
  const id = genId()
  const emptyDesc: DescParagraph[] = [{ id: genId(), text: '' }]
  if (type === 'education') {
    editData.education.push({ id, school: '', major: '', degree: '本科', studyType: '全日制', startDate: '', endDate: '', description: emptyDesc })
    descTextMap.education.push('')
  } else if (type === 'work') {
    editData.work.push({ id, companyName: '', position: '', startDate: '', endDate: '', description: emptyDesc })
    descTextMap.work.push('')
  } else if (type === 'internship') {
    editData.internship.push({ id, companyName: '', position: '', startDate: '', endDate: '', description: emptyDesc })
    descTextMap.internship.push('')
  } else if (type === 'project') {
    editData.project.push({ id, companyName: '', projectName: '', role: '', startDate: '', endDate: '', description: emptyDesc })
    descTextMap.project.push('')
  } else if (type === 'competition') {
    editData.competition.push({ id, competitionName: '', award: '', awardDate: '', description: emptyDesc })
  }
  autoSave()
}

/** 删除一条经历记录 */
function removeItem(type: 'education' | 'work' | 'internship' | 'project' | 'competition', idx: number) {
  editData[type].splice(idx, 1)
  // 同步更新描述文本映射
  if (type !== 'competition' && descTextMap[type]) {
    descTextMap[type].splice(idx, 1)
  }
  autoSave()
}

// ==================== 标签操作（技能/证书） ====================

/** 新技能输入 */
const newSkillInput = ref('')
/** 新证书输入 */
const newCertInput = ref('')

/** 添加标签（技能或证书） */
function addTag(field: 'skills' | 'certificates') {
  const inputRef = field === 'skills' ? newSkillInput : newCertInput
  const val = inputRef.value.trim()
  if (!val) { inputRef.value = ''; return }
  const list = editData.resume[field]
  if (!list.includes(val)) {
    list.push(val)
    autoSave()
  }
  inputRef.value = ''
}

/** 删除标签 */
function removeTag(field: 'skills' | 'certificates', idx: number) {
  editData.resume[field].splice(idx, 1)
  autoSave()
}
</script>
