<template>
	<u-popup :show="MonthDayShow" :round="10" mode="bottom" closeOnClickOverlay @close="cancel">
		<view style="width: 100%;height: 500rpx;">
			<view class="btn">
				<view class="cancel" @click="cancel">
					取消
				</view>
				<view class="confirm" @click="confirm">
					确认
				</view>
			</view>
			<picker-view :indicator-style="indicatorStyle" :value="value" class="picker-view"
				@change="bindChange">
				<picker-view-column>
					<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
				</picker-view-column>
			</picker-view>
		</view>
	</u-popup>
</template>

<script>
	function repair(t){
		if(t <= 9){
			return `0${t}`
		}else{
			return t
		}
		
	}
	export default {
		name: "Month-Day-picker",
		props:{
		show:{
			type:Boolean,
			default:false,
		}	
		},
		data() {
			// 当前月
			const month = new Date().getMonth() + 1;
			// 当前月的数组
			const months = [];
			// 当前月一共几天
			const day = new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0).getDate();
			// 当前月每一天的数组
			const days = [];
			// 当天月的当前天
			let cday = new Date().getDate();
			for (let i = 1; i <= 12; i++) {
				months.push(i)
			}
			for (let i = 1; i <= day; i++) {
				days.push(i)
			}
			return {
				month,
				cday,
				months,
				days,
				indicatorStyle: `height: 50px;`,
				value:[month-1,cday-1],
				valuelist:[month,cday]
			};
		},
		computed:{
			MonthDayShow(){
				return this['show']
			}
		},
		methods:{
			// 取消点击事件
			cancel(){
				this.$emit('cancel')
			},
			// 确认点击事件
			confirm(){
				this['valuelist']  = [new Date().getFullYear(),repair(this['value'][0]+1),repair(this['value'][1]+1)];
				this.$emit('confirm',this['valuelist'])
			},
			// 月日选择器值改变
			bindChange(value){
				this['value'] = [value['detail']['value'][0],value['detail']['value'][1]];
			}
		}
	}
</script>

<style lang="scss">
	.btn {
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 24rpx;
		padding: 0 32rpx;
		.cancel,.confirm{
			padding: 32rpx;
		}
		.confirm {
			color: #FF4F04;
		}
	}

	.picker-view {
		width: 100%;
		height: 400rpx;
		margin-top: 20rpx;
	}

	.item {
		height: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
</style>
