<template>
      <div class="app-container">
          <el-container>
            <el-main>
              <el-calendar v-loading="loading" v-model="date">
                    <template slot="dateCell" slot-scope="{date, data }">
                    <div>
                          <el-row>
                              <el-col :span="18">
                                  <div class="solar">
                                        {{ data.day.split('-')[1]+'-'+data.day.split('-')[2] }}
                                  </div>
                              </el-col>
                                <!-- <el-col :span="6">
                                      <div class="solar">
                                            {{ data.day.split('-')[2] }}
                                      </div>
                                </el-col>
                                <el-col :span="12">
                                      <div class="lunar" :class="{ festival : isFestival(date, data) }">{{ solarDate2lunar(data.day) }}</div>
                                </el-col> -->
                                <el-col :span="6">
                                  <el-tag v-if="workdayList.indexOf(data.day)> -1" effect="dark">班</el-tag>
                                  <el-tag v-else-if="holidayList.indexOf(data.day) > -1" effect="dark" type="success">休</el-tag>
                                </el-col>
                          </el-row>
                          <el-row v-for="calendarDay in calendarDayList " :key="calendarDay.theDay">
                                <el-col :span="24" v-if="calendarDay.theDay == data.day && holidayList.indexOf(data.day) ==-1">
                                      <div v-for="(teamShift,index) in calendarDay.calPlanWorkunitList" :key="index" class="grid-content">
                                          <el-button type="primary" v-if="teamShift.shiftName === '白班'" icon="el-icon-sunny">{{ teamShift.workunitName }}</el-button>
                                          <el-button type="success" v-else-if="teamShift.shiftName === '中班'" icon="el-icon-sunrise">{{ teamShift.workunitName }}</el-button>
                                          <el-button type="warning" v-else-if="teamShift.shiftName === '夜班'" icon="el-icon-moon">{{ teamShift.workunitName }}</el-button>
                                      </div>
                                </el-col>
                          </el-row>
                    </div>
                    </template>
              </el-calendar>
            </el-main>
          </el-container>
      </div>
</template>

<script>
import { listCalholiday } from "@/api/mes/cal/calholiday";
import { listCalendars } from "@/api/mes/cal/calendar";
import calendar from '@/utils/calendar';
export default {
      name: 'CalendarTypeView',
      data(){
            return {
                  // 遮罩层
                  loading: true,
                  date: new Date(),
                  holidayList:[],//假日
                  workdayList:[],//工作日
                  selectedType:null,
                  calendarDayList:[
                  ],
                  teamShiftQueryParams:{
                    isWork: 1
                  },
                  queryParams: {
                    theDay: null,
                    isWork: 1
                  },
            }
      },
      watch:{
        date:{
          handler(newVal,oldVal){
            console.log(newVal.getFullYear()+'-'+(newVal.getMonth()+1)+'-'+newVal.getDate());
            this.teamShiftQueryParams.theDay = newVal.getFullYear()+'-'+(newVal.getMonth()+1)+'-'+newVal.getDate();
            this.queryParams.theDay = newVal.getFullYear()+'-'+(newVal.getMonth()+1)+'-'+newVal.getDate();
            listCalendars(this.teamShiftQueryParams).then(response =>{
              this.calendarDayList = response.data;
            });
            this.getList();
          }
        }
      },
      created() {
            this.getList();
      },
      methods:{
            /** 查询节假日设置列表 */
            getList() {
                  this.loading = true;
                  this.holidayList =[];
                  this.workdayList =[];
                  let that = this;
                  listCalholiday(this.queryParams).then(response => {
                  if(response.data !=null){
                        response.data.forEach(theDay => {
                              if(theDay.holidayType =='HOLIDAY'){
                              that.holidayList.push(theDay.theDay);
                              } else if(theDay.holidayType == 'WORKDAY'){
                                  that.workdayList.push(theDay.theDay);
                              }
                        });
                        this.loading = false;
                  }
                  });
            },
            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 != ''
            },
            solarDate2lunar(solarDate) {
                  var solar = solarDate.split('-')
                  var lunar = calendar.solar2lunar(solar[0], solar[1], solar[2])

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

                  return festAndTerm == '' ? lunarMD : festAndTerm

            }
      }
}
</script>
<style>
      .grid-content{
            padding: 5px 0;
      }

      .el-group-list.el-radio-group{
            display: flex;
            flex-direction: column;
            align-items:stretch;
      }

      .el-group-list.el-radio-group .el-radio-button:first-child .el-radio-button__inner,
      .el-group-list.el-radio-group .el-radio-button:last-child .el-radio-button__inner,
      .el-group-list.el-radio-group  .el-radio-button:first-child .el-radio-button__inner,
      .el-group-list.el-radio-group .el-radio-button__inner
      {
            border-radius: 0px !important;
            border: none !important;
      }

      .el-group-list.el-radio-group .el-radio-button{
            border-bottom: 1px solid #F7F7F7 !important;
      }

      .el-group-list.el-radio-group{
            border: 1px solid #dcdfe6;
      }

      .el-group-list.el-radio-group > label > span{
            width: 100%;
            text-align: left;
            padding-left: 20px;
      }
      /**本月周末设置为红色*/
      .el-calendar-table .current:nth-last-child(-n+2) .solar {
            color: red;
            font-size: small;
      }
      /**本月农历设置为灰色*/
      .el-calendar-table .current .lunar {
            color: #606266;
            font-size: small;
      }
      /**本月农历节日设置为红色*/
      .el-calendar-table .current .lunar.festival {
            color: green;
            font-size: small;
      }
      /**节假日背景设置为绿色 */
      .el-calendar-table .holiday {
            background-color: #88E325;
      }
</style>
