<!--
  @description: 工作日志维护
  @Modifier: 苏志刚
  @routerPath: /systemManagement/shopCalendar
  @date: 2020/8/25 13:45
-->
<template>
  <div>
    <!--标题-->
    <div class="title title_border p0-16">
      <i class="el-icon-s-home" />工作日历维护
    </div>
    <section class="p0-16">
      <!--查询条件-->
      <section class="clearfix SearchContent" style="margin: 10px 0 5px">
        <div class="SearchContent_leftInput fl">
          <el-form ref="searchForm" :model="searchForm" inline>
            <el-form-item label="年份">
              <el-select
                v-model="searchForm.year"
                style="width:140px"
                placeholder="请选择"
                @change="selectYear"
              >
                <el-option v-for="(v,i) in year" :key="i" :label="v" :value="v" />
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </section>
      <div class="calendarFlix">
        <el-calendar v-for="(v,i) in 12" :key="i" v-model="value[v-1]">
          <template slot="dateCell" slot-scope="{date, data}">
            <!-- 维护工作日-->
            <div v-if="isEdit && data.type==='current-month'" :class="{ festival : isFestival(date, data) }" class="festivalFather" @click="calendarClick($event,data)">
              <span style="font-size: 10px;background-color: rgb(255, 17, 17);color: white;padding: 0 2px">{{ dateRes(data.day) }}</span>
              <div class="solar">
                {{ data.day.split('-')[2] }}
              </div>
              <div
                class="lunar"
              >
                {{ solarToLunar(date, data) }}
              </div>
            </div>
            <!-- 展示工作日-->
            <div v-if="!isEdit && data.type==='current-month'" :class="{ festival : isFestival(date, data) }" class="festivalFather">
              <span style="font-size: 10px;background-color: rgb(255, 17, 17);color: white;padding: 0 2px">{{ dateRes(data.day) }}</span>
              <div class="solar">
                {{ data.day.split('-')[2] }}
              </div>
              <div
                class="lunar"
              >
                {{ solarToLunar(date, data) }}
              </div>
            </div>
          </template>
        </el-calendar>
      </div>
    </section>
    <div class="but_footer">
      <div class="but_footer-h">
        <div class="but_footer-but">
          <el-button v-show="isComplete" :loading="confirmLoading" type="primary" size="medium" @click="maintenanceWorkdays">
            维护工作日
          </el-button>
          <el-button v-show="!isComplete" :loading="confirmLoading" type="primary" size="medium" @click="completeTheSetup">
            完成设置
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 公历农历转换js文件
import { calendar } from './mixins/procurementCalendarMaintain.js'
/* 接口*/
import { getHoliday, updateHoliday } from '@/api/procurement/procurementCommonTools' // 获取日期/修改节假日
export default {
  name: 'ShopCalendarList',
  data() {
    return {
      isloading: true,
      confirmLoading: false,
      isComplete: true, // 按钮显示隐藏
      isEdit: false, // 是否编辑
      calendarArr: [], // 点击添加的日期
      value: [], // 绑定值（月份）
      tabData: [], // 日期数据
      // 搜索条件年份
      year: [new Date().getFullYear() - 2, new Date().getFullYear() - 1, new Date().getFullYear(), new Date().getFullYear() + 1],
      searchForm: {
        // 搜索条件年份
        year: new Date().getFullYear()
      }
    }
  },
  created() {
    var newYear = new Date().getFullYear()
    this.functions(newYear) // 改变年份获取12个月
    this.getHoliday() // 获取日期
  },
  mounted() {
  },
  methods: {
    // 把数据日期同步到日历表上
    dateRes(data) {
      let res = ''
      const len = this.tabData.length
      for (let i = 0; i < len; i++) {
        if (this.tabData[i].status === '1' && this.tabData[i].date === data) {
          res = '休'
          break
        }
      }
      return res
    },
    // 获取日期
    getHoliday() {
      getHoliday(this.searchForm.year).then(res => {
        if (res.header.ret === '0') {
          this.tabData = res.data
          this.isloading = false
        }
      }).catch(() => {
        this.isloading = false
      })
    },
    // 年份选择
    selectYear(val) {
      this.searchForm.year = val
      this.functions(val)
      this.getHoliday()
    },
    // 改变年份获取12个月
    functions(val) {
      this.value = []
      var months = 12
      for (var i = 1; i <= months; i++) {
        i = i < 10 ? '0' + i : i
        this.value.push(new Date(val + '-' + i + '-01'))
      }
    },
    // 维护工作日
    maintenanceWorkdays() {
      this.confirmLoading = true// btnLoding
      setTimeout(() => {
        this.confirmLoading = false
        this.isEdit = true
        this.isComplete = false
      }, 500)
    },
    // 完成设置
    completeTheSetup() {
      this.$confirm('确定完成设置吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        confirmButtonClass: 'confirmBtn',
        cancelButtonClass: 'cancelBtn',
        type: 'warning'
      }).then(() => {
        var newArr = []
        this.calendarArr.forEach((v, i) => {
          var calendarObj = {}
          calendarObj.date = v
          calendarObj.status = ''
          newArr.push(calendarObj)
        })
        updateHoliday(newArr).then(res => {
          this.confirmLoading = true// btnLoding
          setTimeout(() => {
            this.confirmLoading = false
            this.isEdit = false
            this.isComplete = true
          }, 500)
          this.getHoliday()
        })
      }).catch(() => {

      })
    },
    // 点击选中日期
    calendarClick($event, data) {
      if (new Date(data.day).getTime() < new Date().getTime()) {
        this.$message.error('不可选择当前日期之前的日期')
        return
      }
      var len = this.calendarArr.length
      var num = 0
      if (len > 0) {
        for (var i = 0; i < len; i++) {
          if (this.calendarArr[i] === data.day) {
            num++
            this.calendarArr.splice(i, 1)
          }
        }
        if (num === 0) {
          this.calendarArr.push(data.day)
        }
      } else {
        this.calendarArr.push(data.day)
      }
      const eventLen = $event.currentTarget.firstElementChild.innerHTML.split('').length
      if (eventLen === 0 || eventLen === 15) {
        $event.currentTarget.style.background = '#FAE9E9'
        $event.currentTarget.firstElementChild.innerHTML = '休'
      } else {
        $event.currentTarget.style.background = '#ffffff'
        $event.currentTarget.firstElementChild.innerHTML = ''
      }
    },
    // 是否节假日
    isFestival(slotDate, slotData) {
      let res = false
      const len = this.tabData.length
      for (let i = 0; i < len; i++) {
        if (this.tabData[i].status === '1' && this.tabData[i].date.split(' ')[0] === slotData.day) {
          res = true
          break
        }
      }
      return res
    },
    // 公历转农历
    solarToLunar(slotDate, slotData) {
      const solarDayArr = slotData.day.split('-')
      const lunarDay = calendar.solar2lunar(
        solarDayArr[0],
        solarDayArr[1],
        solarDayArr[2]
      )
      // 农历日期
      const lunarMD = 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>
  .festivalFather{
    position: relative;
  }
  .festivalFather span{
    position: absolute;
    top: 0;
    left: 0;
  }
  .calendarFlix{
    display: flex;
    flex-wrap: wrap;
  }
  /**隐藏上一月、本月、下一月*/
  /deep/ .el-calendar__button-group {
    display: none;
  }
  /deep/ .el-calendar {
    background-color: #fff;
    margin: 10px 10px 0;
    width: 31%;
  }
  /deep/ .el-calendar-table thead th {
    padding: 8px 0;
    border: 1px solid #eeeeee;
    background: #F0F7FC;
  }
  /deep/ .el-calendar__header{
    padding: 8px 0px;
    background: #007CCC;
  }
  /deep/ .el-calendar__title{
    color: white;
  }
  /deep/ .el-calendar__body {
    padding: 0px 0px 15px;
  }
    /**月份居中*/
  /deep/ .el-calendar__title {
    width: 100%;
    text-align: center;
  }
  /deep/ .el-calendar-table td {
    height: 54px;
    width: 50px;
  }
  /deep/ .el-calendar-table td.is-selected {
    background-color: white;
  }
  /deep/ .el-calendar-table .el-calendar-day {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0px;
    height: 100%;
  }
  /deep/ .el-calendar-table .el-calendar-day > div {
    height: 100%;
  }
  /**日期div的样式-公历*/
  /deep/ .el-calendar-table .el-calendar-day > div .solar {
     padding-top: 8px;
    text-align: center;
  }
  /**日期div的样式-农历*/
  /deep/ .el-calendar-table .el-calendar-day > div .lunar {
    font-size: 10px;
    text-align: center;
    padding-top: 3px;
  }
  /**本月农历设置为灰色*/
  /deep/ .el-calendar-table .current .lunar {
    color: #606266;
  }
  /**本月农历节日设置为红色*/
  /deep/ .el-calendar-table .current .festival {
    background-color: #FAE9E9;
    color: red;
  }
  /*禁止点击上月下月*/
  /deep/ .el-calendar-table:not(.is-range) td.next {
    pointer-events: none;
    color: #C0C4CC;
  }
  /deep/ .el-calendar-table:not(.is-range) td.prev {
    pointer-events: none;
    color: #C0C4CC;
  }
  /*当前日的样式*/
  /deep/ .el-backtop, .el-calendar-table td.is-today {
    background:  green;
  }
</style>
