<template>
	<!-- 规格-模态层弹窗 -->
	<view class="popup" :class="specClass">
		<!-- 遮罩层 -->
		<view class="mask" @tap="stopPrevent"></view>
		<view class="layer" @tap.stop>
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['show'],
		data() {
			return {
				specClass: this.getClassName()
			}
		},
		watch: {
			show() {
				this.toggleSpec()
			}
		},
		methods: {
			getClassName() {
				return this.show ? 'show' : 'none'
			},
			stopPrevent() {
				this.$emit("clickBackground")
			},
			//规格弹窗开关
			toggleSpec(show = this.show) {
				const className = this.getClassName()
				if (!show) {
					this.specClass = 'hide'
					setTimeout(_ => this.specClass = className, 250)
				} else {
					this.specClass = className
				}
				this.$emit("onDisplay")
			}
		}
	}
</script>

<style lang="scss" scoped>
	/*  弹出层 */
	.popup {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 99;

		&.show {
			display: block;

			.mask {
				animation: showPopup 0.2s linear both;
			}

			.layer {
				animation: showLayer 0.2s linear both;
			}
		}

		&.hide {
			.mask {
				animation: hidePopup 0.2s linear both;
			}

			.layer {
				animation: hideLayer 0.2s linear both;
			}
		}

		&.none {
			display: none;
		}

		.mask {
			position: fixed;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			background-color: rgba(0, 0, 0, 0.4);
		}


		@keyframes showPopup {
			0% {
				opacity: 0;
			}

			100% {
				opacity: 1;
			}
		}

		@keyframes hidePopup {
			0% {
				opacity: 1;
			}

			100% {
				opacity: 0;
			}
		}

		@keyframes showLayer {
			0% {
				transform: translateY(120%);
			}

			100% {
				transform: translateY(0%);
			}
		}

		@keyframes hideLayer {
			0% {
				transform: translateY(0);
			}

			100% {
				transform: translateY(120%);
			}
		}
	}
</style>
