<template>
	<ciy-header ref="header" title="ciy-selcas组件"></ciy-header>
	<view>
		<view class="ciy-card">
			<view class="title">联级选择框</view>
			<view class="content">
				多级联级选择。<br />
				选项原始数据格式，[{id,name,upid}]数组。<br />
			</view>
		</view>
		<form @submit="submitlog">
			<view class="ciy-form">
				<label>v-model绑定</label>
				<view>
					<ciy-selcas v-model="formvalue" name="ciy1" :range="g.ciy_arearpc" @change="chglog('change', $event)"></ciy-selcas>
				</view>
			</view>
			<view class="ciy-form">
				<label>value绑定</label>
				<view>
					<ciy-selcas left hasmore placeholder="选择地区" :value="formvalue" name="ciy2" :range="g.ciy_arearpc" @change="chglog('change', $event)"></ciy-selcas>
				</view>
			</view>
			<view class="ciy-form">
				<label>禁用</label>
				<view>
					<ciy-selcas disabled :value="formvalue" name="ciy3" :range="g.ciy_arearpc" @change="chglog('change', $event)"></ciy-selcas>
				</view>
			</view>
			<view class="ciy-form">
				<label class="imp">自定义显示</label>
				<view>
					<ciy-selcas :value="formvalue" name="ciy4" :range="g.ciy_arearpc" @change="chglog('change', $event)">
						<template v-slot:list="{data}">
							<view class="code" v-for="(item,index) in data.value.sels" :key="index">
								{{item.name}}
							</view>
							<view v-if="data.value.sels.length == 0" style="color:var(--txt1);">选择地区</view>
						</template>
					</ciy-selcas>
				</view>
			</view>
			<view class="ciy-form">
				<label class="imp">选择部分</label>
				<view>
					<ciy-selcas initevent allowpart clearbtn :value="formvalue" name="ciy5" :range="g.ciy_arearpc" :rootupid="0" @change="chglog('change', $event)"></ciy-selcas>
				</view>
			</view>
			<view class="ciy-form">
				<label>增量加载</label>
				<view>
					<ciy-selcas hasmore asyncdata @loaddata="loaddata" :value="formvalue" name="ciy6" :range="dict" @change="chglog('change', $event)"></ciy-selcas>
				</view>
			</view>

			<view class="txt-center px4 py4">
				<button class="btn" form-type="submit">提交表单</button>
				<button class="btn" @tap="formvalue=210112">改变值</button>
				<button class="btn" @tap="formvalue=140600">改变值</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">disabled</view>
				<view class="tip">
					禁止选择。<br />
					默认 false
				</view>
				<view class="hr"></view>
				<view class="prp">hasmore</view>
				<view class="tip">
					是否form携带更多格式的数据。<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">range</view>
				<view class="tip">
					选项数组，object需包含id,name,upid。<br />
				</view>
				<view class="hr"></view>
				<view class="prp">placeholder</view>
				<view class="tip">
					占位文字。<br />
					默认 请选择
				</view>
				<view class="hr"></view>
				<view class="prp">clearbtn</view>
				<view class="tip">
					是否显示清空按钮。<br />
					默认 false 不显示
				</view>
				<view class="hr"></view>
				<view class="prp">rootupid</view>
				<view class="tip">
					根upid值。<br/>
					首先在range中检索upid为该值的选项。<br />
					默认 undefined
				</view>
				<view class="hr"></view>
				<view class="prp">allowpart</view>
				<view class="tip">
					是否允许选择一部分。<br />
					默认 false
				</view>
				<view class="hr"></view>
				<view class="prp">asyncdata</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,clear,done
				</view>
				<view class="hr"></view>
				<view class="evt">@loaddata</view>
				<view class="tip">
					当asyncdata开启后，所有无下级的选项都将调用该事件。<br />
					如未正确响应，则认为该选项无需加载下级。<br />
					事件参数: range, success/fail(function)<br />
					1、加载下级选项数据，更新range属性。<br />
					2、成功则调用success，失败调用fail。<br />
					如果调用fail，用再次点击会重试调用。
				</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: 210111,
				dict: [{
					id: 1,
					name: '选项1'
				}, {
					id: 2,
					name: '选项2'
				}, {
					id: 3,
					name: '选项3'
				}, {
					id: 5,
					upid: 1,
					name: '选项1-1'
				}, {
					id: 6,
					upid: 1,
					name: '选项1-2'
				}]
			}
		},
		onLoad() {
			this.load_ciydict(this.file_stor('/dict/ciy_arearpc.js')).then(json => {
				if (json.code != 1)
					return this.alert(json.errmsg);
				this.g.ciy_arearpc = json.arr;
			});
		},
		methods: {
			loaddata(e) {
				console.log('loaddata', e);
				this.eventlog.unshift('loaddata: ' + JSON.stringify(e, null, '    '));
				setTimeout(() => {
					var start = e.range.id * 100;
					if (start > 2000000)
						return e.success();
					for (var i = start; i <= start + 10; i++) {
						this.dict.push({
							id: i,
							upid: e.range.id,
							name: '选项' + (i - start)
						});
					}
					e.success();
				}, 500);
			}
		}
	}
</script>