<template>
	<div class="drop-down-btn">
		<button class="top-btn" @click='toggleExpand'><span style="margin-right: 3px;">{{active}}</span><svg-icon class-name="arrow" icon-class="arrow" :style="{transform:isExpand?'rotate(180deg)':'rotate(0deg)'}"/></button>
		<div v-show="isExpand" class="btn-box">
			<button
				class="btn"
				v-for="opt in options"
				:key="opt"
				@click="clickBtn(opt)"
				v-show="active !== opt">
				<span class="btn-text">
					{{ opt }}
				</span>
			</button>
		</div>
	</div>
</template>

<script>
export default {
	name: 'DropDownBtn',
	components: {},
	props: ['options', 'active'],
	data() {
		return {
			isExpand: false
		};
	},
	computed: {},
	methods: {
		clickBtn(opt) {
			this.$emit('emitFun', opt)
			this.isExpand = !this.isExpand
		},
		toggleExpand() {
			this.isExpand = !this.isExpand
		}
	},
};
</script>

<style scoped lang="scss">
.drop-down-btn {
	z-index: 1000;
	button {
		border: none;
		appearance: none;
		outline: none;
		color: #fff;
		font-size: 14px;
		padding: 8px 5px 8px 8px;
		height: 32px;
	}
	.top-btn {
		background: #02457E;
		border-radius: 5px;
		cursor: pointer;
		.arrow {
			font-size: 16px;
		}
	}
	.btn-box {
		.btn {
			display: block;
			width: 100%;
			background: #03233C;
			&:hover {
				background: #02457E;
				transition: all 0.5s ease-out;
			}
			.btn-text{
				padding: 0px 5px 6px;
				border-bottom: 1px solid #010D18;
			}
		}
		.btn:last-child{
			border-bottom-right-radius: 5px;
			border-bottom-left-radius: 5px;
			.btn-text{
				height: 16px;
				border-bottom: none;
			}
		}
	}
}
</style>