<template>
	<ciy-header ref="header" title="ciy-handsign组件"></ciy-header>
	<view>
		<view class="ciy-card">
			<view class="title">手写输入</view>
			<view class="content">
				手写签名，支持水印。<br />
			</view>
		</view>
		<form @submit="submitlog">
			<view class="ciy-form">
				<label>签名</label>
				<view>
					<ciy-handsign name="ciy1" v-model="formvalue" @change="chglog('change', $event)"></ciy-handsign>
				</view>
			</view>
			
			<view class="txt-center px4 py4">
				<button class="btn" form-type="submit">提交表单</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">hasmore</view>
				<view class="tip">
					是否form携带更多格式的数据。<br />
					默认 false
				</view>
				<view class="hr"></view>
				<view class="prp">placeholder</view>
				<view class="tip">
					占位文字。<br />
					默认 请选择
				</view>
				<view class="hr"></view>
				<view class="prp">btime</view>
				<view class="tip">
					是否选择时分时间。<br />
					默认 false
				</view>
				<view class="hr"></view>
				<view class="prp">left</view>
				<view class="tip">
					是否左侧显示。<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">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 class="hr"></view>
				<view class="prp">diastema</view>
				<view class="tip">
					弹出上下间隙，弹出效果更好看。<br />
					默认 12 单位px
				</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,calendar,hour,minute,done
				</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';
</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>