<template>
	<ciy-header ref="header" title="ciy-capcode组件"></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-input name="account" bb v-model="account"></ciy-input>
				</view>
			</view>
			<view class="ciy-form">
				<label>验证码</label>
				<view>
					<ciy-capcode hasmore name="ciy1" btntxt="发送短信" :account="account" :btntxt="props.btntxt" :func="props.func" :placeholder="props.placeholder" :maxlength="props.maxlength" :maxsec="props.maxsec" @change="chglog('change', $event)"></ciy-capcode>
				</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</view>
				<view class="hr"></view>
				<view class="prp">hasmore</view>
				<view class="hr"></view>
				<view class="prp">placeholder</view>
				<view class="tip">
					占位文字。<br />
					默认 请选择
				</view>
				<ciy-input bb v-model="props.placeholder"></ciy-input>
				<view class="hr"></view>
				<view class="prp">btntxt</view>
				<view class="tip">
					按钮文字。<br />
				</view>
				<ciy-input bb v-model="props.btntxt"></ciy-input>
				<view class="hr"></view>
				<view class="prp">account</view>
				<view class="tip">
					外部账号数据。<br />
				</view>
				<view class="hr"></view>
				<view class="prp">func</view>
				<view class="tip">
					调用的函数名称。<br />
				</view>
				<ciy-input bb v-model="props.func"></ciy-input>
				<view class="hr"></view>
				<view class="prp">codelength</view>
				<view class="tip">
					生成的验证码长度。<br />
					默认 4
				</view>
				<ciy-input bb v-model="props.codelength" style="width:4em;"></ciy-input>
				<view class="hr"></view>
				<view class="prp">maxsec</view>
				<view class="tip">
					数秒倒计时。<br />
					默认 60
				</view>
				<ciy-input bb v-model="props.maxsec" style="width:4em;"></ciy-input>
			</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</view>
				<view class="tip">
					发送事件<br />
					from: send,tickend
				</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,
				account: '',
				props:{
					btntxt:'发送短信',
					placeholder:'请选择',
					func:'login.sendsms',
					codelength:4,
					maxsec:60
				}
			}
		},
		onLoad() {
		},
		methods: {
		}
	}
</script>