<template>
	<view>
		<uni-popup ref="popup" type="bottom" :mask-click="false">
			<view class="picker_root">
				<view class="picker_header">
					<text class="left_text" @click="close" :style="{ color: leftTextColor }">{{ leftText }}</text>
					<text class="title">{{ title }}</text>
					<text class="right_text" @click="affirm" :style="{ color: rightTextColor }">{{ rightText }}</text>
				</view>
				<template v-if="years.length > 0">
					<view class="picker_main">
						<picker-view :indicator-style="indicatorStyle" :value="value" @change="bindChange"
							class="picker_view">
							<picker-view-column>
								<view class="picker_item" v-for="(item, index) in years" :key="index">{{ item }}年</view>
							</picker-view-column>
							<picker-view-column>
								<view class="picker_item" v-for="(item, index) in months" :key="index">{{ item }}月
								</view>
							</picker-view-column>
							<picker-view-column>
								<view class="picker_item" v-for="(item, index) in days" :key="index">{{ item }}日</view>
							</picker-view-column>
						</picker-view>
					</view>
				</template>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: 'pddDatePicker',
		props: {
			title: {
				type: String,
				default: '请选择日期',
			},
			limit: {
				type: Number,
				default: 50,
			},
			leftText: {
				type: String,
				default: '取消',
			},
			leftTextColor: {
				type: String,
				default: '#4E5969',
			},
			rightText: {
				type: String,
				default: '确认',
			},
			rightTextColor: {
				type: String,
				default: '#1677FF',
			},
			startYear: {
				type: Number,
				default: 1970,
			},
			defaultDate: {
				type: Array,
				default: () => [], // 使用工厂函数返回默认值
			},
		},
		data() {
			// 当前时间
			const nowDate = new Date()
			const nowYear = nowDate.getFullYear()
			// 年数组
			const years = []
			const year = nowYear
			for (let i = this.startYear; i <= nowYear + this.limit; i++) {
				years.push(i)
			}
			// 月数组
			const months = []
			const month = nowDate.getMonth() + 1
			for (let i = 1; i <= 12; i++) {
				months.push(i)
			}
			// 日数组
			const days = []
			const day = nowDate.getDate()
			for (let i = 1; i <= 31; i++) {
				days.push(i)
			}
			// 默认日期为今天 按索引来算
			let defaultDate = []
			if (this.defaultDate.length === 0) {
				defaultDate = [nowYear - this.startYear, month - 1, day - 1]
			}
			return {
				years,
				year,
				months,
				month,
				days,
				day,
				value: defaultDate,
				indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth / (750 / 80))}px;`,
			}
		},
		methods: {
			/**
			 * @description 打开
			 */
			open() {
				this.$refs.popup.open()
			},
			/**
			 * @description 关闭
			 */
			close() {
				// this.$refs.popup.close()
				this.$emit('closeTimeS')
				this.$emit('closeTimeE')
			},
			/**
			 * @description 确认
			 */
			affirm() {
				const month = this.month < 10 ? '0' + this.month : this.month
				const day = this.day < 10 ? '0' + this.day : this.day
				const date = `${this.year}-${month}-${day}`
				this.$emit('change', date)
				// this.$refs.popup.close()
			},
			/**
			 * @description 日期变化回调
			 */
			bindChange(e) {
				const value = e.detail.value
				// 赋值年数据
				this.year = this.years[value[0]]
				// 赋值月数据
				this.month = this.months[value[1]]
				// 计算日数据
				const date = new Date(this.year, this.month, 0)
				const leng = date.getDate()
				const arr = []
				for (let i = 1; i <= leng; i++) {
					arr.push(i)
				}
				this.days = arr
				this.day = this.days[value[2]]
			},
		},
	}
</script>

<style scoped>
	view {
		box-sizing: border-box;
	}

	.picker_root {
		width: 100%;
		height: 680rpx;
		background-color: #ffffff;
		border-top-left-radius: 24rpx;
		border-top-right-radius: 24rpx;
		position: relative;
	}

	.picker_main {
		width: 100%;
		height: auto;
		position: absolute;
		left: 0;
		bottom: 0;
	}

	.picker_view {
		width: 100%;
		height: 584rpx;
	}

	.picker_item {
		line-height: 80rpx;
		text-align: center;
	}

	.picker_header {
		width: 100%;
		height: 96rpx;
		padding: 0rpx 44rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 2rpx solid #f2f3f5;
	}

	.title {
		color: #1d2129;
		font-size: 32rpx;
		font-weight: bold;
	}

	.left_text {
		font-size: 32rpx;
	}

	.right_text {
		font-size: 32rpx;
	}
</style>