<template>
	<ciy-header title="ciy-input组件"></ciy-header>
	<view class="ciy-card">
		<view class="title">输入框</view>
		<view class="content">
			相比传统input组件，可在change直接写数据变化的响应代码，无需为初始化单独处理。<br />
		</view>
	</view>
	<form @submit="submitlog">
		<view class="ciy-form">
			<label>原生组件</label>
			<view>
				<input name="ori" v-model="txtori" @focus="chglog('focus', $event)" @blur="chglog('blur', $event)" @change="chglog('change', $event)" @confirm="chglog('confirm', $event)" />
			</view>
		</view>
		<view class="ciy-form">
			<label>v-model绑定</label>
			<view>
				<ciy-input name="ciy1" v-model="formvalue" @change="chglog('change', $event)"></ciy-input>
			</view>
		</view>
		<view class="ciy-form">
			<label>左侧</label>
			<view>
				<ciy-input left placeholder="请输入" :value="formvalue" name="ciy2" @change="chglog('change', $event)"></ciy-input>
			</view>
		</view>
		<view class="ciy-form">
			<label>传统</label>
			<view>
				<ciy-input bb :value="formvalue" name="ciy3" @change="chglog('change', $event)"></ciy-input>
			</view>
		</view>
		<view class="ciy-form">
			<label>自定义样式</label>
			<view>
				<ciy-input :ciystyle="{fontSize:'2em',color:'#cc0000',textAlign:'center'}" :value="formvalue" name="ciy4"></ciy-input>
			</view>
		</view>
		<view class="ciy-form">
			<label>密码</label>
			<view>
				<ciy-input password name="ciy5" :value="formvalue" @change="chglog('change', $event)"></ciy-input>
			</view>
		</view>
		<view class="ciy-form">
			<label>数字输入</label>
			<view class="flex flex-center">
				第
				<ciy-input bb :ciystyle="{width:'3em',margin:'0 0.5em',textAlign:'center',display:'inline-block'}" type="number" name="ciy6" :value="formvalue" @change="chglog('change', $event)"></ciy-input>
				期
			</view>
		</view>
		<view class="ciy-form">
			<label>禁用</label>
			<view>
				<ciy-input disabled name="ciy7" bb :value="formvalue" @change="chglog('change', $event)"></ciy-input>
			</view>
		</view>
		<view class="ciy-form">
			<label>输入限制</label>
			<view>
				<ciy-input maxlength="4" name="ciy8" :value="formvalue" @change="chglog('change', $event)"></ciy-input>
			</view>
		</view>
		<view class="ciy-form">
			<label>键盘按钮</label>
			<view>
				<ciy-input confirmType="search" name="ciy9" :value="formvalue" @change="chglog('change', $event)"></ciy-input>
			</view>
		</view>
		<view class="txt-center px4 py4">
			<button class="btn" form-type="submit">提交表单</button>
			<button class="btn" @tap="formvalue='1234abcd'">改变值</button>
			<button class="btn" @tap="formvalue='1234'">改变数字</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">disabled</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">ciystyle</view>
			<view class="tip">
				针对微信小程序等问题，传递style。
			</view>
			<view class="hr"></view>
			<view class="prp">bb</view>
			<view class="tip">
				是否传统文本框样式。<br />
				默认 false
			</view>
			<view class="hr"></view>
			<view class="prp">placeholder</view>
			<view class="tip">
				占位文字。<br />
			</view>
			<view class="hr"></view>
			<view class="prp">type</view>
			<view class="tip">
				text、number纯数字、idcard身份证、digit小数、tel电话。<br />
				默认 text
			</view>
			<view class="hr"></view>
			<view class="prp">password</view>
			<view class="tip">
				是否密码。<br />
				默认 false
			</view>
			<view class="hr"></view>
			<view class="prp">maxlength</view>
			<view class="tip">
				最大可输入字符数。<br />
				默认 140
			</view>
			<view class="hr"></view>
			<view class="prp">confirmType</view>
			<view class="tip">
				键盘的右下角按钮的文字，text生效。<br />
				　send 发送、search 搜索、go 前往<br />
				　next 下一个、done 完成<br />
				默认 done
			</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,input,confirm
			</view>
			<view class="hr"></view>
			<view class="evt">@focus, blur</view>
			<view class="tip">
				获取焦点、失去焦点事件<br />
			</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>
</template>

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

<script>
	import zmixin from '@/pages/demo/zmixin.js';
	export default {
		mixins: [zmixin],
		data() {
			return {
				formvalue: ''
			}
		},
		onLoad() {},
		methods: {
		}
	}
</script>