<!--
  @description:日历组件
  @Modifier: haofengxian
  @routerPath:
  @date: 2020-7-11-10:32
-->
<template>
  <el-calendar v-model="selectDate">
    <template
      slot="dateCell"
      slot-scope="{date, data}"
    >
      <div class="calendar-day">
        <span>{{ dealMyDate(data.day,data) }}</span>
        <span>
          {{ data.day.split('-').slice(2).join('') }}
        </span>
        <br>
        <span class="content">
          {{ data.content }}
        </span>
      <!--  <p :title="data.content"> &lt;!&ndash;这里原本有动态绑定的class，去掉&ndash;&gt;
          {{ data.day.split('-').slice(2).join('') }}<br>
          <i v-if="data.isShowContent"/>
        </p>-->
      </div>
    </template>
  </el-calendar>
</template>

<script>
export default {
  name: 'Calendar',
  props: {
    // 接收父组件传值-当前月份开标信息
    resDate: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      selectDate: '' // 当前日期
    }
  },
  watch: {
    // 监听触发月份
    selectDate: {
      handler(val, old) {
        const monthVal = this.$Moment(val).format('YYYY-MM')
        const MonthOld = this.$Moment(old).format('YYYY-MM')
        // 如果新值和旧值所在的月份相同，则不触发方法。
        if (monthVal !== MonthOld) {
          this.$emit('childCertainMonth', monthVal)
        }
      },
      deep: true
    }
  },
  created() {
    // 渲染日程初始化月份
    this.selectDate = new Date()
  },
  methods: {
    dealMyDate(v, data) {
      Object.assign(data, { isShowContent: false }) // 是否显示日程 false不显示
      Object.assign(data, { content: '' }) // 日程信息
      const len = this.resDate.length
      let res = ''
      for (let i = 0; i < len; i++) {
        if (this.resDate[i].currentDate === v) {
          res = ''
          Object.assign(data, { isShowContent: true })
          Object.assign(data, { content: '开标' + this.resDate[i].openingTenderNumber })
          break
        }
      }
      return res
    }
  }
}
</script>

<style scoped lang="less">
  /deep/ .el-calendar__body {
    padding: 0;
    p {
      text-align: center;
      i {
        content: "";
        display: inline-block;
        width: 6px;
        height: 6px;
        background-color: #D0333C;
        border-radius: 50%;
        text-align: center;
      }
    }
  }
  /deep/.el-calendar-table{
    thead{
      th{
        padding: 4px 0;
      }
    }
    td{
      border: 1px solid #E0E0E0;
    }
    .el-calendar-day{
      height: auto !important;
      text-align: center;
      min-height: 37px;
      line-height: 14px;
      padding: 6px;
      .calendar-day{
        height: 27px;
        .content{
          font-size: 12px;
          color: #F56C6C;
        }
      }
      &:hover{
        background-color: #e5f2ff;
      }
    }
  }
  /deep/.el-calendar-table td.is-selected{
    background-color: #c6e8ff
  }
</style>
