<template>
	<ciy-header ref="header" title="ciy-searchbar组件"></ciy-header>
	<view>
		<view class="ciy-card">
			<view class="title">文字搜索栏</view>
			<view class="content">
				<view class="tip">
					文字搜索框。<br />
				</view>
			</view>
		</view>
		<view class="sti bg3" :style="{top:(header_statusbar_height+header_title_height)+'px'}">
			<ciy-searchbar class="block px2 py2" :placeholder="props.placeholder" :btntxt="props.btntxt" @confirm="query_search"></ciy-searchbar>
		</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="prp">placeholder</view>
				<view class="tip">
					占位文字。<br />
					默认 请选择
				</view>
				<ciy-input bb v-model="props.placeholder"></ciy-input>
				<view class="hr"></view>
				<view class="prp">btntxt</view>
				<view class="tip">
					右侧按钮文字。<br />
				</view>
				<ciy-input bb v-model="props.btntxt"></ciy-input>
				<view class="hr"></view>
				<view class="prp">value</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>
</template>

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

<script>
	import zmixin from '@/pages/demo/zmixin.js';
	export default {
		mixins: [zmixin],
		data() {
			return {
				props:{
					placeholder: '请输入关键字',
					btntxt: '搜索'
				}
			}
		},
		onLoad() {},
		methods: {
			query_search(e) {
				this.formdata = JSON.stringify(e, null, '　') + '';
			}
		}
	}
</script>