<template>
	<ciy-header ref="header" title="ciy-query组件"></ciy-header>
	<view>
		<view class="ciy-card">
			<view class="title">多搜索项栏</view>
			<view class="content">
				<view class="tip">
					组合搜索功能，支持文本框、下拉、开关、单选、多选、数字范围、日期范围、按月、按日。<br />
				</view>
			</view>
		</view>
		<view class="sti" :style="{top:(header_statusbar_height+header_title_height)+'px'}">
			<ciy-query ref="query" :gdict="gdict" :qry="qryinput" @confirm="query_confirm">
				<template v-slot="{itm}">
					<ciy-input :name="itm.item.form" v-model="itm.data[itm.item.form]" style="display: inline-block;border-bottom: 2px solid #cc0000;width:4em"></ciy-input>
				</template>
			</ciy-query>
		</view>
		<view class="ciy-card" v-if="formdata">
			<view class="content">
				<view v-html="tobr(formdata)" class="formdata"></view>
			</view>
		</view>

		<view class="ciy-card">
			<view class="title">属性</view>
			<view class="content">
				<view class="slt">扩展自定义选项</view>
				<view class="hr"></view>
				<view class="prp">qry</view>
				<view class="tip">
					查询选项[{}, {}, ...]。<br />
					type: 类型。input, select, num, bool, radio, checkbox, daterange, month, day, 自定slot<br />
					name: 标题<br />
					form: 表单名<br />
					all: select/radio默认选项名<br />
					select: 字典信息<br />
				</view>
				<view class="hr"></view>
				<view class="prp">gdict</view>
				<view class="tip">
					字典对象{}。<br />
				</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">@confirm</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>
	</view>
	<ciy-tabbar ref="tabbar"></ciy-tabbar>
</template>

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

<script>
	import zmixin from '@/pages/demo/zmixin.js';
	export default {
		mixins: [zmixin],
		data() {
			return {
				gdict: {
					dictsel: [{
						id: 1,
						name: '选项1'
					}, {
						id: 2,
						name: '选项2'
					}]
				},
				qryinput: [{
					type: 'input',
					name: '文本',
					form: 'txt'
				}, {
					type: 'select',
					name: '选择1',
					form: 'sel1',
					select: 'dictsel',
					all: '全部'
				}, {
					type: 'select',
					name: '选择2',
					form: 'sel2',
					all: '全部',
					select: [{
						id: 3,
						name: '直传选项3'
					}, {
						id: 4,
						name: '直传选项4'
					}]
				}, {
					type: 'num',
					name: '范围',
					form: 'rnum',
				}, {
					type: 'bool',
					name: '开关',
					form: 'bol',
				}, {
					type: 'radio',
					name: '单选',
					form: 'rad',
					all: '全部',
					select: [{
						id: 1,
						name: '单1'
					}, {
						id: 2,
						name: '单2'
					}]
				}, {
					type: 'checkbox',
					name: '多选',
					form: 'chk',
					select: [{
						id: 1,
						name: '多1'
					}, {
						id: 2,
						name: '多2'
					}, {
						id: 3,
						name: '多3'
					}]
				}, {
					type: 'daterange',
					name: '日期',
					form: 'date',
				}, {
					type: 'month',
					name: '按月',
					form: 'month',
				}, {
					type: 'day',
					name: '按日',
					form: 'day',
				}, {
					type: 'cot',
					name: '自定',
					form: 'formcot',
				}]
			}
		},
		onLoad() {},
		methods: {
			query_confirm(e) {
				this.formdata = JSON.stringify(e, null, '　') + '';
			}
		}
	}
</script>