<template>
	<view class="uni-drop-down">
		<view class="drop-down-label">{{label}}</view>
        <view class="drop-down-value" @click="toggleMenu">{{val}}</view>
        <uni-icons :type="rightIcon" @click="toggleMenu" color="#000"></uni-icons>
        <view class="drop-down-menu" v-show="showMenu">
            <view
                v-for="item in menu"
                :key="item.key"
                @click="changeItem(item)"
                :class="{'menu-item-active': item.key === value, 'menu-item': true}"
            >
                {{item.text}}
            </view>
        </view>
	</view>
</template>

<script>
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px'
	export default {
        name: 'UniDropDown',
        props: {
            menu: {
                type: Array,
                default: () => ([])
            },
            value: {
                type: String,
                default: ''
            },
            label: {
                type: String,
                default: ''
            }
        },
        computed: {
            val() {
                return this.menu.find(item => item.key === this.value).text;
            },
            rightIcon() {
                return this.showMenu ? 'arrowleft' : 'arrowdown';
            }
        },
		data() {
			return {
				showMenu: false
			}
        },
        methods: {
            changeItem(item) {
                this.$emit('input', item.key);
                this.showMenu = false;
            },
            toggleMenu() {
                this.showMenu = !this.showMenu;
            }
        }
	}
</script>

<style lang="scss" scoped>
	.uni-drop-down, .drop-down-value, .drop-down-label {
        display: inline-block;
        position: relative;
    }
    .drop-down-value {
        width: 96rpx;
        text-align: center;
    }
    .drop-down-menu {
        position: absolute;
        left: 0;
        width: 200rpx;
        height: auto;
        z-index: 100;
        background: #fff;
        box-shadow: 2px 2px 5px #969696;
    }
    .menu-item {
        height: 72rpx;
        line-height: 72rpx;
        padding-left: 8rpx;
    }
    .menu-item-active {
        background: #007AFF;
        color: #fff;
    }
</style>
