/*
* @Author: AnThen
* @Date: 2017-10-13 08:24:33
* @Last Modified by: AnThen
* @Last Modified time: 2017-10-18 14:52:59
*/
<style lang="scss" scoped>
	@import './styles/_vars.scss';
	@import './styles/_mixin.scss';

	.mc-dateDate-box {
		position: absolute;
		width: 340px;
		height: 373px;
		z-index: 100;
		border: 2px solid $black;
		background-color: rgba($black, 0.8);
		::-webkit-scrollbar {
			width: 0;
		}
		.cont-box {
			float: left;
			width: 100%;
			height: 309px;
			padding: 20px 0;
			.banner-box {
				float: left;
				width: 100%;
				height: 20px;
				overflow: hidden;
				padding: 0 20px 0 24px;
				.text-box {
					float: left;
					font-size: 16px;
					color: $grey;
					.active {
						float: left;
						cursor: pointer;
					}
					.active:hover {
						color: $white;
					}
				}
				.button-box {
					float: right;
					height: 20px;
					.botton {
						float: right;
						width: 20px;
						height: 20px;
						overflow: hidden;
						margin-right: 10px;
						color: $grey;
						cursor: pointer;
						@include flex-display;
						@include flex-center;
					}
					.botton:first-child {
						margin-right: 0;
					}
					.botton:hover {
						background-color: $black;
						color: $chartOrange;
					}
				}
			}
			.cont-container {
				position: relative;
				float: left;
				width: 100%;
				height: 259px;
				.week-box {
					float: left;
					width: 100%;
					height: 20px;
					margin-top: 20px;
					.week {
						float: left;
						width: 14.28%;
						height: 100%;
						@include flex-display;
						@include flex-center;
						font-size: 16px;
						color: $white;
					}
				}
				.container {
					position: absolute;
					width: 100%;
					top: 50px;
					bottom: 0;
					overflow-x: hidden;
					overflow-y: auto;
					.yearList {
						width: 100%;
						.year-box {
							float: left;
							width: 25%;
							height: 63px;
							overflow: hidden;
							margin: 5px 0;
							@include flex-display;
							@include flex-center;
							.year {
								width: 46px;
								height: 46px;
								@include flex-display;
								@include flex-center;
								font-weight: bold;
								font-size: 14px;
							}
							.year.readonly {
								color: $grey;
								cursor: no-drop;
							}
							.year.active {
								color: $grayLight;
								cursor: pointer;
							}
							.year.active:hover {
								border: 2px solid rgba($chartOrange, 0.7);
							}
							.year.readonly.now {
								color: $chartOrange;
								cursor: no-drop;
							}
							.year.active.now {
								color: $chartOrange;
								cursor: pointer;
							}
							.year.active.now:hover {
								border: 2px solid rgba($chartOrange, 0.7);
							}
							.year.hover {
								color: $grayLight;
								cursor: pointer;
								background-color: $main3;
							}
						}
					}
					.monthList {
						width: 100%;
						.month-box {
							float: left;
							width: 25%;
							height: 73px;
							overflow: hidden;
							margin: 5px 0;
							@include flex-display;
							@include flex-center;
							.month {
								width: 46px;
								height: 46px;
								@include flex-display;
								@include flex-center;
								font-weight: bold;
								font-size: 14px;
							}
							.month.readonly {
								color: $grey;
								cursor: no-drop;
							}
							.month.active {
								color: $grayLight;
								cursor: pointer;
							}
							.month.active:hover {
								border: 2px solid rgba($chartOrange, 0.7);
							}
							.month.readonly.now {
								color: $chartOrange;
								cursor: no-drop;
							}
							.month.active.now {
								color: $chartOrange;
								cursor: pointer;
							}
							.month.active.now:hover {
								color: $grayLight;
								border: 2px solid rgba($chartOrange, 0.7);
							}
							.month.hover {
								color: $grayLight;
								cursor: pointer;
								background-color: $main3;
							}
						}
					}
					.dayList {
						width: 100%;
						.day-box {
							float: left;
							width: 14.28%;
							height: 34px;
							overflow: hidden;
							margin-bottom: 1px;
							@include flex-display;
							@include flex-center;
							.day {
								width: 46px;
								height: 34px;
								@include flex-display;
								@include flex-center;
								font-weight: bold;
								font-size: 14px;
							}
							.day.readonly {
								color: $grey;
								cursor: no-drop;
							}
							.day.active {
								color: $grayLight;
								cursor: pointer;
							}
							.day.active:hover {
								border: 2px solid rgba($chartOrange, 0.7);
							}
							.day.readonly.now {
								color: $chartOrange;
								cursor: no-drop;
							}
							.day.active.now {
								color: $chartOrange;
								cursor: pointer;
							}
							.day.active.now:hover {
								color: $grayLight;
								border: 2px solid rgba($chartOrange, 0.7);
							}
							.day.hover {
								color: $grayLight;
								cursor: pointer;
								background-color: $main3;
							}
							.day.active.now.hover {
								color: $grayLight;
							}
						}
					}
				}
				.container.no-top {
					top: 10px;
				}
			}
		}
		.but-box {
			float: left;
			width: 100%;
			height: 60px;
			border-top: 1px solid $greyMedium;
			background-color: rgba($black, 0.3);
			.preview {
				float: left;
				font-size: 12px;
				color: $grey;
				margin: 21px 0 0 14px;
			}
			.button-box {
				float: right;
				margin: 15px 12px 0 0;
				.confirm {
					float: right;
					width: 70px;
					height: 30px;
					margin-right: 12px;
					cursor: pointer;
					color: $white;
					background-color: $main1;
					@include flex-display;
					@include flex-center;
				}
				.confirm:hover {
					background-color: $main2;
				}
				.cancel {
					float: right;
					width: 70px;
					height: 30px;
					border-width: 2px;
					border-style: solid;
					border-color: rgba($grey, 1.0);
					@include flex-center;
					cursor: pointer;
					color: $grey;
					&:hover {
						background-color: rgba($white, 0.2);
						border-color: rgba($grayLight, 1.0);
						color: $grayLight;
					}
				}
			}
		}
	}

	.mc-dateDate-box.white {
		background-color: rgba($white, 1);
		box-shadow: 5px 5px 20px rgba($black, 0.2);
		border: none;
		.cont-box {
			.banner-box {
				.text-box {
					color: $greyDarken;
					.active:hover {
						color: $main1;
					}
				}
				.button-box {
					.botton:hover {
						background-color: $grayBrighten;
						color: $greyDarken;
					}
				}
			}
			.cont-container {
				.week-box {
					.week {
						color: $greyDarken;
					}
				}
				.container {
					.yearList {
						.year-box {
							.year.readonly {
								color: $grey;
							}
							.year.active {
								color: $greyDarken;
							}
							.year.active:hover {
								border: 2px solid rgba($chartOrange, 0.7);
							}
							.year.readonly.now {
								color: $chartOrange;
							}
							.year.active.now {
								color: $chartOrange;
							}
							.year.active.now:hover {
								border: 2px solid rgba($chartOrange, 0.7);
							}
							.year.hover {
								color: $chartOrange;
								background-color: $main3;
							}
						}
					}
					.monthList {
						.month-box {
							.month.readonly {
								color: $grey;
							}
							.month.active {
								color: $greyDarken;
							}
							.month.active:hover {
								border: 2px solid rgba($chartOrange, 0.7);
							}
							.month.readonly.now {
								color: $chartOrange;
							}
							.month.active.now {
								color: $chartOrange;
							}
							.month.active.now:hover {
								color: $chartOrange;
								border: 2px solid rgba($chartOrange, 0.7);
							}
							.month.hover {
								color: $grayLight;
								background-color: $main3;
							}
						}
					}
					.dayList {
						.day-box {
							.day.readonly {
								color: $grey;
							}
							.day.active {
								color: $greyDarken;
							}
							.day.active:hover {
								border: 2px solid rgba($chartOrange, 0.7);
							}
							.day.readonly.now {
								color: $chartOrange;
							}
							.day.active.now {
								color: $chartOrange;
							}
							.day.active.now:hover {
								color: $chartOrange;
								border: 2px solid rgba($chartOrange, 0.7);
							}
							.day.hover {
								color: $white;
								background-color: $main3;
							}
							.day.active.now.hover {
								color: $white;
							}
						}
					}
				}
			}
		}
		.but-box {
			border-top: 1px solid $grayBrighten;
			background-color: rgba($white, 1);
			.preview {
				color: $greyDarken;
			}
			.button-box {
				.cancel {
					border-width: 2px;
					border-style: solid;
					border-color: rgba($grayLight, 1.0);
					background-color: rgba($grayLight, 1.0);
					color: $greyDarken;
					&:hover {
						background-color: rgba($white, 1.0);
						border-color: rgba($greyDarken, 1.0);
					}
				}
			}
		}
	}
</style>
<template>
	<div class="mc-dateDate-box" :class="dateBoxMold"
	     v-if="dateBox"
	     :style="{top: dateBoxClass.top+'px', left: dateBoxClass.left+'px'}">
		<div class="cont-box">
			<div class="banner-box">
				<div class="text-box" v-if="bannerBox.yearMonth.show">
					<div class="active"
					     @click="initYear">{{bannerBox.yearYear.year}}年
					</div>
					<div class="active"
					     @click="ininMonth(bannerBox.yearYear.year)">{{bannerBox.month.month}}月
					</div>
				</div>
				<div class="text-box" v-if="bannerBox.month.show">
					<div class="active" @click="initYear">{{bannerBox.yearYear.year}}</div>
				</div>
				<div class="text-box" v-if="bannerBox.yearYear.show">
					{{yearList.confine[0]}}&#126;{{yearList.confine[1]}}
				</div>
				<div class="button-box" v-if="bannerBox.upDown.show">
					<div class="botton fa fa-angle-down"
					     @click="rollContainer('down',bannerBox.upDown.obj)"></div>
					<div class="botton fa fa-angle-up"
					     @click="rollContainer('up',bannerBox.upDown.obj)"></div>
				</div>
			</div>
			<div class="cont-container">
				<div class="week-box" v-if="containerTop.show">
					<div class="week">一</div>
					<div class="week">二</div>
					<div class="week">三</div>
					<div class="week">四</div>
					<div class="week">五</div>
					<div class="week">六</div>
					<div class="week">日</div>
				</div>
				<div class="container" :class="containerTop.className" ref="container">
					<div class="yearList">
						<div class="year-box"
						     v-for="(item, index) in yearList.list"
						     :key="index">
							<div class="year"
							     :class="item.type"
							     @click="ininMonth(item.val,item.type)">{{item.val}}
							</div>
						</div>
					</div>
					<div class="monthList">
						<div class="month-box"
						     v-for="(item, index) in monthList"
						     :key="index">
							<div class="month"
							     :class="item.type"
							     @click="monthChange(item.val,item.type)">{{item.val}}月
							</div>
						</div>
					</div>
					<div class="dayList">
						<div class="day-box" :class="item.boxClass"
						     v-for="(item, index) in dayList"
						     :key="index">
							<div class="day"
							     :class="item.type"
							     @click="dayChange(item.val)">{{item.val}}
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="but-box">
			<div class="preview">{{outputDate}}</div>
			<div class="button-box">
				<div class="cancel" @click="closeDate()">取消</div>
				<div class="confirm" @click="closeDate('get')">确定</div>
			</div>
		</div>
	</div>
</template>
<script>
    import util from './util.js'

    export default {
        props: ["dateBoxRegion", "display", "dateParam"],
        data() {
            return {
                dateInput: '',
                dateBox: false,
                dateBoxMold: '',
                dateBoxClass: {
                    top: 0,
                    left: 0
                },
                outputDate: '',
                containerTop: {
                    className: '',
                    show: false
                },
                now: {
                    year: '', month: '', date: ''
                },
                confine: {
                    year: {start: '', end: ''},
                    month: {start: '', end: ''},
                    day: {start: '', end: ''}
                },
                bannerBox: {
                    yearMonth: {
                        show: false,
                        date: 5,
                        upDown: true
                    },
                    month: {
                        show: false,
                        month: '',
                        upDown: true
                    },
                    yearYear: {
                        show: false,
                        year: '',
                        upDown: false
                    },
                    upDown: {
                        show: false,
                        obj: ''
                    }
                },
                yearList: {
                    confine: [1970, 2020],
                    scroll: 0,
                    list: []
                },
                monthList: [],
                dayList: []
            }
        },
        watch: {
            dateBoxRegion: {
                deep: true,
                handler(val) {
                    if (val) {
                        this.openDate()
                    }
                }
            },
            dateBox: {
                deep: true,
                handler(val) {
                    if (val) {
                        window.addEventListener('mousedown', this.otherHandler)
                    } else {
                        window.removeEventListener('mousedown', this.otherHandler)
                    }
                }
            },
            'bannerBox.yearYear.show': {
                deep: true,
                handler(val) {
                    if (val) {
                        this.containerTop.className = 'no-top'
                        this.containerTop.show = false
                        this.bannerBox.month.show = false
                        this.monthList = []
                        this.bannerBox.yearMonth.show = false
                        this.dayList = []
                        this.bannerBox.upDown.show = this.bannerBox.yearYear.upDown
                        this.bannerBox.upDown.obj = ''
                    }
                }
            },
            'bannerBox.month.show': {
                deep: true,
                handler(val) {
                    if (val) {
                        this.containerTop.className = 'no-top'
                        this.containerTop.show = false
                        this.bannerBox.yearYear.show = false
                        this.yearList.list = []
                        this.bannerBox.yearMonth.show = false
                        this.dayList = []
                        this.bannerBox.upDown.show = this.bannerBox.month.upDown
                        this.bannerBox.upDown.obj = 'year'
                    }
                }
            },
            'bannerBox.yearMonth.show': {
                deep: true,
                handler(val) {
                    if (val) {
                        this.containerTop.className = ''
                        this.containerTop.show = true
                        this.bannerBox.yearYear.show = false
                        this.yearList.list = []
                        this.bannerBox.month.show = false
                        this.monthList = []
                        this.bannerBox.upDown.show = this.bannerBox.yearMonth.upDown
                        this.bannerBox.upDown.obj = 'month'
                    }
                }
            }
        },
        methods: {
            openDate() {
                let dateParamStartArray = [];
                let dateParamEndArray = [];
                let date = new Date();
                let nowYear = date.getFullYear();
                let nowMonth = date.getMonth() + 1;
                let nowDay = date.getDate();
                let outputDate;
                let initDay;
                if (this.dateParam.mold) {
                    this.dateBoxMold = this.dateParam.mold;
                }
                if (this.dateParam.top) {
                    this.dateBoxClass.top = this.dateParam.top;
                }
                if (this.dateParam.left) {
                    this.dateBoxClass.left = this.dateParam.left;
                }
                if (this.dateParam.start) {
                    dateParamStartArray = (this.dateParam.start).split('-');
                } else {
                    dateParamStartArray = [this.yearList.confine[0], 1, 1];
                }
                if (this.dateParam.end) {
                    dateParamEndArray = (this.dateParam.end).split('-');
                } else {
                    dateParamEndArray = [this.yearList.confine[1], 12, 31];
                }
                if (this.display) {
                    outputDate = this.display;
                } else {
                    outputDate = nowYear + '-' + nowMonth + '-' + nowDay;
                }
                initDay = (outputDate.split('-'))[2];
                this.confine = {
                    year: {start: dateParamStartArray[0], end: dateParamEndArray[0]},
                    month: {start: dateParamStartArray[1], end: dateParamEndArray[1]},
                    day: {start: dateParamStartArray[2], end: dateParamEndArray[2]}
                };
                this.now = {
                    year: nowYear,
                    month: nowMonth,
                    day: nowDay
                };
                this.initDate(nowYear, nowMonth);
                this.dayChange(initDay);
                this.dateBox = true;
            },
            closeDate(type) {

                let dateInput
                if (type == 'get') {
                    dateInput = this.outputDate
                } else {
                    dateInput = this.dateInput
                }
                this.$emit("getDate", dateInput)

                this.dateInput = dateInput
                this.dateBox = false
//      window.removeEventListener('mouseup', this.otherHandler)
            },
            otherHandler(val) {
                let dateBoxType = false
                let seekclassName = ''
                for (let i = 0; i < val.path.length; i++) {
                    seekclassName = val.path[i].className
                    if (seekclassName && seekclassName.indexOf('mc-dateDate-box') > -1) {
                        dateBoxType = true
                        break
                    }
                }
                if (!dateBoxType) {
                    this.closeDate()
                }
            },
            monthChange(val, type) {
                let year = this.bannerBox.yearYear.year
                let initDay
                if (type && type == 'readonly') {
                    return
                }
                initDay = ((this.outputDate).split('-'))[2]
                this.initDate(year, val)
                this.dayChange(initDay, true)
            },
            initDate(year, month) {
                let dateList = []
                let date = new Date()
                let yearNum = parseInt(year)
                let monthNum = parseInt(month)
                let dateLength
                let oneDateWeekday
                let nowYear = parseInt(this.now.year)
                let nowMonth = parseInt(this.now.month)
                let nowDay = parseInt(this.now.day)
                let startYear = parseInt(this.confine.year.start)
                let endYear = parseInt(this.confine.year.end)
                let startMonth = parseInt(this.confine.month.start)
                let endMonth = parseInt(this.confine.month.end)
                let startDay = parseInt(this.confine.day.start)
                let endDay = parseInt(this.confine.day.end)
                let calculateStart
                let calculateEnd
                let calculateRegionStart
                let calculateRegionEnd
                date = new Date(yearNum, monthNum, 0)
                dateLength = date.getDate()
                date.setDate(1)
                oneDateWeekday = date.getDay()
                if (oneDateWeekday == 0) {
                    oneDateWeekday = 7
                }
                for (let i = 1; i < oneDateWeekday; i++) {
                    dateList.push({
                        val: '',
                        type: ''
                    })
                }
                calculateStart = startYear + '-' + startMonth + '-' + startDay
                calculateEnd = yearNum + '-' + monthNum + '-' + 1
                calculateRegionStart = util.calculateRegion(calculateStart, calculateEnd)
                calculateEnd = yearNum + '-' + monthNum + '-' + dateLength
                calculateStart = endYear + '-' + endMonth + '-' + endDay
                calculateRegionEnd = util.calculateRegion(calculateStart, calculateEnd)
                if ((!calculateRegionStart.type) && (calculateRegionEnd.type)) {
                    for (let i = 1; i <= dateLength; i++) {
                        dateList.push({
                            val: i,
                            type: 'active'
                        })
                    }
                }
                if ((!calculateRegionStart.type) && (!calculateRegionEnd.type)) {
                    for (let i = 1; i <= dateLength; i++) {
                        if (i <= (dateLength - calculateRegionEnd.num)) {
                            dateList.push({
                                val: i,
                                type: 'active'
                            })
                        } else {
                            dateList.push({
                                val: i,
                                type: 'readonly'
                            })
                        }
                    }
                }
                if ((calculateRegionStart.type) && (!calculateRegionEnd.type)) {
                    for (let i = 1; i <= dateLength; i++) {
                        if ((i > (calculateRegionStart.num)) && (i <= (dateLength - calculateRegionEnd.num))) {
                            dateList.push({
                                val: i,
                                type: 'active'
                            })
                        } else {
                            dateList.push({
                                val: i,
                                type: 'readonly'
                            })
                        }
                    }
                }
                if ((calculateRegionStart.type) && (calculateRegionEnd.type)) {
                    for (let i = 1; i <= dateLength; i++) {
                        if (i > (calculateRegionStart.num)) {
                            dateList.push({
                                val: i,
                                type: 'active'
                            })
                        } else {
                            dateList.push({
                                val: i,
                                type: 'readonly'
                            })
                        }
                    }
                }
                if ((yearNum == nowYear) && (monthNum == nowMonth)) {
                    for (let i = 0; i < dateLength; i++) {
                        if (dateList[i].val == nowDay) {
                            dateList[i].type = dateList[i].type + ' now'
                        }
                    }
                }
                this.bannerBox.month.month = monthNum
                this.bannerBox.yearYear.year = yearNum
                this.bannerBox.yearMonth.show = true
                this.dayList = dateList
            },
            ininMonth(year, type) {
                let monthList = []
                let date = new Date()
                let yearNum
                let startYear = parseInt(this.confine.year.start)
                let endYear = parseInt(this.confine.year.end)
                let startMonth = parseInt(this.confine.month.start)
                let endMonth = parseInt(this.confine.month.end)
                let nowYear = parseInt(this.now.year)
                let nowMonth = parseInt(this.now.month)
                let confine = false
                let confineMonth = false
                let confineStartMonth = false
                let confineEndMonth = false
                if (type && type == 'readonly') {
                    return
                }
                if (year) {
                    yearNum = parseInt(year)
                } else {
                    yearNum = date.getFullYear()
                }
                if ((startYear <= yearNum) && (yearNum <= endYear)) {
                    confine = true
                    if ((startYear < yearNum) && (yearNum < endYear)) {
                        confineMonth = true
                    }
                    if (startYear == yearNum) {
                        confineStartMonth = true
                    }
                    if (endYear == yearNum) {
                        confineEndMonth = true
                    }
                }
                for (let i = 1; i < 13; i++) {
                    if (confine) {
                        if (confineMonth) {
                            monthList.push({
                                val: i,
                                type: 'active'
                            })
                        }
                        if (confineStartMonth && confineEndMonth) {
                            if ((startMonth <= i) && (i <= endMonth)) {
                                monthList.push({
                                    val: i,
                                    type: 'active'
                                })
                            } else {
                                monthList.push({
                                    val: i,
                                    type: 'readonly'
                                })
                            }
                        }
                        if (confineStartMonth && !confineEndMonth) {
                            if (startMonth <= i) {
                                monthList.push({
                                    val: i,
                                    type: 'active'
                                })
                            } else {
                                monthList.push({
                                    val: i,
                                    type: 'readonly'
                                })
                            }
                        }
                        if (!confineStartMonth && confineEndMonth) {
                            if (i <= endMonth) {
                                monthList.push({
                                    val: i,
                                    type: 'active'
                                })
                            } else {
                                monthList.push({
                                    val: i,
                                    type: 'readonly'
                                })
                            }
                        }
                    } else {
                        monthList.push({
                            val: i,
                            type: 'readonly'
                        })
                    }
                    if ((nowYear == yearNum) && (nowMonth == i)) {
                        monthList[i - 1].type = monthList[i - 1].type + ' now'
                    }
                }
                this.bannerBox.yearYear.year = yearNum
                this.bannerBox.month.show = true
                this.monthList = monthList
            },
            initYear() {
                let yearList = []
                let startYear = parseInt(this.confine.year.start)
                let endYear = parseInt(this.confine.year.end)
                let nowYear = parseInt(this.now.year)
                let startYearNum = parseInt(this.yearList.confine[0])
                let endYearNum = parseInt(this.yearList.confine[1])
                let yearLength = endYearNum - startYearNum
                let yearLineNum = 0
                for (let i = 0; i <= yearLength; i++) {
                    if ((startYear <= (startYearNum + i)) && ((startYearNum + i) <= endYear)) {
                        yearList.push({
                            val: startYearNum + i,
                            type: 'active'
                        })
                    } else {
                        yearList.push({
                            val: startYearNum + i,
                            type: 'readonly'
                        })
                    }
                    if ((startYearNum + i) == nowYear) {
                        yearList[i].type = yearList[i].type + ' now'
                    }
                }
                this.bannerBox.yearYear.show = true
                this.yearList.list = yearList
                this.$nextTick(() => {
                    yearLineNum = (parseInt(startYear) - parseInt(this.yearList.confine[0])) / 4
                    yearLineNum = parseInt(yearLineNum)
                    this.$refs.container.scrollTop = yearLineNum * 73
                })
            },
            rollContainer(type, obj) {
                let year
                let month
                let confineYearStart = parseInt(this.confine.year.start)
                let confineYearEnd = parseInt(this.confine.year.end)
                let confineMonthStart = parseInt(this.confine.month.start)
                let confineMonthEnd = parseInt(this.confine.month.end)
                let outputDateArray = (this.outputDate).split('-')
                let initDay = ''
                switch (obj) {
                    case 'year':
                        year = parseInt(this.bannerBox.yearYear.year)
                        if ((type == 'up') && ((year - 1) >= confineYearStart)) {
                            year = year - 1
                        }
                        if ((type == 'down') && ((year + 1) <= confineYearEnd)) {
                            year = year + 1
                        }
                        this.bannerBox.yearYear.year = year
                        this.ininMonth(year)
                        break
                    case 'month':
                        year = parseInt(this.bannerBox.yearYear.year)
                        month = parseInt(this.bannerBox.month.month)
                        if ((type == 'up') && (year == confineYearStart) && (month - 1) >= confineMonthStart) {
                            month = month - 1
                        }
                        if ((type == 'up') && (year > confineYearStart)) {
                            month = month - 1
                        }
                        if ((type == 'down') && (year == confineYearEnd) && ((month + 1) <= confineMonthEnd)) {
                            month = month + 1
                        }
                        if ((type == 'down') && (year < confineYearEnd)) {
                            month = month + 1
                        }
                        if (month < 1) {
                            year = year - 1
                            month = 12
                        }
                        if (month > 12) {
                            year = year + 1
                            month = 1
                        }
                        this.bannerBox.yearYear.year = year
                        this.bannerBox.month.month = month
                        this.initDate(year, month)
                        if ((outputDateArray[0] == year) && (outputDateArray[1] == month)) {
                            initDay = outputDateArray[2]
                        }
                        this.dayChange(initDay)
                        break
                }
            },
            dayChange(val, monthChange) {
                let startDate = this.confine.year.start + '-' + this.confine.month.start + '-' + this.confine.day.start
                let endDate = this.confine.year.end + '-' + this.confine.month.end + '-' + this.confine.day.end
                let prefix = this.bannerBox.yearYear.year + '-' + this.bannerBox.month.month + '-'
                let distinguish = prefix + val
                let resultStart
                let resultEnd
                let hoverOk
                let hoverNo
                let newDayList = []
                if (this.dayList.length < 1) return
                resultStart = util.calculateRegion(distinguish, startDate)
                resultEnd = util.calculateRegion(endDate, distinguish)
                if (resultStart.type && resultEnd.type) {
                    this.dayList.map((m) => {
                        if ((m.type).indexOf('active') > -1) {
                            if (monthChange) {
                                if ((prefix + m.val) == this.outputDate) {
                                    (m.type).indexOf('hover') > -1 ? hoverOk = m.type : hoverOk = m.type + ' hover'
                                    newDayList.push({
                                        val: m.val,
                                        type: hoverOk
                                    })
                                } else {
                                    hoverNo = (m.type).replace(new RegExp('hover'), "")
                                    newDayList.push({
                                        val: m.val,
                                        type: hoverNo
                                    })
                                }
                            } else {
                                if (m.val == val) {
                                    (m.type).indexOf('hover') > -1 ? hoverOk = m.type : hoverOk = m.type + ' hover'
                                    newDayList.push({
                                        val: m.val,
                                        type: hoverOk
                                    })
                                    this.outputDate = distinguish
                                } else {
                                    hoverNo = (m.type).replace(new RegExp('hover'), "")
                                    newDayList.push({
                                        val: m.val,
                                        type: hoverNo
                                    })
                                }
                            }
                        } else {
                            newDayList.push({
                                val: m.val,
                                type: m.type
                            })
                        }
                    })
                    this.dayList = newDayList
                }
            }


        }
    }
</script>