<template>
	<ciy-header v-if="props.slot" ref="header" :title="props.title" :mode="props.mode">
		<view class="txt-left" style="margin-left:3em;color:var(--dag6);">自定义标题样式</view>
	</ciy-header>
	<ciy-header v-else ref="header" :title="props.title" :mode="props.mode"></ciy-header>
	<view>
		<view>
			<view class="sti" :style="{top:(header_statusbar_height+header_title_height)+'px'}">
				<ciy-query ref="query"></ciy-query>
				<view>header内slot内容</view>
			</view>
			<view class="ciy-card">
				<view class="title">标题栏</view>
				<view class="content">
					<view class="txt-wb">原理</view>
					<view class="tip">
						通过mode可独立扩展多种标题栏效果。<br />
						header_statusbar_height是系统栏高度。<br />
						header_title_height是标题栏高度。<br />
						header_title_margin是标题栏左右边界。<br />
						标题栏是以小程序胶囊做为参照。<br />
					</view>
				</view>
			</view>
			<view class="ciy-card">
				<view class="title">属性</view>
				<view class="content">
					<view class="slt">slot自定义标题部分</view>
					<view style="margin:1em;">
						<ciy-switch v-model="props.slot"></ciy-switch>
					</view>
					<view class="hr"></view>
					<view class="prp">mode</view>
					<view class="tip">
						标题栏显示样式<br />
						　title: 默认效果。<br />
						　　左侧返回键，中间标题。<br />
						　tran: 全屏效果。<br />
						　　左侧漂浮返回键。<br />
						　scroll: 顶部全屏效果，滚动后渐变默认效果。<br />
						　　左侧返回键，中间标题。<br />
					</view>
					<view><ciy-radio left v-model="props.mode" :range="[{id:'title',name:'title'},{id:'tran',name:'tran'},{id:'scroll',name:'scroll'}]"></ciy-radio></view>
					<view class="hr"></view>
					<template v-if="props.mode == 'title'">
						<view class="prp">title</view>
						<view class="tip">标题文本</view>
						<view>
							<ciy-radio left v-model="props.title" :range="[{id:'ciy-header组件',name:'短标题'},{id:'标题1标题2标题3',name:'中标题'},{id:'标题1标题2标题3标题4标题5标题6标题7标题8标题9',name:'长标题'}]"></ciy-radio>
						</view>
					</template>
				</view>
			</view>
			<view class="ciy-card">
				<view class="title">方法</view>
				<view class="content">
					<view class="fun">Getheight</view>
					<view class="tip">获取组件高度</view>
					<button class="btn sm" @tap="callfun('header', 'Getheight')">调用</button>
				</view>
			</view>
			<view class="ciy-card">
				<view class="title">事件</view>
				<view class="content">
					无
					<!-- <view class="evt">@change</view> -->
					<view class="log" v-for="(item, index) in eventlog" :key="index">
						<text class="code">{{eventlog.length - index}}</text>
						{{item}}
					</view>
				</view>
			</view>
		</view>
		<view>
			<view class="bg6 sti py4 px4" :style="{top:(header_statusbar_height+header_title_height)+'px'}">
				顶部悬停
			</view>
			<view v-for="n in 20" :key="n" class="zw"> 占位 {{n}}</view>
		</view>
	</view>
</template>

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

<script>
	import zmixin from '@/pages/demo/zmixin.js';
	export default {
		mixins: [zmixin],
		data() {
			return {
				props:{
					title:'ciy-header组件',
					mode:'title'
				}
			}
		},
		onLoad() {},
		methods: {}
	}
</script>