<template>
  <div id="self-calendar">
    <el-calendar>
      <template #dateCell="{date, data}">
        <el-popover ref="popover" placement="right" width="500" trigger="hover" @show="checkJobFair(data)">
          <el-row>
            <el-col :span="24" style="padding:0.5rem;text-align:center;">{{ data.day }}招聘会</el-col>
            <el-col :span="24" style="text-align:center;">
              <el-table :data="list" style="width: 100%" border v-loading="loading">
                <el-table-column prop="title" align="center" label="标题"> </el-table-column>
                <el-table-column prop="organizer" align="center" label="举办方"> </el-table-column>
              </el-table>
            </el-col>
          </el-row>
          <span slot="reference">
            {{ date | getDay }}
          </span>
        </el-popover>
      </template>
    </el-calendar>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex';
export default {
  name: 'self-calendar',
  props: {},
  components: {},
  data: () => ({
    value: new Date(),
    list: [],
    loading: false,
  }),
  created() {},
  computed: {},
  methods: {
    ...mapActions(['jobfairOperation']),
    async checkJobFair(data) {
      let searchInfo = { date: data.day };
      this.$set(this, `loading`, true);
      let result = await this.jobfairOperation({ type: 'list', data: searchInfo });
      this.$set(this, `list`, result.data ? result.data : []);
      this.$set(this, `loading`, false);
    },
  },
  filters: {
    getDay(data) {
      return data.getDate();
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-calendar__body {
  padding: 0;
}
/deep/.el-calendar-table thead th {
  padding: 10px 0;
}
/deep/.el-calendar-table .el-calendar-day {
  height: 40px;
  line-height: 40px;
  padding: 0 0 0 15px;
}
/deep/.el-calendar-table thead {
  background-color: #c45353;
}
/deep/.el-calendar-table thead th {
  color: #fff;
}
</style>
