<template>
    <div id="vocation" ref="vocation" style="background-color:#f7f7f7;">
      <div :style="{'background-image':backimg}" style="padding:30px;margin:10px 0;background-color:white;background-repeat: no-repeat;background-position: bottom right;">
        <p style="color:#A6A6A6;font-size:24px;font-weight:bold;">CAREER POOL</p>
        <p style="color:#414141;font-size:24px;font-weight:bold;">职业库</p>
        <hr class="layui-bg-orange" style="width:40px;height:4px;margin-top:10px;" />
      </div>
      <div style="text-align: right;">
        <el-input style="width:40%;" suffix-icon=" " placeholder="搜索" v-model="vocationName" @keyup.enter.native="clickSuffix">
           <span slot="suffix" @click="clickSuffix" style=" cursor: pointer">
            <i class="el-icon-search" style="margin-right: 10px;"></i>
          </span>
        </el-input>
      </div>
      <el-divider></el-divider>
      <el-row class="row" :gutter="20">
        <el-col style="margin-top: 20px;" :span="6" v-for="(item,index) in layout" :key="old" class="item">
          <div class="rowHead" style="padding:24px 24px 10px;">
            <p style="font-size: 16px;line-height: 22px;color: #589886;">{{item.enName}}</p>
            <h4 style="margin:0;font-size: 24px;color:#525252;">{{item.type}}</h4>
            <!--<hr style="width:40px;height:4px;margin-top:10px;" :style="{'background-color':theme}">-->
            <hr class="layui-bg-orange" style="width:40px;height:4px;margin-top:10px;" />
          </div>
          <div style="padding:10px 15px 20px;background-color: #ffffff;">
            <el-link @click="goDetail(val.id)" :underline="false" style="margin-right:5px;" v-for="val in item.children" :key="val.id+val.name">{{val.name}}</el-link>
          </div>
        </el-col>
      </el-row>
    </div>
</template>

<script>
  import {mapState} from 'vuex';
  import {selectJobsList} from '@/api/webApi/vocation';
  export default {
        name: "index",
      data(){
          return {
            backimg:'url('+require('@/assets/images/career/icon_colleges.png')+')',
            vocationName:'',
            layout:[]
          }
      },
      computed:{
        ...mapState({theme: state => state.settings.theme})
      },
      watch:{
        theme:{
          immediate:true,
          handler(val){
            this.$nextTick(()=>{
              this.$refs.vocation.style.setProperty('--themeColor', val)
            })
          }
        },
      },
      created(){
          this.getJobsList();
      },
      methods:{
        goDetail(id){
          this.$router.push({name:'jobDetail',query:{id:id}})
        },
        clickSuffix(){
          this.getJobsList();
        },
        getJobsList(){
          const params={
            name:this.vocationName
          };
          selectJobsList(params).then(res=>{
            this.layout=res.data;
          })
        }
      }
    }
</script>
<style lang="scss" scoped>
  #vocation{
    .layui-bg-orange{
      background-color: var(--themeColor);
      margin-left:0;
    }
    .row{
      .rowHead{
        background-color:#a7e6d4;
       &:hover{
          background-color: var(--themeColor);
         hr{
           background-color: #ffffff;
         }
        }
      }
    }
  }
</style>
<style lang="scss">
  #vocation {
    .el-input {
      .el-input__inner {
        border-radius: 50px;
      }
    }
    /* 让内容按列纵向展示 */
    .row {
      display: flex;
      flex-flow: column wrap;
      height: 1450px;
      font-family: PingFangSC-Regular, PingFang SC,Helvetica,serif;
    }

    /* 重新定义内容块排序优先级，让其横向排序 */
    .item:nth-child(4n+1) { order: 1; }
    .item:nth-child(4n+2) { order: 2; }
    .item:nth-child(4n+3)   { order: 3; }
    .item:nth-child(4n)   { order: 4; }
    /* 强制使内容块分列的隐藏列 */
    .row::before,
    .row::after {
      content: "";
      flex-basis: 100%;
      width: 0;
      order: 3;
    }
  }


</style>
