<template>
	<view class="popup-root" :class="'popup-'+type" v-if="isOpen" v-show="isShow" @click="clickMask">
		<view @click.stop class="popup-box">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		emits: ["close", "clickMask"],
		data() {
			return {
				isShow: false,
				isOpen: false
			}
		},
		props: {
			maskClick: {
				type: Boolean,
				default: true
			},
			type: {
				type: String,
				default: "center"
			}
		},
		watch: {
			// 设置show = true 时，如果没有 open 需要设置为 open
			isShow: {
				handler(newVal : boolean) {
					if (newVal && this.isOpen == false) {
						this.isOpen = true;
					}
				},
				immediate: true
			},
			// 设置isOpen = true 时，如果没有 isShow 需要设置为 isShow
			isOpen: {
				handler(newVal : boolean) {
					if (newVal && this.isShow == false) {
						this.isShow = true;
					}
				},
				immediate: true
			}
		},
		methods: {
			open() {
				this.isOpen = true;
			},
			clickMask() {
				if (this.maskClick == true) {
					this.$emit('clickMask');
					this.close();
				}
			},
			close() : void {
				this.isOpen = false;
				this.$emit('close');
			},
			hiden() {
				this.isShow = false;
			},
			show() {
				this.isShow = true;
			}
		}
	}
</script>

<style>
	.popup-root {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		flex: 1;
		background-color: rgba(0, 0, 0, 0.4);
		justify-content: center;
		align-items: center;
		z-index: 99;
	}
  .popup-box {
    width: 100%;
    justify-content: center;
    align-items: center;
  }
	.popup-bottom {
		justify-content: flex-end;
	}
</style>