<template>
	<div class="g-rh-rh-quickconfirm">
		<div class="choice_more c6">
			<slot name="title"></slot>
			<div class="dropdown_box" @touchmove="modalMove" v-if="dropdownShow">
				<div class="dropdown_mask" @click="hideDropdown"></div>
				<div class="dropdown" style="z-index: 999" :style="{ width }">
					<span class="sanjiao"></span>
					<slot name="content"></slot>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	props: {
		dropdownShow: {
			type: Boolean,
			default: false,
		},
		width: {
			type: String,
			default: "144px",
		},
	},
	methods: {
		hideDropdown() {
			this.$emit("hideDropdown", false);
		},
		modalMove() {
			return false;
		},
	},
};
</script>

<style>
.choice_more {
	position: relative;
}
.dropdown_box {
	/* position: absolute; */
}
.dropdown_mask {
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	background-color: transparent;
}
.dropdown {
	position: absolute;
	right: 0;
	top: 120%;
	background: #ffffff;
	border-radius: 4px;
	box-shadow: 0px 0px 6px 0px rgba(148, 148, 148, 0.5);
}
.dropdown .sanjiao {
	position: absolute;
	width: 0px;
	height: 0px;
	top: -12px;
	right: 24px;
	border: 6px solid #fff;
	border-top: 6px solid transparent;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
}
.dropdown .sanjiao {
	position: absolute;
	width: 0px;
	height: 0px;
	top: -12px;
	right: 8px;
	border: 6px solid #fff;
	border-top: 6px solid transparent;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
}
</style>
