<template>
  <el-calendar v-model="date">
    <template slot="dateCell" slot-scope="{date, data}">
      <div :class="{ selected: isSelected(date, data) }">
        <div class="solar">{{ data.day.split('-')[2] }}</div>
        <div class="lunar" :class="{ festival: isFestival(date, data) }">{{ solarToLunar(date, data) }}</div>
      </div>
    </template>
  </el-calendar>
</template>
 
<script>
import calendar from './calendar'
export default {
  name: 'calendar',
  data () {
    return {
      date: new Date(),
      // 根据selectedDates设置选中日期
      selectedDates: []
    }
  },
  methods: {
    // 是否选中日期
    isSelected: function (slotDate, slotData) {
      return this.selectedDates.includes(slotData.day)
    },
    // 是否节假日
    isFestival (slotDate, slotData) {
      let solarDayArr = slotData.day.split('-');
      let lunarDay = calendar.solar2lunar(solarDayArr[0], solarDayArr[1], solarDayArr[2])

      // 公历节日\农历节日\农历节气
      let festAndTerm = [];
      festAndTerm.push(lunarDay.festival == null ? '' : ' ' + lunarDay.festival)
      festAndTerm.push(lunarDay.lunarFestival == null ? '' : '' + lunarDay.lunarFestival)
      festAndTerm.push(lunarDay.Term == null ? '' : '' + lunarDay.Term)
      festAndTerm = festAndTerm.join('')

      return festAndTerm != ''
    },
    // 公历转农历
    solarToLunar (slotDate, slotData) {
      let solarDayArr = slotData.day.split('-');
      let lunarDay = calendar.solar2lunar(solarDayArr[0], solarDayArr[1], solarDayArr[2])

      // 农历日期
      let lunarMD = lunarDay.IMonthCn + lunarDay.IDayCn

      // 公历节日\农历节日\农历节气
      let festAndTerm = [];
      festAndTerm.push(lunarDay.festival == null ? '' : ' ' + lunarDay.festival)
      festAndTerm.push(lunarDay.lunarFestival == null ? '' : '' + lunarDay.lunarFestival)
      festAndTerm.push(lunarDay.Term == null ? '' : '' + lunarDay.Term)
      festAndTerm = festAndTerm.join('')

      return festAndTerm == '' ? lunarMD : festAndTerm
    }
  }
}
</script>
 
<style scoped>
/**隐藏上一月、本月、下一月*/
.el-calendar__button-group {
  display: none;
}

/deep/.el-calendar__body {
  padding: 8px;
}

/deep/.el-calendar-table .el-calendar-day {
  height: auto;
  padding: 5px;
}

/**月份居中*/
.el-calendar__title {
  width: 100%;
  text-align: center;
}

/deep/.el-calendar-table thead th {
  padding: 0 0 6px 0 !important;
}

/deep/.el-calendar-day {
  padding: 3px !important;
}

/deep/.el-calendar__header {
  padding: 8px 15px;
}

/**日期div的样式*/
.el-calendar-table tr td:first-child {
  border-left: 0px;
}

.el-calendar-table td {
  min-height: 110px;
  min-width: 110px;
  border-right: 0px;
}

.el-calendar-table td.is-selected {
  background-color: white;
}

.el-calendar-table .el-calendar-day {
  padding: 0px;
  text-align: center;
}

.el-calendar-table .el-calendar-day>div {
  text-align: center
}

/**日期div的样式-公历*/
.el-calendar-table .el-calendar-day>div .solar {
  text-align: center;
  margin-top: 3px;
}

/**日期div的样式-农历*/
.el-calendar-table .el-calendar-day>div .lunar {
  padding-top: 5px;
  font-size: 12px;
  text-align: center;
  margin-bottom: 5px;
}

/**日期div的样式-选中*/
.el-calendar-table .el-calendar-day>div.selected {
  background-color: #fef2f2;
  border: 3px solid #fb0;
  border-radius: 20px;
  text-align: center
}

/**本月周末设置为红色*/
.el-calendar-table .current:nth-last-child(-n+2) .solar {
  color: red;
}

/**本月农历设置为灰色*/
.el-calendar-table .current .lunar {
  color: #606266;
  font-size: 12px;
}

/**本月农历节日设置为红色*/
.el-calendar-table .current .lunar.festival {
  color: red;
}

.el-calendar-table td {
  border-right: none !important;
}

/**禁用点击效果*/
/*.el-calendar-table td {*/
/*pointer-events: none;*/
/*}*/
</style>