<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, background: bgColor }">
					<span class="sanjiao" :style="{ borderBottomColor: bgColor }"></span>
					<slot name="content"></slot>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	props: {
		dropdownShow: {
			type: Boolean,
			default: false,
		},
		width: {
			type: String,
			default: "144px",
		},
		// 背景色自定义
		bgColor: {
			type: String,
			default: "#fff",
		},
	},
	methods: {
		hideDropdown() {
			this.$emit("hideDropdown", false);
		},
		modalMove() {
			this.$emit("hideDropdown", false);
			return false;
		},
	},
};
</script>

<style>
.choice_more {
	position: relative;
}
.dropdown_box {
	/* position: absolute; */
}
.dropdown_mask {
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	z-index: 999;
	background-color: transparent;
}
.dropdown {
	position: absolute;
	right: 0;
	top: 130%;
	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: -11px;
	right: 6px;
	border: 6px solid transparent;
}
</style>
