<template>
  <div id="recruit">
    <el-row>
      <el-col :span="24">
        <el-col :span="24" class="bejing">
          <el-image style="width:100%;height:410px;" :src="url"></el-image>
        </el-col>
        <el-col :span="24" class="info">
          <div class="w_1270">
            <el-col :span="24" class="top">
              <span>{{ title }}</span>
            </el-col>
            <el-col :span="24" class="list">
              <el-col :span="20" class="leftList">
                <el-col :span="24" class="noList">
                  <el-col :span="6" class="jobs">
                    招聘职位
                  </el-col>
                  <el-col :span="10" class="company">
                    单位名称
                  </el-col>
                  <el-col :span="4" class="gongneng">
                    功能
                  </el-col>
                  <el-col :span="4" class="date">
                    发布时间
                  </el-col>
                </el-col>
                <el-col :span="24" class="recruitList" v-for="(item, index) in recruitList" :key="index">
                  <el-col :span="6" class="jobs">
                    <p class="textOver">{{ item.jobs | getJobs }}</p>
                  </el-col>
                  <el-col :span="10" class="company" v-if="item.corpid">
                    <p class="textOver" @click="$router.push({ path: '/corp', query: { id: item.corpid } })">{{ item.title }}</p>
                  </el-col>
                  <el-col :span="10" class="company" v-else>
                    <p class="textOver">{{ item.title }}</p>
                  </el-col>
                  <el-col :span="4" class="btn">
                    <el-button @click="$router.push({ path: '/jobinfoDetail', query: { id: item.id } })">[点击查看详情]</el-button>
                  </el-col>
                  <el-col :span="4" class="date">
                    {{ item.meta | getDate }}
                  </el-col>
                </el-col>
              </el-col>
              <el-col :span="4" class="rightList" style="width:247px;height:416px;" v-loading="loading">
                <el-col :span="24" class="rightTop">
                  <el-col :span="16" class="rightTopTit">
                    <span>{{ zixunList.title || zixunTitle }}</span>
                  </el-col>
                  <el-col :span="8" class="rightTopLink">
                    <el-link :underline="false" @click="$router.push({ path: path, query: { title: zixunList.title } })"
                      >more<i class="el-icon-d-arrow-right"></i
                    ></el-link>
                  </el-col>
                </el-col>
                <el-col :span="24">
                  <el-col
                    :span="24"
                    class="zixunList"
                    v-for="(item, index) in infoList"
                    :key="index"
                    @click.native="$router.push({ path: `/detail?id=${item.id}` })"
                  >
                    <p class="title textOver">{{ item.title }}</p>
                  </el-col>
                </el-col>
              </el-col>
            </el-col>
          </div>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import _ from 'lodash';
export default {
  name: 'recruit',
  props: {
    recruitList: null,
    zixunList: null,
  },
  components: {},
  data: () => ({
    url: require('@/assets/zhaopin.jpg'),
    title: '最新招聘',
    zixunTitle: '就业咨询',
    loading: true,
    infoList: [],
    path: undefined,
  }),
  watch: {
    zixunList: {
      handler(val) {
        if (val) this.assignData(val);
      },
    },
    recruitList: {
      handler(val) {
        if (val) this.loading = false;
      },
    },
  },
  created() {},
  computed: {},
  methods: {
    assignData(data) {
      let columns = _.get(data, 'children');
      let notice = [];
      for (const item of columns) {
        if (!this.path) this.path = item.path;
        let zixunList = _.get(item, `children`);
        if (zixunList) {
          notice = notice.concat(notice, zixunList);
        }
      }
      this.$set(this, `infoList`, notice);
      this.loading = false;
    },
  },
  filters: {
    getJobs(jobs) {
      let returns = null;
      if (jobs.length > 0) {
        for (const item of jobs) {
          returns = returns === null ? `${item.job_name}` : `${returns};${item.job_name}`;
        }
      } else {
        returns = '无招聘职位';
      }
      return returns;
    },
    getDate(meta) {
      let createdAt = _.get(meta, `createdAt`);
      let date = new Date(createdAt)
        .toLocaleDateString()
        .replace('/', '-')
        .replace('/', '-');
      return date;
    },
  },
};
</script>

<style lang="less" scoped>
.w_1270 {
  width: 1270px;
  margin: 0 auto;
}
p {
  padding: 0;
  margin: 0;
}
.textOver {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.info {
  position: absolute;
  top: 0;
}
.top {
  text-align: center;
  margin: 60px 0 20px 0;
}
.top span {
  font-size: 25px;
  color: #fff;
}
.leftList {
  width: 1010px;
  height: 416px;
  overflow: hidden;
  margin: 0 10px 0 0;
  background-color: #fff;
  padding: 10px;
  box-shadow: 0 0 10px #ccc;
}
.noList {
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  color: #a01f25;
}
.noList .jobs {
  text-align: left;
  padding: 0 15px;
}
.noList .company {
  text-align: center;
}
.noList .gongneng {
  text-align: center;
}
.noList .date {
  text-align: center;
}
.recruitList {
  height: 40px;
  line-height: 40px;
  font-size: 16px;
}
.recruitList:nth-child(2n) {
  background-color: #f1f1f1;
}
.recruitList .jobs {
  text-align: left;
  padding: 0 15px;
}
.recruitList .company {
  text-align: center;
}
.recruitList .btn {
  text-align: center;
}
/deep/.recruitList .btn .el-button {
  padding: 0;
  border: none;
  border-radius: 0;
  color: red;
}
.recruitList .date {
  text-align: center;
}
.rightList {
  width: 247px;
  height: 416px;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 0 10px #ccc;
}
.rightTop {
  height: 39px;
  line-height: 39px;
  border-bottom: 1px solid #ccc;
}
.rightTop .rightTopTit span {
  display: inline-block;
  width: 110px;
  height: 39px;
  line-height: 39px;
  text-align: center;
  color: #000;
  font-size: 16px;
  border-bottom: 1px solid #176ebb;
}
.rightTop .rightTopLink {
  height: 39px;
  line-height: 39px;
  text-align: center;
}
.rightTop .rightTopLink .el-link {
  height: 39px;
  line-height: 39px;
  text-align: center;
  color: #000;
  font-size: 16px;
  text-transform: uppercase;
}
.rightTop .rightTopLink:hover .el-link {
  color: #a32324;
}
.zixunList {
  padding: 10px;
}
.zixunList .title {
  font-size: 16px;
}
.zixunList:hover {
  cursor: pointer;
}
.zixunList:hover .title {
  color: #a32324;
}
</style>
