<template>
  <div class="edit-resume">
    <div class="containter">
      <div class="directory">
        <div class="directory-list">
          <div class="directory-first">简历目录</div>
          <div
            v-for="(item, index) in resumeList"
            :key="index"
            v-scroll-to="{ el: '#resume' + index, offset: -100 }"
            class="directory-item"
            :class="state.resumeActive === item.name ? 'directory-active' : ''"
            @click="resumeChange(item)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div ref="scrollRef" class="content">
        <div class="resume-header flx-justify-between">
          <span>我的在线简历</span>
          <span>预览</span>
        </div>
        <div class="resume-main">
          <div id="resume0">
            <div v-show="!state.userInfoShow" class="flx-justify-between">
              <div
                class="user-info"
                @mouseover="mouseover($event, 'user', 0)"
                @mouseleave="mouseleave($event, 'user', 0)"
              >
                <div class="flx-justify-between">
                  <div class="user-name">陈玲</div>
                  <div
                    id="edit-user0"
                    class="flx-align-center"
                    style="color: #177cfa; cursor: pointer; display: none"
                    @click="state.userInfoShow = true"
                  >
                    <el-icon color="#177CFA" style="margin-right: 4px"><i-ep-EditPen /></el-icon>
                    编辑
                  </div>
                </div>
                <el-row>
                  <el-col class="user-label flx-align-center" :span="8">
                    <img src="@/assets/img/icon-resume8.png" width="16" />
                    <span>10年以上经验</span>
                  </el-col>
                  <el-col class="user-label flx-align-center" :span="8">
                    <img src="@/assets/img/icon-resume.png" width="16" />
                    <span>本科</span>
                  </el-col>
                  <el-col class="user-label flx-align-center" :span="8">
                    <img src="@/assets/img/icon-resume1.png" width="16" />
                    <span>离职-随时到岗</span>
                  </el-col>
                  <el-col class="user-label flx-align-center" :span="8">
                    <img src="@/assets/img/icon-resume2.png" width="16" />
                    <span>134****8844</span>
                  </el-col>
                  <el-col class="user-label flx-align-center" :span="8">
                    <img src="@/assets/img/icon-resume3.png" width="16" />
                    <span>yan****</span>
                  </el-col>
                  <el-col class="user-label flx-align-center" :span="8">
                    <img src="@/assets/img/icon-resume4.png" width="16" />
                    <span>11*****456@qq.com</span>
                  </el-col>
                </el-row>
              </div>
              <img
                src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                width="82"
                height="115"
              />
            </div>
            <userInfo v-model:show="state.userInfoShow" />
          </div>

          <div v-show="!state.personalAdvantagesShow" id="resume1" class="resume-item">
            <div class="resume-label flx-center">个人优势</div>
            <div class="resume-content">
              <div
                id="show-advantage0"
                class="flx-justify-between"
                style="align-items: start"
                @mouseover="mouseover($event, 'advantage', 0)"
                @mouseleave="mouseleave($event, 'advantage', 0)"
              >
                <pre>
1.3年景观设计经验，擅长 CAD,PS 等绘图软件，并具较好的审美及创意想法
2.2年市场运营相关工作经验，涉及市场推广、品宣、策划、拓展等。
3.乐观开朗，积极主动，以结果为导向
4.较强的组织能力，成熟的沟通技巧，执行力强并能快速适应变化。
5.善于分析问题，并找出解决方案 6.有管理团队经验，善于激励他人。
            </pre
                >
                <div
                  id="edit-advantage0"
                  class="flx-align-center"
                  style="color: #177cfa; cursor: pointer; display: none"
                  @click="state.personalAdvantagesShow = true"
                >
                  <el-icon color="#177CFA" style="margin-right: 4px"><i-ep-EditPen /></el-icon>
                  编辑
                </div>
              </div>
            </div>
          </div>
          <personalAdvantages v-model:show="state.personalAdvantagesShow" />

          <div id="resume2" class="resume-item">
            <div class="flx-justify-between">
              <div class="resume-label flx-center">期望职位</div>
              <div
                class="flx-align-center"
                style="color: #177cfa; cursor: pointer"
                @click="state.expectedPositionShow = true"
              >
                <el-icon color="#177CFA" style="margin-right: 4px"
                  ><i-ep-CirclePlusFilled
                /></el-icon>
                添加
              </div>
            </div>
            <expectedPosition v-model:show="state.expectedPositionShow" />
            <div class="resume-content">
              <div
                v-for="(item, index) in 1"
                :id="'show-position' + index"
                :key="index"
                @mouseover="mouseover($event, 'position', index)"
                @mouseleave="mouseleave($event, 'position', index)"
              >
                <div class="flx-justify-between">
                  <div>
                    <span>其他职位</span>
                    <el-divider direction="vertical" />
                    <span>10k-15K</span>
                    <el-divider direction="vertical" />
                    <span style="color: #666666">行业不限</span>
                    <el-divider direction="vertical" />
                    <span style="color: #666666">深圳</span>
                  </div>
                  <div
                    :id="'edit-position' + index"
                    class="flx-align-center"
                    style="color: #177cfa; cursor: pointer; display: none"
                  >
                    <el-icon color="#177CFA" style="margin-right: 4px"><i-ep-EditPen /></el-icon>
                    编辑
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div id="resume3" class="resume-item">
            <div class="flx-justify-between">
              <div class="resume-label flx-center">工作经历</div>
              <div
                class="flx-align-center"
                style="color: #177cfa; cursor: pointer"
                @click="state.workExperienceShow = true"
              >
                <el-icon color="#177CFA" style="margin-right: 4px"
                  ><i-ep-CirclePlusFilled
                /></el-icon>
                添加
              </div>
            </div>
            <workExperience v-model:show="state.workExperienceShow" />

            <div class="resume-content">
              <div
                v-for="(item, index) in 1"
                :id="'show-work' + index"
                :key="index"
                @mouseover="mouseover($event, 'work', index)"
                @mouseleave="mouseleave($event, 'work', index)"
              >
                <div class="flx-justify-between" style="margin-bottom: 24px">
                  <div style="font-size: 18px">
                    <span style="margin-right: 20px">深圳</span>
                    <span>商务负责</span>
                  </div>
                  <div>
                    <span id="work-date" style="color: #666666">2016.02-至今</span>
                    <div
                      :id="'edit-work' + index"
                      class="flx-align-center"
                      style="color: #177cfa; cursor: pointer; display: none"
                    >
                      <el-icon color="#177CFA" style="margin-right: 4px"><i-ep-EditPen /></el-icon>
                      编辑
                    </div>
                  </div>
                </div>
                <div class="flx-align-center" style="margin-bottom: 24px">
                  <span class="tag-label">商务</span>
                  <span class="tag-label">市场推广</span>
                </div>
                <div style="margin-bottom: 24px; display: flex">
                  <div style="width: 72px; font-size: 18px">内容：</div>
                  <pre style="flex: 1">
                    1.根据公司的经营策略与市场定位组织市场调研，并依据调研结果制定趴比库18年全年拓展计划及年度销售计划
                    (18年计划开拓5个新城市，为杭州、南京、武汉、成都、重庆)
                  </pre>
                </div>
                <div style="margin-bottom: 24px; display: flex">
                  <div style="width: 72px; font-size: 18px">业绩：</div>
                  <pre style="flex: 1">
                    1.根据公司的经营策略与市场定位组织市场调研，并依据调研结果制定趴比库18年全年拓展计划及年度销售计划
                    (18年计划开拓5个新城市，为杭州、南京、武汉、成都、重庆)
                  </pre>
                </div>
              </div>
            </div>
          </div>

          <div id="resume4" class="resume-item">
            <div class="flx-justify-between">
              <div class="resume-label flx-center">项目经历</div>
              <div
                class="flx-align-center"
                style="color: #177cfa; cursor: pointer"
                @click="state.projectExperienceShow = true"
              >
                <el-icon color="#177CFA" style="margin-right: 4px"
                  ><i-ep-CirclePlusFilled
                /></el-icon>
                添加
              </div>
            </div>
            <projectExperience v-model:show="state.projectExperienceShow" />
            <div class="resume-content">
              <div
                v-for="(item, index) in 1"
                :id="'show-project' + index"
                :key="index"
                @mouseover="mouseover($event, 'project', index)"
                @mouseleave="mouseleave($event, 'project', index)"
              >
                <div class="flx-justify-between" style="margin-bottom: 24px">
                  <div style="font-size: 18px">
                    <span style="margin-right: 20px">深圳</span>
                    <span>商务负责</span>
                  </div>
                  <div>
                    <span id="project-date" style="color: #666666">2016.02-2017.01.01</span>
                    <div
                      :id="'edit-project' + index"
                      class="flx-align-center"
                      style="color: #177cfa; cursor: pointer; display: none"
                    >
                      <el-icon color="#177CFA" style="margin-right: 4px"><i-ep-EditPen /></el-icon>
                      编辑
                    </div>
                  </div>
                </div>
                <div style="margin-bottom: 24px; display: flex">
                  <div style="width: 72px; font-size: 18px">内容：</div>
                  <pre style="flex: 1">
                    1.根据公司的经营策略与市场定位组织市场调研，并依据调研结果制定趴比库18年全年拓展计划及年度销售计划 
                    (18年计划开拓5个新城市，为杭州、南京、武汉、成都、重庆)
                  </pre>
                </div>
              </div>
            </div>
          </div>

          <div id="resume5" class="resume-item">
            <div class="flx-justify-between">
              <div class="resume-label flx-center">教育经历</div>
              <div
                class="flx-align-center"
                style="color: #177cfa; cursor: pointer"
                @click="state.educationExperienceShow = true"
              >
                <el-icon color="#177CFA" style="margin-right: 4px"
                  ><i-ep-CirclePlusFilled
                /></el-icon>
                添加
              </div>
            </div>
            <educationExperience v-model:show="state.educationExperienceShow" />
            <div class="resume-content">
              <div
                v-for="(item, index) in 1"
                :id="'show-education' + index"
                :key="index"
                class="flx-justify-between"
                style="align-items: start"
                @mouseover="mouseover($event, 'education', index)"
                @mouseleave="mouseleave($event, 'education', index)"
              >
                <div style="display: flex">
                  <img src="@/assets/img/icon-resume9.png" width="60" height="60" />
                  <div class="education">
                    <div>
                      <span style="font-size: 18px; margin-right: 16px">青岛大学</span>
                      <span style="color: #666666">2008-2012</span>
                    </div>
                    <div class="flx-justify-between">
                      <span style="margin-right: 16px">园林艺术</span>
                      <span>本科</span>
                    </div>
                  </div>
                </div>
                <div
                  :id="'edit-education' + index"
                  class="flx-align-center"
                  style="color: #177cfa; cursor: pointer; display: none"
                >
                  <el-icon color="#177CFA" style="margin-right: 4px"><i-ep-EditPen /></el-icon>
                  编辑
                </div>
              </div>
            </div>
          </div>

          <div id="resume6" class="resume-item">
            <div class="flx-justify-between">
              <div class="resume-label flx-center" style="width: 170px">自定义添加</div>
              <div class="flx-align-center" style="color: #177cfa; cursor: pointer">
                <el-icon color="#177CFA" style="margin-right: 4px"
                  ><i-ep-CirclePlusFilled
                /></el-icon>
                添加
              </div>
            </div>
            <div class="resume-content">
              <el-row style="width: 100%">
                <el-col :span="11" class="custom-col">
                  <div class="flx-direction-column">
                    <span>资格证书</span>
                    <span style="color: #666666; font-size: 16px; margin-top: 12px"
                      >尽可能选择有含金量的证书</span
                    >
                  </div>
                  <img src="@/assets/img/icon-resume6.png" style="cursor: pointer" />
                </el-col>
                <el-col :span="11" class="custom-col">
                  <div class="flx-direction-column">
                    <span>技能证书</span>
                    <span style="color: #666666; font-size: 16px; margin-top: 12px"
                      >尽可能选择有含金量的证书</span
                    >
                  </div>
                  <img src="@/assets/img/icon-resume6.png" style="cursor: pointer" />
                </el-col>
              </el-row>
            </div>
          </div>

          <div id="resume7" class="resume-item">
            <div class="flx-justify-between">
              <div class="resume-label flx-center">上传简历</div>
              <div class="flx-align-center" style="color: #177cfa; cursor: pointer">
                <el-icon color="#177CFA" style="margin-right: 4px"
                  ><i-ep-CirclePlusFilled
                /></el-icon>
                添加
              </div>
            </div>
            <div class="resume-content">
              <!-- <el-empty description="暂无简历" image-size="100" style="padding: 20px 0" /> -->
              <div
                v-for="(item, index) in 2"
                :id="'show-resume' + index"
                :key="index"
                class="flx-justify-between"
                @mouseover="mouseover($event, 'resume', index)"
                @mouseleave="mouseleave($event, 'resume', index)"
              >
                <div>**简历.pdf</div>
                <div
                  :id="'edit-resume' + index"
                  class="flx-align-center"
                  style="color: #177cfa; cursor: pointer; display: none"
                >
                  <el-icon color="#177CFA" style="margin-right: 4px"><i-ep-EditPen /></el-icon>
                  编辑
                </div>
              </div>
            </div>
          </div>

          <div id="resume8" class="resume-item">
            <div class="flx-justify-between">
              <div class="resume-label flx-center">上传附件</div>
              <div class="flx-align-center" style="color: #177cfa; cursor: pointer">
                <el-icon color="#177CFA" style="margin-right: 4px"
                  ><i-ep-CirclePlusFilled
                /></el-icon>
                添加
              </div>
            </div>
            <div class="resume-content">
              <el-empty description="暂无附件" image-size="100" />
              <!-- <div
                v-for="(item, index) in 2"
                :key="index"
                :id="'show-annex' + index"
                class="flx-justify-between"
                @mouseover="mouseover($event, 'annex', index)"
                @mouseleave="mouseleave($event, 'annex', index)"
              >
                <div>**附件.pdf</div>
                <div
                  :id="'edit-annex' + index"
                  class="flx-align-center"
                  style="color: #177cfa; cursor: pointer; display: none"
                >
                  <el-icon color="#177CFA" style="margin-right: 4px"><i-ep-EditPen /></el-icon>
                  编辑
                </div>
              </div> -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { resumeList } from './config'
import userInfo from './components/userInfo.vue'
import personalAdvantages from './components/personalAdvantages.vue'
import expectedPosition from './components/expectedPosition.vue'
import workExperience from './components/workExperience.vue'
import projectExperience from './components/projectExperience.vue'
import educationExperience from './components/educationExperience.vue'

const state = reactive({
  userInfoShow: false,
  personalAdvantagesShow: false,
  expectedPositionShow: false,
  workExperienceShow: false,
  projectExperienceShow: false,
  educationExperienceShow: false,
  resumeActive: '个人信息'
})
const scrollRef = ref()

const resumeChange = (row: any) => {
  state.resumeActive = row.name
}

const handleScroll = () => {
  // let directoryEl: any = document.querySelector('.directory')
  // directoryEl.style.top = -scrollRef.value?.getBoundingClientRect().top + 'px'
  // directoryEl.classList.add('animate')
  // if (scrollRef.value?.getBoundingClientRect().top > 6) {
  // } else {
  //   directoryEl.style.top = '10px'
  //   directoryEl.classList.add('animate')
  // }
}

const mouseover = (e: any, type: string, index?: number) => {
  const dataEl = document.getElementById(type + '-date')
  if (dataEl) dataEl.style.display = 'none'
  const el: any = document.getElementById('edit-' + type + index)
  el.style.display = 'block'
}

const mouseleave = (e: any, type: string, index?: number) => {
  const dataEl = document.getElementById(type + '-date')
  if (dataEl) dataEl.style.display = 'block'
  const el: any = document.getElementById('edit-' + type + index)
  el.style.display = 'none'
}

onMounted(() => {
  // window.addEventListener('scroll', handleScroll, true)
})

onBeforeUnmount(() => {
  // window.removeEventListener('scroll', handleScroll)
})
</script>

<style lang="scss" scoped>
@import url(./style/editResume.scss);
</style>
