<template>
  <div style="margin-bottom: 15px">
    <div class="position-header">
      <el-button type="primary" :icon="CirclePlusFilled" @click="toEditPosition"
        >发布职位</el-button
      >
      <div class="tag-list">
        <el-tag
          v-for="item in positionList"
          :key="item.type"
          :type="tagActive === item.name ? '' : 'info'"
          @click="tagChange(item)"
          >{{ item.name }}</el-tag
        >
      </div>
    </div>
    <div class="position-list">
      <div v-for="(item, index) in 6" :key="index" class="position-item flx-justify-between">
        <div>
          <div class="position-title">销售经理</div>
          <div>
            <span class="position-label">大专</span>
            <el-divider direction="vertical" />
            <span class="position-label">1-3年</span>
            <el-divider direction="vertical" />
            <span class="position-label">招聘2人</span>
            <el-divider direction="vertical" />
            <span class="position-label">6K-8K.13薪</span>
            <el-divider direction="vertical" />
            <span class="position-label">全职</span>
          </div>
        </div>
        <div class="options">
          <span class="open"><span class="round open-round" /> 开放中</span>
          <span>关闭</span>
          <span>编辑</span>
          <span @click="preview">预览</span>
          <span>删除</span>
        </div>
      </div>
    </div>
  </div>
  <previewPosition v-model:show="previewShow" />
</template>

<script setup lang="ts">
import { CirclePlusFilled } from '@element-plus/icons-vue'
import { positionList } from '../config/index'
import previewPosition from './previewPosition.vue'

const router = useRouter()
const tagActive = ref('职位管理')
const previewShow = ref(false)

const tagChange = (row: any) => {
  tagActive.value = row.name
}

const toEditPosition = () => {
  router.push('/recruitmentManagement/editPosition')
}

const preview = () => {
  previewShow.value = true
}
</script>

<style lang="scss" scoped>
.position-header {
  padding: 26px 58px;
  background: #ffffff;
  border-radius: 12px;
  margin-bottom: 16px;

  .tag-list {
    margin-top: 20px;
    .el-tag {
      cursor: pointer;
      margin-right: 20px;
    }
  }
}

.position-list {
  .position-item {
    padding: 24px 58px;
    background: #ffffff;
    border-radius: 12px;
    margin-bottom: 16px;

    .position-title {
      font-size: 18px;
      font-weight: 500;
      color: #222222;
      margin-bottom: 16px;
    }

    .position-label {
      font-size: 16px;
      font-weight: 400;
      color: #666666;
    }
    .options {
      display: flex;
      font-size: 16px;
      font-weight: 400;
      color: #222222;

      span {
        cursor: pointer;
        margin-left: 24px;
      }

      .open {
        // background: linear-gradient(90deg, #a5cdff 0%, #177cfa 100%);
        // color: #177cfa;
      }
      .round {
        display: inline-block;
        width: 8px;
        height: 8px;
        background: #666666;
        border-radius: 50%;
      }

      // .open-round {
      //   background: linear-gradient(90deg, #a5cdff 0%, #177cfa 100%);
      //   color: #177cfa;
      // }
    }
  }
}
</style>
