<template>
	<ciy-header ref="header" title="ciy-anipop组件"></ciy-header>
	<view>
		<view class="ciy-card">
			<view class="title">画布动画</view>
			<view class="content">
				<view class="tip">
					从四个方向弹出画布<br />
					支持标题、留白。<br />
				</view>
			</view>
		</view>

		<ciy-anipop ref="anipop" v-model="popsh" :anispeed="props.anispeed" :direction="props.direction" :edge="props.edge" :title="props.title" :maskbg="props.maskbg" :noclose="props.noclose" :zindex="50020" @change="chglog('change', $event)">
			<view style="border-radius: 0.5em 0.5em 0 0;">
				<view v-for="n in ns" :key="n" class="zw"> 占位 {{n}}</view>
			</view>
		</ciy-anipop>
		<button class="btn" @tap="openpop(5)">5打开</button>
		<button class="btn" @tap="openpop(50)">50打开</button>
		<button class="btn" @tap="props.title='头部标题'">带标题</button>
		<view class="ciy-card">
			<view class="title">属性</view>
			<view class="content">
				<view class="prp">v-model</view>
				<view class="tip">bool，打开关闭画布。</view>
				<view class="hr"></view>
				<view class="prp">noclose</view>
				<view class="tip">
					是否点击不关闭。<br />
					默认 false
				</view>
				<view style="margin:0 1em;">
					<ciy-switch v-model="props.noclose"></ciy-switch>
				</view>
				<view class="hr"></view>
				<view class="prp">anispeed</view>
				<view class="tip">
					动画效果持续毫秒，0为不使用动画。<br />
					默认 300
				</view>
				<view style="margin:0 1em;">
					<ciy-input bb v-model="props.anispeed" style="width:4em;"></ciy-input>
				</view>
				<view class="hr"></view>
				<view class="prp">title</view>
				<view class="tip">
					显示标题。<br />
				</view>
				<ciy-input bb v-model="props.title"></ciy-input>
				<view class="hr"></view>
				<view class="prp">maskbg</view>
				<view class="tip">
					蒙版色，#rgba。<br />
				</view>
				<ciy-input bb v-model="props.maskbg" style="width:6em;"></ciy-input>
				<view class="hr"></view>
				<view class="prp">bg</view>
				<view class="tip">
					左/右方向剩余空间背景色，#rgba。<br />
				</view>
				<ciy-input bb v-model="props.bg" style="width:6em;"></ciy-input>
				<view class="hr"></view>
				<view class="prp">direction</view>
				<view class="tip">
					从某个方向出现。<br/>
					bottom从下方，top，left、right。<br />
				</view>
				<ciy-radiobox left v-model="props.direction" :range="[{id:'bottom',name:'bottom'},{id:'top',name:'top'},{id:'left',name:'left'},{id:'right',name:'right'}]"></ciy-radiobox>
				<view class="hr"></view>
				<view class="prp">edge</view>
				<view class="tip">
					留白尺寸，单位px。默认不留白
				</view>
				<ciy-input bb v-model="props.edge" style="width:4em;"></ciy-input>
				<view class="hr"></view>
				<view class="prp">zindex</view>
				<view class="tip">
					z-index。<br />
					默认 992
				</view>
			</view>
		</view>
		<view class="ciy-card">
			<view class="title">方法</view>
			<view class="content">
				<view class="fun">open</view>
				<view class="tip">
					打开<br />
				</view>
				<button class="btn sm" @tap="funopen">调用</button>
				<view class="hr"></view>
				<view class="fun">close</view>
				<view class="tip">
					关闭<br />
				</view>
			</view>
		</view>
		<view class="ciy-card">
			<view class="title">事件</view>
			<view class="content">
				<view class="evt">@change</view>
				<view class="tip">
					打开关闭变更事件<br />
					from: open,mask,user,closebtn
				</view>
				<view class="hr"></view>
				<view class="evt">@update:modelValue</view>
				<view class="tip">
					仅关闭传递false<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 {
				ns:5,
				popsh: false,
				props:{
					maskbg:'#00000044',
					bg:'#ffffff',
					direction: 'bottom',
					edge:100,
					anispeed:300,
				}
			}
		},
		onLoad() {},
		methods: {
			async openpop(ns) {
				this.ns = ns;
				this.popsh = true;
			},
			funopen(){
				this.getrefsSync('anipop').Open();
			}
		}
	}
</script>