<template>
	<ciy-header ref="header" title="ciy-calendar组件"></ciy-header>
	<view>
		<view class="ciy-card">
			<view class="title">日历选择器</view>
			<view class="content">
				显示日历，选择某个日期<br />
				可定制周框和日框显示效果。<br />
				原生开发，无依赖。<br />
			</view>
		</view>
		<form @submit="submitlog">
			<view class="tip">默认效果:</view>
			<ciy-calendar name="ciy1" v-model="formvalue" @change="chglog('change', $event)" @viewchange="chglog('viewchange', $event)"></ciy-calendar>

			<view class="tip">简单定制:</view>
			<view style="margin: 0 2em;background:linear-gradient(45deg,var(--man7),var(--man4))">
				<ciy-calendar name="ciy2" weekmonday clearbtn hasmore bordercolor="#ff0000" selecttextcolor="#ff0000" selectbg="linear-gradient(335deg, #8fffac, #32bcf1);" :value="formvalue" mindate="2024-6-10" :maxdate="maxdate" @change="chglog('change', $event)" @viewchange="chglog('viewchange', $event)"></ciy-calendar>
			</view>
			<view class="tip">
				多语言:
				<text v-for="(item,index) in locales" class="lang" :class="{selected:locale == item.id}" @tap="setlocale(item.id)">{{item.name}}</text>
			</view>
			<view class="tip">选择月份:</view>
			<view>
				<ciy-calendar name="ciy3" selectmonth weekmonday clearbtn hasmore :value="formvalue" @change="chglog('change', $event)" @viewchange="chglog('viewchange', $event)"></ciy-calendar>
			</view>

			<view class="tip">Slot定制:</view>
			<view style="margin: 0 0.5em;background:#ffffff;border-radius: 0.5em;border:1px solid #dddddd;box-shadow: 2px 2px 5px #cccccc;">
				<ciy-calendar name="ciy4" height="29em" :value="formvalue" @change="chglog('change', $event)" @viewchange="chglog('viewchange', $event)">
					<template v-slot:header="{itm}">
						<view class="week">周{{itm.week}}</view>
					</template>
					<template v-slot:data="{itm}">
						<view class="day" :class="{qdday:qd(itm),qdsel:itm.select}">{{itm.day}}</view>
					</template>
				</ciy-calendar>
			</view>
			<view class="txt-center px4 py4">
				<button class="btn" form-type="submit">提交表单</button>
				<button class="btn" @tap="formvalue=1723456700">改变值</button>
			</view>

			<view class="ciy-card formcard" v-if="formdata">
				<view class="content">
					<view v-html="tobr(formdata, true)" class="formdata"></view>
				</view>
			</view>
		</form>
		<view class="ciy-card">
			<view class="title">属性</view>
			<view class="content">
				<view class="prp">name,value,v-model</view>
				<view class="hr"></view>
				<view class="prp">initevent</view>
				<view class="tip">
					是否产生初始事件。<br />
					默认 false
				</view>
				<view class="hr"></view>
				<view class="prp">hasmore</view>
				<view class="tip">
					是否form携带更多格式的数据。<br />
					默认 false
				</view>
				<view class="hr"></view>
				<view class="prp">bordercolor</view>
				<view class="tip">
					选中日期边框和周列分隔线颜色。<br />
					默认 var(--bg6)
				</view>
				<view class="hr"></view>
				<view class="prp">selecttextcolor</view>
				<view class="tip">
					选中日期、选择年、选择月的文字色。<br />
					默认 var(--man5)
				</view>
				<view class="hr"></view>
				<view class="prp">selectbg</view>
				<view class="tip">
					选中日期背景色。<br />
					默认 var(--bg1)
				</view>
				<view class="hr"></view>
				<view class="prp">height</view>
				<view class="tip">
					组件高度。<br />
					默认 23em
				</view>
				<view class="hr"></view>
				<view class="prp">selectmonth</view>
				<view class="tip">
					选择月份模式。<br />
					默认 false
				</view>
				<view class="hr"></view>
				<view class="prp">weekmonday</view>
				<view class="tip">
					是否周一在第一列。<br />
					默认 false 周日在第一列
				</view>
				<view class="hr"></view>
				<view class="prp">mindate,maxdate</view>
				<view class="tip">
					可选日期范围，如果不设则不限制。<br />
					数据格式: 2020-12-12、1607702400
				</view>
				<view class="hr"></view>
				<view class="prp">clearbtn</view>
				<view class="tip">
					是否显示不选日期按钮。点击则清空日期<br />
					默认 false 不显示
				</view>
			</view>
		</view>
		<view class="ciy-card">
			<view class="title">方法</view>
			<view class="content">
				无
			</view>
		</view>
		<view class="ciy-card">
			<view class="title">事件</view>
			<view class="content">
				<view class="evt">@change, update:modelValue</view>
				<view class="tip">
					数值变更事件<br />
					from: init,click,today,nodate
				</view>
				<view class="hr"></view>
				<view class="evt">@viewchange</view>
				<view class="tip">
					数值变更事件<br />
					from: year,month
				</view>
				<view class="hr"></view>
				<view class="log" v-for="(item, index) in eventlog" :key="index">
					<text class="code">{{eventlog.length - index}}</text>
					{{item}}
				</view>
			</view>
		</view>
		<view class="hr"></view>
	</view>
</template>

<style>
	@import '@/pages/demo/zdemo.css';

	.week {
		text-align: center;
		line-height: 2em;
		background: linear-gradient(0deg, #ffffff, #d3ebf3);
		border-right: 1px solid #ffffff;
	}

	.day {
		line-height: 4em;
	}

	.qdday {
		background: linear-gradient(45deg, var(--man4), var(--man7));
		color: var(--bg1);
		overflow: hidden;
		position: relative;
	}

	.qdday::before {
		content: '';
		position: absolute;
		bottom: -1.8em;
		right: 0;
		background-color: var(--bg3);
		width: 2em;
		height: 2em;
		border: 1px solid var(--man5);
		transform: rotate(45deg);
		transform-origin: right bottom;
	}

	.qdsel {
		color: var(--dag6);
	}
</style>

<script>
	import zmixin from '@/pages/demo/zmixin.js';
	export default {
		mixins: [zmixin],
		data() {
			return {
				formvalue: 0,
				maxdate: 0
			}
		},
		onLoad() {
			this.maxdate = this.tostamp() + 86400 * 7;
		},
		methods: {
			qd(e) {
				if (e.day == '')
					return false;
				return Math.random() > 0.7;
			}
		}
	}
</script>