<template>
  <div class="job-container">
    <search />
    <el-card class="screen-group" shadow="never">
      <div v-for="item in jobList" :key="item.id" class="screen-list">
        <div class="screen-type">{{ item.key }}：</div>
        <div class="screen-item" :class="item.show ? 'isShow' : ''">
          <el-button
            v-for="(col, i) in item.list"
            :key="i"
            :type="col.show ? 'primary' : ''"
            text
            @click="change(item, i)"
            >{{ col.name }}</el-button
          >
        </div>
        <div v-show="item.isShow" class="stretch" @click="collapse(item)">
          {{ item.show ? '收起' : '更多' }}
        </div>
      </div>
      <div v-show="tagList.length">
        <el-divider />
        <div class="tag-list">
          <div class="tag-left">
            <div class="tag-type">已选条件：</div>
            <div class="tag-item">
              <el-tag
                v-for="(item, index) in tagList"
                :key="index"
                closable
                @close="close(index)"
                >{{ item.key + '：' + item.name }}</el-tag
              >
            </div>
          </div>
          <el-button type="danger" round plain size="small" :icon="Delete" @click="clear"
            >清空</el-button
          >
        </div>
      </div>
    </el-card>
    <el-card shadow="never" style="width: 1316px; margin: 20px 0; border-radius: 8px">
      <el-link type="primary" :underline="false">综合排序</el-link>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { Search, Delete } from '@element-plus/icons-vue'
import { getJobList } from '@/services/api/home'
import search from '@/components/search.vue'

const jobList = ref()
const tagList = ref([] as any)

const collapse = (item: any) => {
  item.show = !item.show
}
const change = (row: any, i: number) => {
  row.list.map((item: any, index: number) => {
    if (index === i) {
      const tag: any = tagList.value.filter((tag: any) => tag.id === row.id)
      if (index) {
        if (tag.length) {
          tagList.value.map((tag: any) => {
            if (tag.id == row.id) {
              tag.name = item.name
            }
          })
        } else {
          tagList.value.push({ id: row.id, key: row.key, name: item.name, type: '' })
        }
      } else {
        if (tag.length) {
          let Index = 0
          tagList.value.map((tag: any, tagIndex: number) => {
            if (tag.id == row.id) {
              Index = tagIndex
            }
          })
          tagList.value.splice(Index, 1)
        }
      }
      item.show = true
    } else {
      item.show = false
    }
  })
}

const clear = () => (tagList.value = [])

const close = (index: number) => {
  tagList.value.splice(index, 1)
}

const init = async () => {
  const res: any = await getJobList()
  if (res.code === 200) {
    res.data.map((item: any) => {
      item.list[0].show = true
    })
    jobList.value = res.data
  }
}

init()
</script>

<style lang="scss" scoped>
.job-container {
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-direction: column;
  align-items: center;

  .screen-group {
    width: 1316px;
    border-radius: 8px;

    .screen-list {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      margin-top: 18px;
      .screen-type {
        display: inline-block;
        width: 80px;
        font-size: 14px;
        margin-top: 7px;
      }
      .screen-item {
        flex: 1;
        height: 28px;
        overflow: hidden;
        .el-button {
          margin-left: 0px;
          margin-right: 8px;
        }
      }
      .isShow {
        height: auto !important;
      }
      .stretch {
        width: 60px;
        height: 20px;
        background-color: #ebe7e7;
        text-align: center;
        line-height: 20px;
        cursor: pointer;
        border-radius: 2px;
        color: #888585;
        margin-top: 7px;
        font-size: 14px;
        user-select: none; // 文字不可被选中
      }
    }

    &:first-child {
      margin-top: 0;
    }

    .tag-list {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .tag-left {
        display: flex;
        align-items: center;
        .tag-type {
          display: inline-block;
          font-size: 14px;
          width: 80px;
        }
        .tag-item {
          .el-tag {
            margin-right: 8px;
          }
        }
      }
    }
  }
}
</style>
