<template>
	<view @touchmove.prevent class="hg-popup" v-if="show" :class="[isShow ? 'hg-show' : 'hg-hide']">
		<view v-if="showMask" class="hg-overlay" @click="close"></view>
		<view :class="size ?  'hg-content-'+size : 'hg-content'" :style="{height:heightSize+'rpx'}">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			show: {
				type: Boolean
			},
			size: {
				type: String
			},
			heightSize: {
				type: String
			},
			showMask: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				isShow: Boolean
			}
		},
		created() {
			this.isShow = this.show
		},
		watch: {
			show() {
				this.isShow = this.show
				if (!this.show) {
					this.close()
				}
			}
		},
		methods: {
			close() {
				// console.log("oopp000--")
				// this.isShow = false
				// setTimeout(() => {
				this.$emit('close')
				// }, 200)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.hg-popup {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		// pointer-events: none;

		&.hg-hide {
			.hg-content {
				animation: hide .3s linear forwards;
			}

			.hg-overlay {
				opacity: 0;
			}
		}

		&.hg-show {
			.hg-content {
				animation: show .3s linear forwards;
			}

			.hg-overlay {
				opacity: 1;
			}
		}

		.hg-overlay {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			background-color: rgba(0, 0, 0, 0.6);
			z-index: 200;
			transition: .3s;
			//给遮罩层上添加这个属性即可，这是就可以穿透遮罩层，触发到确认按钮了
			// pointer-events: none;
		}

		.hg-content {
			width: 100%;
			height: 800rpx;
			// background: #fff;
			// background: rgba(0, 39, 85, 1);
			background: #FFFFFF;
			position: absolute;
			left: 0;
			bottom: 0;
			z-index: 300;
			overflow: hidden;
			overflow-y: scroll;
			border-radius: 30rpx 30rpx 0 0;
		}

		.hg-content-height {
			width: 100%;
			height: 600rpx;
			// background: #fff;
			background: rgba(0, 39, 85, 1);
			position: absolute;
			left: 0;
			bottom: 0;
			z-index: 300;
			overflow: hidden;
			overflow-y: scroll;
		}

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

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

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

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