<template>
    <div class="app-container">
        <el-calendar v-model="date" class="myholiday-cal">
            <template slot="dateCell" slot-scope="{date, data }" >
                <div @contextmenu.prevent="onRightClick(data)"  @click.stop.prevent="clickcancel" style="height: 100%; padding: 8px">
                    <el-row style="height: 100%;">
                        <!-- <el-col :span="16">
                            <div class="solar">
                                {{ data.day.split('-')[2] }}
                            </div>
                        </el-col> -->
                        <el-col :span="16">
                            <div class="solar">
                                  {{ data.day.split('-')[1]+'-'+data.day.split('-')[2] }}
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <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>
                        <el-col :span="24">
                            <div class="lunar" :class="{ festival : isFestival(date, data) }">{{ solarDate2lunar(data.day) }}</div>
                        </el-col>
                    </el-row> -->
                </div>
            </template>
        </el-calendar>
        <!-- 添加或修改节假日设置对话框 -->
        <!-- <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="日期" prop="theDay">
                            <el-input v-model="form.theDay" readonly="readonly"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="类型" prop="holidayType">
                            <el-radio-group v-model="form.holidayType">
                                <el-radio label="HOLIDAY">假</el-radio>
                                <el-radio label="WORKDAY">班</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" v-hasPermi="['mes:cal:calholiday:edit']" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog> -->
        <el-dialog :title="title" :visible.sync="open" width="1400px" append-to-body>
            <item-index ref="itemIndex" v-if="open" optType="add" :theDay="theDay"></item-index>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" v-hasPermi="['mes:cal:calholiday:edit']" @click="submitForm(2)">放 假</el-button>
                <!-- <el-button type="primary" v-hasPermi="['mes:cal:calholiday:edit']" @click="submitForm(1)">加 班</el-button> -->
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { daylistCalholiday, getCalholiday, delCalholiday, addCalholiday, updateCalholiday } from "@/api/mes/cal/calholiday";
import ItemIndex from "./itemIndex";
import calendar from '@/utils/calendar';
export default {
    components: {
      ItemIndex
    },
    data(){
        return {
            // 遮罩层
            loading: true,
            date: new Date(),
            holidayList:[],//假日
            workdayList:[],//工作日
            // 弹出层标题
            title: "节假日设置",
            // 是否显示弹出层
            open: false,
            theDay: null,
            queryParams: {
                theDay: null,
                isWork: 1
            },
            // 表单校验
            rules: {
                holidayType: [
                { required: true, message: "请选择类型", trigger: "blur" }
                ],
            }
        }
    },
    watch:{
      date:{
        handler(newVal,oldVal){
          console.log(newVal.getFullYear()+'-'+(newVal.getMonth()+1)+'-'+newVal.getDate());
          this.queryParams.theDay = newVal.getFullYear()+'-'+(newVal.getMonth()+1)+'-'+newVal.getDate();
          this.getList()
        }
      }
    },
    created() {
        this.getList();
    },
    mounted(){
        const prevBtn2 = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(2)')
        prevBtn2.textContent = '本月'
    },
    methods:{
        clickcancel () {
        },
        /** 查询节假日设置列表 */
        getList() {
            this.loading = true;
            this.holidayList =[];
            this.workdayList =[];
            let that = this;
            daylistCalholiday(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;
                }
            });
        },
        onRightClick(date){
            this.open = true;
            this.reset();
            console.log()
            this.theDay=date.day;
        },
        submitForm(isWork){
          const datas = this.$refs.itemIndex.selectRow.map(item => {
            return {
              isWork,
              theDay: item.theDay,
              shiftName: item.shiftName,
              workunitId: item.workunitId
            }
          })
          addCalholiday(datas).then(response => {
            this.$modal.msgSuccess("设置成功");
            this.$refs.itemIndex.getList();
          });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                holidayId: null,
                theDay: null,
                holidayType: null,
                startTime: new Date().setHours(0),
                endTime: new Date().setHours(23)
            };
            this.resetForm("form");
        },
        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>
/**本月周末设置为红色*/
  .el-calendar-table .current:nth-last-child(-n+2) .solar {
    color: red;
  }
  /**本月农历设置为灰色*/
  .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;
  }
  .myholiday-cal .el-calendar-table .el-calendar-day {
      padding: 0px;
  }
</style>
