<template>
  <div id="huodong">
    <el-row>
      <el-col :span="24">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="双选会" name="1">
            <el-col :span="24" class="talksList" v-for="(item, index) in fairsList" :key="index" @click.native="toPath('jobfair', item.id)">
              <el-col :span="24">
                <el-col :span="20">
                  <span class="qiu"></span>
                  <el-link :underline="false">
                    <p class="title">{{ item.title }}</p>
                  </el-link>
                </el-col>
                <el-col :span="4">
                  <p class="date">{{ item.date }}</p>
                </el-col>
              </el-col>
              <el-col :span="24" class="text">
                <span>开始时间：{{ item.time }}</span
                >&nbsp;
                <span>招聘会地点：{{ item.address }}</span>
              </el-col>
            </el-col>
          </el-tab-pane>
          <el-tab-pane label="宣讲会" name="2">
            <el-col :span="24" class="talksList" v-for="(item, index) in talksList" :key="index" @click.native="toPath('talk', item.id)">
              <el-col :span="24">
                <el-col :span="20">
                  <span class="qiu"></span>
                  <el-link :underline="false">
                    <p class="title">{{ item.title }}</p>
                  </el-link>
                </el-col>
                <el-col :span="4">
                  <p class="date">{{ item.date }}</p>
                </el-col>
              </el-col>
              <el-col :span="24" class="text">
                <span>宣讲时间：{{ item.time }}</span
                >&nbsp;
                <span>宣讲地点：{{ item.address }}</span>
              </el-col>
            </el-col>
          </el-tab-pane>
          <el-tab-pane label="招聘快讯" name="3">
            <el-col :span="24" class="talksList" v-for="(item, index) in infoList" :key="index" @click.native="toPath('jobinfo', item.id)">
              <el-col :span="24">
                <el-col :span="20">
                  <span class="qiu"></span>
                  <el-link :underline="false">
                    <p class="title">{{ item.title }}</p>
                  </el-link>
                </el-col>
                <el-col :span="4">
                  <p class="date">{{ item.date }}</p>
                </el-col>
              </el-col>
              <el-col :span="24" class="text">
                <span>招聘企业：{{ item.corpname }}</span>
              </el-col>
            </el-col>
          </el-tab-pane>
        </el-tabs>
        <el-link :underline="false" class="add" @click="turnTo()"><i class="el-icon-plus"></i></el-link>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'huodong',
  props: {
    talksList: null,
    fairsList: null,
    infoList: null,
  },
  components: {},
  data: () => ({
    activeName: '1',
  }),
  created() {},
  computed: {},
  methods: {
    handleClick(tab, event) {
      // eslint-disable-next-line no-console
      // console.log(tab, event);
    },
    turnTo() {
      let type = '';
      if (this.activeName === `1`) type = `jobfair`;
      else if (this.activeName === `2`) type = `talk`;
      else if (this.activeName === `3`) type = `jobinfo`;
      this.$router.push({ path: `/master/jobs/${type}` });
    },
    toPath(type, id) {
      this.$router.push({ path: `/master/detail/${type}/${id}` });
    },
  },
};
</script>

<style lang="less" scoped>
p {
  margin: 0;
  padding: 0;
}
.add {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 20px;
  height: 20px;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 5px;
  color: #000;
  background: #fff;
  font-weight: bold;
}
/deep/.el-tabs__header {
  margin: 0;
  background: #415285;
}
/deep/.el-tabs__item {
  color: #bfc4d3;
  font-size: 18px;
  height: 50px;
  line-height: 50px;
}
/deep/.el-tabs__item.is-active {
  color: #fff;
}
/deep/.el-tabs--top .el-tabs__item.is-top:nth-child(2) {
  padding-left: 20px;
}
/deep/.el-tabs__active-bar {
  background-color: transparent;
}
/deep/.el-tabs__nav-wrap::after {
  background-color: transparent;
}
.qiu {
  display: inline-block;
  width: 4px;
  height: 5px;
  background: #999;
  margin: 0 15px;
}
.talksList {
  padding: 9px 0;
}
/deep/.talksList .el-link {
  font-size: 16px;
  color: #000;
}
.talksList .title:hover {
  color: #415285;
}
.talksList .date {
  font-size: 18px;
  color: #999;
  text-align: center;
}
.talksList .text {
  font-size: 12px;
  color: #b1b1b1;
  padding: 5px 0 5px 30px;
}
</style>
