<template>
	<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（会员ID：20 4  9，营业执照号：  9  1 65   0 1 04 MA7 9 5A  07  X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
	<view class="fui-wrap">
		<view class="fui-page__hd">
			<view class="fui-page__title fui-align__center" @tap="vip">Calendar <image
					src="/static/images/index/light/icon_member_3x.png"></image>
			</view>
			<view class="fui-page__desc">Calendar 日历，用于选择日期区间。支持单选、多选、区间选择。</view>
		</view>
		<view class="fui-page__bd">
			<view class="fui-section__title">单个日期选择/按年加载,滑动切换月份</view>
			<fui-calendar @change="change"></fui-calendar>
			<view class="fui-section__title">多个日期选择/显示农历</view>
			<fui-calendar type="2" :isMultiple="false" showLunar @change="change1"></fui-calendar>
			<view class="fui-section__title">设置自定义描述/角标</view>
			<fui-calendar badgeColor="#09BE4F" :isMultiple="false" @change="change" @dateChange="dateChange"
				ref="calendarRef"></fui-calendar>
			<view class="fui-section__title">设置默认值/范围/仅展示不可选择</view>
			<fui-calendar type="2" :isMultiple="false" language="en" :value="value" disabled minDate="2021-01-01"
				maxDate="2023-12-31">
			</fui-calendar>
			<view class="fui-section__title">区间选择/底部弹出选择</view>
			<view class="fui-flex__center">
				<fui-button type="gray" btn-size="medium" text="日期区间选择" bold :margin="['48rpx','0','0']"
					@click="btnSelect"></fui-button>
			</view>
			<view class="fui-result">您的选择为：{{result}}</view>
			<fui-bottom-popup :show="show">
				<view class="fui-scroll__wrap">
					<view class="fui-calendar-title">请选择日期</view>
					<fui-calendar type="3" :isMultiple="false" showLunar showBtn @change="change2"></fui-calendar>
					<view class="fui-icon__close" @tap.stop="closePopup">
						<fui-icon name="close" :size="48"></fui-icon>
					</view>
				</view>
			</fui-bottom-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//默认值，多选
				value: ['2021-01-06', '2021-01-16', '2021-01-26', '2021-02-08', '2022-01-08', '2022-01-10', '2022-01-20'],
				//区间选择默认值设置
				// value2:['2021-12-06', '2021-12-31'],
				show: false,
				result: '',
				descrDate: ''
			}
		},
		onLoad() {
			uni.showLoading({
				title: '请稍候...'
			})

			setTimeout(() => {
				uni.hideLoading()
			}, 500)
		},
		onReady() {
			if (!this.$refs.calendarRef) return;
			//设置自定义描述数据
			this.$refs.calendarRef.setDescr(this.getDescr)
			//设置角标，返回数组中数据判定为true则显示角标，为false则不显示角标
			this.$refs.calendarRef.setBadge(this.getDescr)
		},
		methods: {
			vip() {
				this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
			},
			change(e) {
				console.log(e)
				this.fui.toast(e.value)
			},
			change1(e) {
				console.log(e)
				this.fui.toast(e.value.join(','))
			},
			btnSelect() {
				this.show = true
			},
			closePopup() {
				this.show = false
			},
			change2(e) {
				this.result = JSON.stringify(e)
				this.closePopup()
			},
			//返回Promise的获取描述数据的函数
			getDescr(year, month, days) {
				//year, month, days 为 组件返回数据
				console.log(year, month, days)
				this.descrDate = `${year}-${month}`
				return new Promise((resolve, reject) => {
					//模拟获取到数据且处理后返回
					setTimeout(() => {
						//返回数据需要处理成和 days格式一致,没有描述则使用空字符串（描述文本不可过长）
						if (true) {
							//成功后处理描述数据，数据顺序需要与days中日期保持一致
							const descrArr = []
							days.forEach((item, index) => {
								//此处仅为模拟判断，具体逻辑需自行结合数据判断
								let descr = ''
								if (month % 2 === 0) {
									descr = (index + 1) % 2 === 0 ? '有号' : ''
								} else {
									descr = index % 2 === 0 ? '有号' : ''
								}
								descrArr.push(descr)
							})
							resolve(descrArr)
						} else {
							//失败
							reject(false)
						}
					}, 200)
				})
			},
			dateChange(e) {
				console.log(e)
				//设置自定义描述数据。页面过于复杂时，可能还未获取到组件实例，可在onReady中初始执行一次
				const date = `${e.year}-${e.month}`
				if (this.descrDate === date) return;
				this.$refs.calendarRef && this.$refs.calendarRef.setDescr(this.getDescr)
			}
		}
	}
</script>

<style>
	.fui-wrap {
		padding-bottom: 64rpx;
	}

	.fui-section__title {
		margin-left: 32rpx;
		box-sizing: border-box;
	}

	.fui-result {
		width: 100%;
		padding: 64rpx 32rpx 32rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		font-weight: normal;
		word-break: break-all;
	}

	.fui-scroll__wrap {
		padding-top: 30rpx;
		position: relative;
	}

	.fui-calendar-title {
		font-size: 30rpx;
		font-weight: bold;
		text-align: center;
		padding-bottom: 24rpx;
	}

	.fui-icon__close {
		position: absolute;
		top: 24rpx;
		right: 24rpx;
	}
</style>