<template>
  <div id="self-calendar">
    <el-row style="background:#598bed;height:476px;">
      <el-col :span="24" class="info">
        <el-col :span="24" class="calendar">
          <el-calendar v-model="calendars">
            <template #dateCell="{date, data}">
              <el-row>
                <el-col :span="24" @click.native="filter(data)" :class="hasJobfair(data)">{{ date | getDay(data) }}</el-col>
              </el-row>
            </template>
          </el-calendar>
        </el-col>
        <el-col :span="24" class="list">
          <span class="jiantou"></span>
          <el-col :span="24" class="listInfo" v-if="info.id">
            <el-col :span="24" class="title">
              <p class="textOver">{{ info.title }}</p>
            </el-col>
            <el-col :span="24" class="organizer">
              <p class="textOver">主办方：{{ info.organizer }}</p>
            </el-col>
            <el-col :span="12" class="address">
              <p class="textOver">地点：{{ info.address }}</p>
            </el-col>
            <el-col :span="12" class="date">
              <p>时间：{{ info.date }}</p>
            </el-col>
          </el-col>
          <el-col :span="24" class="listInfo" v-else>
            <el-col :span="24" class="none">
              2020年毕业季大型招聘会 7月敬请关注
            </el-col>
          </el-col>
        </el-col>
      </el-col>
      <el-col :span="24" class="loginBtn">
        <el-button type="primary" @click="turnTo('stud')">学生登录</el-button>
        <el-button type="success" @click="turnTo('corp')">企业登录</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex';
export default {
  name: 'self-calendar',
  props: {},
  components: {},
  data: () => ({
    calendars: new Date(),
    list: [],
    loading: false,
    infoList: [],
    info: {},
  }),
  created() {
    this.search();
  },
  computed: {},
  watch: {
    calendars: 'search',
  },
  methods: {
    ...mapActions(['getJobfair']),
    async search() {
      let year = `${this.calendars.getFullYear()}`;
      let month = this.calendars.getMonth() + 1 >= 10 ? this.calendars.getMonth() + 1 : `0${this.calendars.getMonth() + 1}`;
      let options = { date: `${year}-${month}` };
      let result = await this.getJobfair({ type: 'range', data: { ...options } });
      if (`${result.errcode}` === '0') {
        this.$set(this, `infoList`, result.data);
      } else {
        this.$set(this, `info`, {});
        this.$message.error(result.errmsg ? result.errmsg : 'error');
      }
    },
    hasJobfair(data) {
      let res = this.infoList.filter(fil => fil.date === data.day);
      return res.length > 0 ? 'has' : '';
    },
    filter(data) {
      let res = this.infoList.filter(fil => fil.date === data.day);
      if (res.length > 0) this.$set(this, `info`, res[0]);
    },
    turnTo(type) {
      if (type === 'stud')
        this.$notify({
          message: '请进入您的分站进行登录',
          type: 'warning',
        });
      else window.open('http://hr.smart.jilinjobs.cn/www/login');
    },
  },
  filters: {
    getDay(data) {
      return data.getDate();
    },
    getTime(date) {
      if (date) {
        let arr = date.split(' ');
        return arr[1];
      }
    },
  },
};
</script>

<style lang="less" scoped>
p {
  padding: 0;
  margin: 0;
}
.textOver {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.info {
  height: 396px;
}
.calendar {
  height: 280px;
}
.list {
  position: relative;
  height: 116px;
}
.loginBtn {
  height: 80px;
  line-height: 80px;
  text-align: center;
}
/deep/.el-calendar {
  background-color: #598bed;
}
/deep/.el-calendar__title {
  color: yellow;
  font-weight: 微软雅黑;
  font-size: 20px;
}
/deep/.el-calendar__body {
  padding: 0 40px;
}
/deep/.el-calendar-table thead th {
  padding: 0;
  color: #ffff;
  font-weight: bold;
}
/deep/.el-calendar-table .el-calendar-day {
  line-height: 35px;
  height: 35px;
  text-align: center;
  padding: 0;
  color: #fff;
}
/deep/.el-calendar-table tr td:first-child {
  border-left: none;
}
/deep/.el-calendar-table tr:first-child td {
  border-top: none;
}
/deep/.el-calendar-table td {
  border-bottom: none;
  border-right: none;
}
/deep/.el-calendar__header {
  border-bottom: none;
  padding: 12px 50px;
}
/deep/.el-calendar__button-group {
  display: none;
}
/deep/.el-calendar-table td.is-today {
  color: #0066ff;
  background: #f8ab55;
  border-radius: 90px;
}
/deep/.el-calendar-table td.is-selected {
  background-color: #54f77f;
  color: yellow;
  border-radius: 50px;
}
.listInfo {
  height: 100px;
  width: 89%;
  background: #fff;
  margin: 13px 20px;
  border-radius: 10px;
}
.jiantou {
  display: inline-block;
  position: absolute;
  top: -7px;
  left: 45%;
  width: 0px;
  height: 0;
  border-width: 10px;
  border-style: solid;
  border-color: #598bed #598bed #fff #598bed;
}
.listInfo .title p {
  text-align: center;
  padding: 5px 0;
  font-size: 20px;
}
.listInfo .organizer {
  padding: 5px 15px;
}
.listInfo .address {
  padding: 5px 0 0 12px;
}
.listInfo .date {
  padding: 5px 0;
}
.none {
  font-size: 24px;
  color: #676767;
  text-align: center;
  padding: 19px 28px;
}
.has {
  background: red;
}
</style>
