<template>
	<ciy-header ref="header" title="ciy-select组件"></ciy-header>
	<view>
		<view class="sti" :style="{top:(header_statusbar_height+header_title_height)+'px'}">
			<ciy-query ref="query" :gdict="g" :qry="querys"></ciy-query>
		</view>
		<view class="ciy-card">
			<view class="title">单选下拉框</view>
			<view class="content">
				有筛选能力，可添加增量选项。<br />
				相比传统picker组件，可与字典联动。<br/>
				支持选项自定义，可多列排列。
			</view>
		</view>
		<view v-for="n in 5" :key="n" class="zw"> 占位 {{n}}</view>
		<form @submit="submitlog">
			<view class="flex flex-center py1">
				<view class="px2">选项数</view>
				<button size="mini" @tap="setrange(5)">5个</button>
				<button size="mini" @tap="setrange(10)">10个</button>
				<button size="mini" @tap="setrange(20)">20个</button>
				<button size="mini" @tap="setrange(120)">120个</button>
				<view class="flex1"></view>
			</view>
			<view class="ciy-form">
				<label>原生组件</label>
				<view>
					<picker name="ori" mode="selector" :value="txtori" :range="rang" range-key="name" @change="chglog('change', $event)">选择</picker>
				</view>
			</view>
			<view class="ciy-form">
				<label>v-model绑定</label>
				<view>
					<ciy-select name="ciy1" :range="rang" v-model="formvalue" @change="chglog('change', $event)" @search="chglog('search', $event)"></ciy-select>
				</view>
			</view>
			<view class="ciy-form">
				<label>value绑定</label>
				<view>
					<ciy-select hasmore initevent itemalign="center" :value="formvalue" name="ciy2" :range="rang" @change="chglog('change', $event)" @search="chglog('search', $event)"></ciy-select>
				</view>
			</view>
			<view class="ciy-form">
				<label>禁用</label>
				<view>
					<ciy-select placeholder="" disabled :value="formvalue" name="ciy3" :range="rang" @change="chglog('change', $event)" @search="chglog('search', $event)"></ciy-select>
				</view>
			</view>
			<view class="ciy-form">
				<label class="imp">自定义列表</label>
				<view>
					<ciy-select left placeholder="请选择" :value="formvalue" name="ciy4" :range="rang" @change="chglog('change', $event)" @search="chglog('search', $event)">
						<template v-slot:list="{data}">
							<view style="background:var(--bg2);border-radius: 0.5em;">
								<view :id="'selectitem-' + index" v-for="(item,index) in data.range" :key="index" @tap="data.onselect(index);" style="padding:1em;background:linear-gradient(90deg, var(--bg9), var(--bg4));margin: 0.5em;border-radius: 0.5em;">
									{{item.name}}
								</view>
							</view>
						</template>
					</ciy-select>
				</view>
			</view>
			<view class="ciy-form">
				<label class="imp">少于10不搜索</label>
				<view>
					<ciy-select :minselectsearch="10" :value="formvalue" name="ciy5" :range="rang" @change="chglog('change', $event)" @search="search"></ciy-select>
				</view>
			</view>
			<view class="ciy-form">
				<label>多列</label>
				<view>
					<ciy-select :rows="3" itemalign="center" :value="formvalue" name="ciy6" :range="rang" @change="chglog('change', $event)" @search="chglog('search', $event)"></ciy-select>
				</view>
			</view>
			<view class="ciy-form">
				<label>显示样式</label>
				<view>
					<ciy-select :ciystyle="{color:'#cc0000'}" :value="formvalue" name="ciy7" :range="rang" @change="chglog('change', $event)" @search="chglog('search', $event)"></ciy-select>
				</view>
			</view>
			<view class="ciy-form">
				<label>无箭头</label>
				<view>
					<ciy-select noarrow :value="formvalue" name="ciy8" :range="rang" @change="chglog('change', $event)" @search="chglog('search', $event)"></ciy-select>
				</view>
			</view>
			<view class="ciy-form">
				<label>文本range</label>
				<view>
					<ciy-select :value="formvalue" name="ciy9" range="10:选10.20:选20.33:选33" @change="chglog('change', $event)" @search="chglog('search', $event)"></ciy-select>
				</view>
			</view>

			<view class="txt-center px4 py4">
				<button class="btn" form-type="submit">提交表单</button>
				<button class="btn" @tap="formvalue=2">改变值</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="slt">list自定义选项</view>
				<view class="hr"></view>
				<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">chkuse</view>
				<view class="tip">
					是否校验range中的isuse==2。<br />
					默认 false
				</view>
				<view class="hr"></view>
				<view class="prp">placeholder</view>
				<view class="tip">
					占位文字。<br />
					默认 请选择
				</view>
				<view class="hr"></view>
				<view class="prp">range</view>
				<view class="tip">
					选项数组，object需包含id,name。<br />
				</view>
				<view class="hr"></view>
				<view class="prp">left</view>
				<view class="tip">
					是否左侧显示。<br />
					默认 false
				</view>
				<view class="hr"></view>
				<view class="prp">itemalign</view>
				<view class="tip">
					设置选项上的text-align属性<br/>
					left/center/right/justify等。<br />
					默认 无
				</view>
				<view class="hr"></view>
				<view class="prp">all</view>
				<view class="tip">
					在range上增加一个0值选项<br/>
					默认 无
				</view>
				<view class="hr"></view>
				<view class="prp">ciystyle</view>
				<view class="tip">
					内部显示属性<br/>
				</view>
				<view class="hr"></view>
				<view class="prp">disabled</view>
				<view class="tip">
					禁止选择。<br />
					默认 false
				</view>
				<view class="hr"></view>
				<view class="prp">noarrow</view>
				<view class="tip">
					是否无箭头。<br />
					默认 false
				</view>
				<view class="hr"></view>
				<view class="prp">rows</view>
				<view class="tip">
					选项列数。<br />
					默认 1
				</view>
				<view class="hr"></view>
				<view class="prp">minselectsearch</view>
				<view class="tip">
					选项少于n条，则不显示搜索框。<br />
					默认 5
				</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 class="fun">Selitem(index)</view>
				<view class="tip">设置选中项</view>
			</view>
		</view>
		<view class="ciy-card">
			<view class="title">事件</view>
			<view class="content">
				<view class="evt">@search</view>
				<view class="tip">
					数值变更事件<br />
					from: input,confirm<br />
					接收数据后，异步加载新字典数据，调用Addrange函数更新选项。<br />
				</view>
				<view class="hr"></view>
				<view class="evt">@change, update:modelValue</view>
				<view class="tip">
					数值变更事件<br />
					from: init,select<br/>
					value: 当前选择项object<br/>
					lastvalue: 历史选择项object<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>
	</view>
	<ciy-tabbar ref="tabbar"></ciy-tabbar>
</template>

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

<script>
	import zmixin from '@/pages/demo/zmixin.js';
	export default {
		mixins: [zmixin],
		data() {
			return {
				formvalue: '',
				querys: [{
						form: 'inp1',
						name: '输入1',
						type: 'input'
					},
					{
						form: 'inp2',
						name: '输入2',
						type: 'input'
					},
					{
						form: 'inp3',
						name: '输入3',
						type: 'input'
					},
					{
						form: 'inp4',
						name: '输入4',
						type: 'input'
					},
					{
						form: 'inp5',
						name: '输入5',
						type: 'input'
					},
					{
						form: 'sel',
						name: '下拉选项',
						type: 'select',
						select: 'cata_auditstatus',
						all: '全部'
					},
					{
						form: 'inp6',
						name: '输入6',
						type: 'input'
					},
					{
						form: 'inp7',
						name: '输入7',
						type: 'input'
					},
					{
						form: 'inp8',
						name: '输入8',
						type: 'input'
					},
					{
						form: 'inp9',
						name: '输入9',
						type: 'input'
					},
					{
						form: 'inp10',
						name: '输入10',
						type: 'input'
					},
					{
						form: 'inp11',
						name: '输入11',
						type: 'input'
					},
					{
						form: 'inp12',
						name: '输入12',
						type: 'input'
					},
					{
						form: 'inp13',
						name: '输入13',
						type: 'input'
					}
				],
				rang: [],
				txtori: 1,
				formvalue: ""
			}
		},
		onLoad() {
			this.setrange(3);
		},
		methods: {
			setrange(num) {
				this.rang = [];
				for (var i = 1; i <= num; i++) {
					this.rang.push({
						id: i,
						name: '选项' + i
					});
				}
			},
			search(e) {
				if (!e.value)
					return;
				//请求ajax
				var newrange = [];
				var x = parseInt(Math.random() * 100);
				newrange.push({
					id: x,
					name: e.value + '新增' + x
				});
				for (var i = 0; i < 30; i++) {
					x = parseInt(Math.random() * 100);
					newrange.push({
						id: x,
						name: e.value + '新增' + x
					});
				}
				e.com.Addrange(newrange);
			}
		}
	}
</script>