<template>
	<view v-if="showPopup" class="uni-popup" @touchmove.stop="clear">
		<uni-transition :mode-class="['fade']" class="uni-popup__mask" :show="showTrans" @click="clickMask" />
		<uni-transition :mode-class="ani" :class="['uni-popup__wrapper', transClass]" :show="showTrans" @click="clickMask">
			<view class="uni-popup__wrapper-box" @click.stop="clear"><slot /></view>
		</uni-transition>
	</view>
</template>

<script>
import { uniTransition } from '@dcloudio/uni-ui';
export default {
	name: 'UniPopup',
	components: {
		uniTransition
	},
	props: {
		// 开启动画
		animation: {
			type: Boolean,
			default: true
		},
		// 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
		type: {
			type: String,
			default: 'center'
		},
		// maskClick
		maskClick: {
			type: Boolean,
			default: true
		}
	},
	data() {
		return {
			ani: [],
			showPopup: false,
			showTrans: false,
			maskClass: '',
			transClass: 'top'
		};
	},
	watch: {
		type: {
			handler: function(newVal) {
				switch (this.type) {
					case 'top':
						this.ani = ['slide-top'];
						break;
					case 'bottom':
						this.ani = ['slide-bottom'];
						break;
					case 'center':
						this.ani = ['zoom-out', 'fade'];
						break;
				}
				this.transClass = this.type;
			},
			immediate: true
		}
	},
	created() {},
	methods: {
		clear(e) {
			// TODO nvue 取消冒泡
			e.stopPropagation();
			e.preventDefault();
		},
		open() {
			this.showPopup = true;
			this.$nextTick(() => {
				setTimeout(() => {
					this.showTrans = true;
				}, 50);
			});
			this.$emit('change', {
				show: true
			});
		},
		close(type) {
			this.showTrans = false;
			this.$nextTick(() => {
				clearTimeout(this.timer);
				this.timer = setTimeout(() => {
					this.$emit('change', {
						show: false
					});
					this.showPopup = false;
				}, 300);
			});
		},
		clickMask(e) {
			if (!this.maskClick) return;
			this.close();
		}
	}
};
</script>
<style lang="scss" scoped>
.uni-popup {
	position: fixed;
	/* #ifdef H5 */
	top: var(--window-top);
	/* #endif */
	/* #ifndef H5 */
	top: 0;
	/* #endif */
	// bottom: var(--window-bottom);
	bottom: 0;
	left: 0;
	right: 0;
	/* #ifndef APP-NVUE */
	z-index: 999;
	/* #endif */
}

.uni-popup__mask {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: $uni-bg-color-mask;
	// opacity: 0;
}

.uni-popup__wrapper {
	/* #ifndef APP-NVUE */
	display: block;
	/* #endif */
	position: absolute;

	&.top {
		top: 0;
		left: 0;
		right: 0;
		transform: translateY(-500px);
	}

	&.bottom {
		bottom: 0;
		left: 0;
		right: 0;
		transform: translateY(500px);
	}

	&.center {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		bottom: 0;
		left: 0;
		right: 0;
		top: 0;
		justify-content: center;
		align-items: center;
		transform: scale(1.2);
		opacity: 0;
	}

	&-box {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		position: relative;
	}
}
</style>
