<template>
	<div class="comp">
		<div class="date-mask" v-if="visible" @click="showCalendar()"></div>
		<div class="ipt-wrap" :class="{'readonly':readonly}">
			<input v-bind:value="value" v-on:input="$emit('input', $event.target.value)" @click="showCalendar(true)" class="ipt" :style="cusStyle" type="type" :readonly="readonly"  :placeholder="placeholder || $t('form.datePicker.datePlaceholder')">
		</div>
		<div v-if="visible" class="date-wrap">
			<div class="calendar-wrap">
				<!-- 标题 -->
				<div class="nav-wrap">
					<div class="date-wrap">
						<div class="pointer nav-btn" @click="onPrevHandler">
							<img src="@/assets/images/form/date-picker/data-picker-icon-up.png">
						</div>
						<div @click="onTypeHandler()" class="date">
							<span class="pointer">
								<template v-if="dateType == 1">
									<!-- {{year}}年{{month}}月 -->
									{{getDateType1}}
								</template>
								<template v-if="dateType == 2">
									{{getDateType2}}
								</template>
								<template v-if="dateType == 3">
									{{yearRange}}
								</template>
							</span>
						</div>
						<div class="pointer nav-btn" @click="onNextHandler">
							<img src="@/assets/images/form/date-picker/data-picker-icon-down.png">
						</div>
					</div>
				</div>
				<!-- 日历躯干 日 -->
				<div v-if="dateType == 1" class="con day">
					<!-- 日历表头 -->
					<div class="th tr">
						<div class="td" :class="{'disable':!weekend}">{{getDayList[0]}}</div>
						<div class="td">{{getDayList[1]}}</div>
						<div class="td">{{getDayList[2]}}</div>
						<div class="td">{{getDayList[3]}}</div>
						<div class="td">{{getDayList[4]}}</div>
						<div class="td">{{getDayList[5]}}</div>
						<div class="td" :class="{'disable':!weekend}">{{getDayList[6]}}</div>
					</div>
					<!-- 日历主体 -->
					<div class="tr">
						<div class="td" v-for="(item,index) in fortmatMonthData" :key="index">
							<div @click="selectDay(item.disable ? null : item)" v-if="item && item.date" class="pointer point" :class="{'sel':item && activity(item),'disable':item.disable}">
								<div>{{item && item.date || ""}}</div>
							</div>
						</div>
					</div>
				</div>

				<!-- 月 -->
				<div v-if="dateType == 2" class="con month">
					<div class="tr">
						<div class="td" v-for="(item,index) in 12" :key="index">
							<div @click="selectMonth(item || '')" class="pointer point ">
								{{getMonthByIndex(item)}}
							</div>
						</div>
					</div>
				</div>

				<!-- 年 -->
				<div v-if="dateType == 3" class="con year">
					<div class="tr">
						<div class="td" v-for="(item,index) in yearList" :key="index">
							<div @click="selectYear(item)" class="pointer point" :class="{'gray':item.disable}">
								{{item.year}}
							</div>
						</div>
					</div>
				</div>

			</div>
		</div>
	</div>
</template>

<script src="./date-picker.js"></script>
<style lang="scss" scoped>
@import "./date-picker.scss";
</style>