<template>
  <div class="resume">
    <search style="margin-bottom: 24px" @search-change="searchChange" />
    <div class="resume-filter">
      <div v-for="item in list" :key="item.name" class="filter-item">
        <span class="filter-title">{{ item.name }}</span>
        <span class="filter-item-label filter-item-active">不限</span>
        <span class="filter-item-label">不限</span>
        <span class="filter-item-label">不限</span>
      </div>
      <div class="clear-filter">
        <span>清空筛选</span>
      </div>
    </div>
    <div class="resume-list">
      <div v-for="item in 3" :key="item" class="resume-item">
        <div style="display: flex; padding: 20px 0 20px 40px">
          <div class="flx-center-column">
            <el-avatar
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
              style="width: 64px; height: 64px"
            />
            <div class="salary">30-35k</div>
          </div>
          <div class="user-info">
            <div class="user-name">陈琳</div>
            <div style="margin: 10px 0">
              <span>27岁</span>
              <el-divider direction="vertical" />
              <span>女</span>
              <el-divider direction="vertical" />
              <span>1年</span>
              <el-divider direction="vertical" />
              <span>硕士</span>
              <el-divider direction="vertical" />
              <span>离职-随时到岗</span>
            </div>
            <div class="flx-justify-between" style="width: 838px">
              <p>
                强目标导向，并基于当下战略目标持续发现问题，定义问题，输出了解增长拉新有效策略解决问题成功的0-1及1-10经历，深入.
                强目标导向，并基于当下战略目标持续发现问题，定义问题，输出了解增长拉新有效策略解决问题成功的0-1及1-10经历，深入.
              </p>
              <div class="flx-direction-column" style="font-size: 14px">
                <div class="flx-align-center" style="margin-bottom: 6px">
                  <div style="color: #999999">职位：</div>
                  <span>华熙海御</span>
                  <div
                    style="
                      width: 4px;
                      height: 4px;
                      background: #cccccc;
                      border-radius: 50%;
                      margin: 0 4px;
                    "
                  ></div>
                  <span>运营经理/主管</span>
                </div>
                <div class="flx-align-center">
                  <div style="color: #999999">职位：</div>
                  <span>华熙海御</span>
                  <div
                    style="
                      width: 4px;
                      height: 4px;
                      background: #cccccc;
                      border-radius: 50%;
                      margin: 0 4px;
                    "
                  ></div>
                  <spa>运营经理/主管</spa>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="flx-direction-column" style="padding: 14px 40px 14px 0">
          <div class="resume-btn flx-center">简历待定</div>
          <div class="resume-btn flx-center">人才库</div>
          <div class="resume-btn flx-center">人才储备</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import search from '@/components/search.vue'

const list = [
  { name: '学历要求' },
  { name: '院校要求' },
  { name: '经验要求' },
  { name: '年龄要求' }
]

const searchChange = (searchValue: string) => {}
</script>

<style lang="scss" scoped>
.resume {
  display: flex;
  align-items: center;
  flex-direction: column;
  .resume-filter {
    width: 100%;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 12px;
    padding: 16px 24px;
    margin-bottom: 24px;
    .filter-item {
      font-size: 16px;
      font-weight: 400;
      color: #222222;
      margin-bottom: 16px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      box-sizing: border-box;

      .filter-title {
        font-size: 16px;
        font-weight: 400;
        color: #909090;
        margin-right: 32px;
      }

      .filter-item-label {
        cursor: pointer;
        padding: 4px 12px;
        border-radius: 4px;
        margin-right: 16px;
      }

      .filter-item-active {
        background: #dcecff;
        color: #177cfa;
      }
    }

    .clear-filter {
      font-size: 16px;
      font-weight: 400;
      color: #666666;
      display: flex;
      justify-content: flex-end;
      cursor: pointer;
    }
  }

  .resume-list {
    width: 100%;
    .resume-item {
      margin-bottom: 16px;
      background: #ffffff;
      border-radius: 12px;
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      .salary {
        background: #ff3333;
        border-radius: 28px;
        margin-top: 7px;
        font-size: 16px;
        font-weight: 400;
        color: #ffffff;
        padding: 2px 7px;
      }

      .user-info {
        margin-left: 16px;
        color: #222222;

        .user-name {
          font-size: 18px;
          font-weight: 400;

          span {
            font-size: 16px;
          }
        }
        p {
          width: 467px;
          font-size: 16px;
          font-weight: 400;
          color: #666666;
          line-height: 19px;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

      .resume-btn {
        cursor: pointer;
        border-radius: 4px;
        border: 1px solid #177cfa;
        padding: 5px 17px;
        font-size: 14px;
        font-weight: 400;
        color: #177cfa;
        margin-bottom: 15px;

        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
}
</style>
