<template>
  <div class="share-dropdown-menu" :style="'top:'+top+'px'">
    <span class="share-dropdown-menu-title" @click="clickTitle">{{title}}<span v-if="title=='每日一练'" class="red-font">{{day}}</span></span>
    <div class="share-dropdown-menu-box" :style="isActive&&'height:100%'">
        <div class="dropdown-popup dropdown-popup--top share-dropdown-item__content">
            <div
            class="share-dropdown-menu-item"
            
            v-for="(item,index) of arrays"
            :key="index" @click="getArraysId(item.name,item.id,index)" :class="activeId==item.id?'curr':''"
            >
                <span class="share-dropdown-menu__title">{{item.name}}</span>
                <span class="share-dropdown-menu__value"><van-icon name="success" /></span>
            </div>
        </div>
        <div class="share-dropdown-overlay" @click="isActive=false"></div>
    </div>
    
  </div>
</template>

<script>
export default {
    name: "dropdownMenu",
    props: {
        title:String,
        day: String,
        arrays: {
            type: Array,
            default: () => []
        },
        top:String
    },
    data() {
        return {
        isActive: false,
        activeId:0,
        };
    },
    methods: {
        clickTitle() {
            this.isActive = !this.isActive;
        },
        getArraysId(name,id,index){
            this.activeId = id
            this.isActive = false
            this.$emit("callback",name,index,this.isActive,id);
        },
    },
    mounted(){
        this.arrays.map(item=>{
            if(item.name==this.day){
                this.activeId = item.id
            }
        })
    }
};
</script>

<style scoped>
    .share-dropdown-menu {
        width: 100%;
        position: absolute;
        z-index:100;
    }
    .share-dropdown-menu-title {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        flex: 1;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        position: relative;
        font-size: 15px;
        height: 46px;
        line-height: 46px;
        overflow: hidden;
    }
    .share-dropdown-menu-box{
        position: fixed;
        right: 0;
        left: 0;
        overflow: hidden;
        height: 0;
        /* -webkit-transition: 0.3s ease-out;
        transition: 0.3s ease-out;
        -webkit-overflow-scrolling: touch;
        transition-duration: 0.2s; */

    }
    .share-dropdown-menu-item__content {
        position: absolute;
    }
    .dropdown-popup--top {
        top: 0;
        left: 0;
        width: 100%;
    }
    .dropdown-popup {
        transition-duration: 0.2s;
        z-index: 2009;
        max-height: 100%;
        overflow-y: auto;
        background-color: #fff;
        -webkit-transition: 0.3s ease-out;
        transition: 0.3s ease-out;
        -webkit-overflow-scrolling: touch;
        position: relative;
    }
    .share-dropdown-menu-item {
        position: relative;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        box-sizing: border-box;
        width: 100%;
        padding: 10px 15px;
        overflow: hidden;
        color: #323233;
        font-size: 14px;
        line-height: 24px;
        background-color: #fff;
    }
    .share-dropdown-menu-item:not(:last-child)::after {
        position: absolute;
        box-sizing: border-box;
        content: ' ';
        pointer-events: none;
        right: 0;
        bottom: 0;
        left: 15px;
        border-bottom: 1px solid #ebedf0;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
    }
    .share-dropdown-menu__title{
        color: #323233;
        font-size: 14px;
        line-height: 24px;
    }
    .share-dropdown-menu__title, .share-dropdown-menu__value {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        flex: 1;
    }
    .share-dropdown-menu__value {
        position: relative;
        overflow: hidden;
        color: #969799;
        text-align: right;
        vertical-align: middle;
        display: none;
    }
    .van-dropdown-item__icon {
        display: block;
        line-height: inherit;
    }
    .share-dropdown-menu-item.curr span {
        color: #ff795c;
    }
    .share-dropdown-menu-item.curr .share-dropdown-menu__value{
        display: inline-block;
        
    }
    .curr .share-dropdown-menu__value i{
        color: #ff795c;
    }
    .share-dropdown-overlay{
        z-index: 2008;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
    }
    .red-font{
        color: #ff795c;
    }
</style>