<template>
	<view class="mask" :class="!show ? '' : 'mask-show'" @tap="tapMask">
		<view class="popups">
			<view v-for="(item, index) in popData" :key="index" @tap.stop="tapItem(item)" class="item">
				{{ item.title }}
			</view>
			<slot></slot>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		value: {
			type: Boolean,
			default: false
		},
		popData: {
			type: Array,
			default: () => []
		},
	},
	data() {
		return {
			popupsTop: '0px',
			popupsLeft: '0px',
			show: false,
			dynPlace: ''
		}
	},
	mounted() {
	},
	methods: {
		tapMask() {
			this.$emit('input', !this.value)
		},
		tapItem(item) {
			if (item.disabled) return
			this.$emit('tapPopup', item)
			this.$emit('input', !this.value)
		},
	},
	watch: {
		value: {
			immediate: true,
			handler: async function (newVal, oldVal) {
				this.show = newVal
			}
		},
	}
}
</script>

<style lang="scss" scoped>
.mask {
	position: absolute;
	top: 180rpx;
	right: 36rpx;
	z-index: 9999;
	visibility: hidden;
	width: 200rpx;
	background: #323045;
	border-radius: 8px;

	&.mask-show {
		visibility: visible;
	}

	&:after {
		content: "";
		position: absolute;
		top: -9px;
		right: 5px;
		border-width: 0 10px 10px;
		border-style: solid;
		border-color: transparent transparent #323045;
	}

	.popups {
		padding: 20rpx;
		border-radius: 10rpx;

		.item {
			padding: 10rpx;
			height: 40rpx;
			line-height: 40rpx;
			font-size: 28rpx;
			padding: 10rpx;
			border-bottom: 2rpx solid #ccc;
		}
	}
}
</style>
