<template>
	<ciy-header ref="header" title="ciy_tabbar组件"></ciy-header>
	<view>
		<view class="ciy-card">
			<view class="title">底部导航栏</view>
			<view class="content">
				<view class="txt-wb">设置方法</view>
				<view class="tip">
					在page.json中定义tabbar的所有url。<br />
					在App.vue中设置tabbarArr公共数组，包含所有未登录状态下的图标。数组中包括:<br />
					　name: 图标名称，支持多语言。<br />
					　fullpath: 页面url。<br />
					　selecticon: 选中下的图标，svg原始格式。<br />
					　icon: 未选中的图标，svg原始格式。<br />
					通过更新tabbarArr数组改变tabbar。<br />
				</view>
				<view class="txt-wb">原理</view>
				<view class="tip">
					在公共onLoad函数中隐藏自带tabbar。<br />
					任意设计底部导航栏样式。<br />
					footer_safe_height是底部安全高度。<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="fun">Getheight</view>
				<view class="tip">获取组件高度</view>
				<button class="btn sm" @tap="callfun('tabbar', 'Getheight')">调用</button>
				<view class="hr"></view>
				<view class="fun">app.setTabbar</view>
				<view class="tip">
					object, 设置红点，改变图标、名称<br />
					array, 完全覆盖tabbarArr
				</view>
				<button class="btn sm" @tap="chtabbar()">调用</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 v-for="n in 10" :key="n" class="zw"> 占位 {{n}}</view>
	</view>
	<view class="sti" :style="{bottom:tabbarheight + 'px'}">
		<ciy-ani ref="anibtn">
			<view class="px4 py4">
				<button type="primary" @tap="hidebtn">动画按钮</button>
			</view>
		</ciy-ani>
	</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 {
				tabbarheight: -100
			}
		},
		onLoad() {
			setTimeout(() => {
				this.getrefs('tabbar').then(ref => {
					this.tabbarheight = ref.Getheight();
				console.log('asdfasdf',this.tabbarheight);
				});
			}, 500);
		},
		methods: {
			chtabbar() {
				var app = getApp();
				app.setTabbar({
					'tabbar.me': {
						reddot: true
					}
				});
			},
			hidebtn() {
				var anis = [{
					scale: [0.4, 1.8]
				}, {
					step: {
						duration: 500
					}
				}, {
					scale: 1
				}, {
					opacity: 0
				}, {
					translateY: '5em'
				}, {
					step: {
						duration: 1000
					}
				}, {
					hide: true
				}];
				this.getrefs('anibtn').then(ref => ref.Doani({
					anis: anis
				}));
			}
		}
	}
</script>