<template>
	<ciy-header title="ciy-inputunitedit组件"></ciy-header>
	<view class="ciy-card">
		<view class="title">三级单位编辑</view>
		<view class="content">
			支持1/2/3级单位，单位间递进整数换算关系。<br />
			文本存储，格式为A、A|1|B、A|1|B|2|C。<br />
			相关数据使用最小单位为准，显示时将转成合适的单位。
		</view>
	</view>
	<form @submit="submitlog">
		<view class="ciy-form">
			<label>v-model绑定</label>
			<view>
				<ciy-inputunitedit name="ciy1" v-model="formvalue" @change="chglog('change', $event)"></ciy-inputunitedit>
			</view>
		</view>
		<view class="ciy-form">
			<label>左侧</label>
			<view>
				<ciy-inputunitedit left hasmore name="ciy2" :value="formvalue" @change="chglog('change', $event)"></ciy-inputunitedit>
			</view>
		</view>
		<view class="ciy-form">
			<label>禁用</label>
			<view>
				<ciy-inputunitedit disabled name="ciy3" :value="formvalue" @change="chglog('change', $event)"></ciy-inputunitedit>
			</view>
		</view>
		<view>{{tounit(formvalue)}}</view>
		<view class="txt-center px4 py4">
			<button class="btn" form-type="submit">提交表单</button>
			<button class="btn" @tap="formvalue='瓶|10|盒'">改值</button>
			<button class="btn" @tap="formvalue='个|12|捆|24|箱'">改值</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">disabled</view>
			<view class="tip">
				禁止选择。<br />
				默认 false
			</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 />
				unit1,unit2,unit3,num12,num23<br />
				默认 false
			</view>
			<view class="hr"></view>
			<view class="prp">left</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,input
			</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>