<template>
    <view class="van-dropdown-menu van-dropdown-menu--top-bottom" :style='customStyle'>
        <view v-for="(item,index) in (itemListData)" :key="item.index" :data-index="index"
            :class="'van-dropdown-menu__item '+ (postion=='left'?'jc-start':postion=='right'?'jc-end':'') +(item.disabled?'van-dropdown-menu__item--disabled':'')"
            @click="onTitleTap">
            <view
                :class="(item.titleClass)+' van-dropdown-menu__title '+ (item.showPopup?'van-dropdown-menu__title--active':'') + (item.showPopup === (direction === 'down') ?'van-dropdown-menu__title--down':'')"
                :style="item.showPopup ? 'color:' + activeColor : ''">
                <view class="van-ellipsis">
                    {{ displayTitle(item) }}
                </view>
            </view>
        </view>
        <slot></slot>
    </view>
</template>
<script>
    import Util from '../../utils/utils.js';
    import basic_1 from '../mixins/basic.js'
    var ARRAY = [];
    export default {
        // relation: {
        //     name: 'dropdown-item',
        //     type: 'descendant',
        //     current: 'dropdown-menu',
        //     linked: function() {
        //         this.updateItemListData();
        //     },
        //     unlinked: function() {
        //         this.updateItemListData();
        //     }
        // },
        mixins: [basic_1.basic()],
        props: {
            customStyle: {
                type: String,
                default: ''
            },
            activeColor: {
                type: String,
                default: ''
            },
            overlay: {
                type: Boolean,
                default: true
            },
            zIndex: {
                type: Number,
                default: 10
            },
            duration: {
                type: Number,
                default: 200
            },
            direction: {
                type: String,
                default: 'down'
            },
            closeOnClickOverlay: {
                type: Boolean,
                default: true
            },
            closeOnClickOutside: {
                type: Boolean,
                default: true
            },
            postion: {
                type: String,
                default: ''
            }
        },
        data() {
            return {
                itemListData: []
            }
        },
        watch: {
            activeColor: function() {
                this.updateChildrenData()
            },
            overlay: function() {
                this.updateChildrenData()
            },
            duration: function() {
                this.updateChildrenData()
            },
            direction: function() {
                this.updateChildrenData()
            },
            closeOnClickOverlay: function() {
                this.updateChildrenData()
            },
        },
        beforeCreate: function() {
            var windowHeight = uni.getSystemInfoSync().windowHeight;
            this.windowHeight = windowHeight;
            ARRAY.push(this);
        },
        destroyed: function() {
            var _this = this;
            ARRAY = ARRAY.filter(function(item) {
                return item !== _this;
            });
        },
        mounted() {
            this.updateItemListData()
        },
        methods: {
            displayTitle(item) {
                if (item.title) {
                    return item.title;
                }

                var match = item.options.filter(function(option) {
                    return option.value === item.value;
                });
                var displayTitle = match.length ? match[0].text : '';
                return displayTitle;
            },
            updateItemListData: function() {
				console.log('updateItemListData this ==', this)
				if(!this.$children) return
                this.setData({
                    itemListData: this.$children.map(function(child) {
                        return child;
                    })
                });
            },
            updateChildrenData: function() {
                this.$children.forEach(function(child) {
                    child.updateDataFromParent();
                });
            },
            toggleItem: function(active) {
                this.$children.forEach(function(item, index) {
                    var showPopup = item.showPopup;
                    if (index === active) {
                        item.toggle();
                    } else if (showPopup) {
                        item.toggle(false, {
                            immediate: true
                        });
                    }
                });
            },
            close: function() {
                this.$children.forEach(function(child) {
                    child.toggle(false, {
                        immediate: true
                    });
                });
            },
            getChildWrapperStyle: function() {
                var _this = this;
                var _a = this,
                    zIndex = _a.zIndex,
                    direction = _a.direction;
                return this.getRect('.van-dropdown-menu').then(function(rect) {
                    var _a = rect.top,
                        top = _a === void 0 ? 0 : _a,
                        _b = rect.bottom,
                        bottom = _b === void 0 ? 0 : _b;
                    var offset = direction === 'down' ? bottom : _this.windowHeight - top;
                    var wrapperStyle = "z-index: " + zIndex + ";";
                    if (direction === 'down') {
                        wrapperStyle += "top: " + Util.addUnit(offset) + ";";
                    } else {
                        wrapperStyle += "bottom: " + Util.addUnit(offset) + ";";
                    }
                    return wrapperStyle;
                });
            },
            onTitleTap: function(event) {
                var _this = this;
                var index = event.currentTarget.dataset.index;
                var child = this.$children[index];
                // console.log(child.disabled)
                // console.log('ARRAY', ARRAY)
                if (!child.disabled) {
                    ARRAY.forEach(function(menuItem) {
                        if (menuItem && menuItem.closeOnClickOutside && menuItem !== _this) {
                            // console.log('close')
                            menuItem.close();
                        }
                    });
                    this.toggleItem(index);
                }
            }
        }
    }
</script>
<style>
    @import '../common/index.css';

    .van-dropdown-menu {
        display: -webkit-flex;
        display: flex;
        -webkit-user-select: none;
        user-select: none;
        height: 50px;
        height: var(--dropdown-menu-height, 50px);
        background-color: #fff;
        background-color: var(--dropdown-menu-background-color, #fff)
    }

    .van-dropdown-menu__item {
        display: -webkit-flex;
        display: flex;
        -webkit-flex: 1;
        flex: 1;
        -webkit-align-items: center;
        align-items: center;
        min-width: 0
    }

    .van-dropdown-menu__item:active {
        opacity: .7
    }

    .van-dropdown-menu__item--disabled:active {
        opacity: 1
    }

    .van-dropdown-menu__item--disabled .van-dropdown-menu__title {
        color: #969799;
        color: var(--dropdown-menu-title-disabled-text-color, #969799)
    }

    .van-dropdown-menu__title {
        position: relative;
        box-sizing: border-box;
        max-width: 100%;
        padding: 0 8px;
        padding: var(--dropdown-menu-title-padding, 0 8px);
        color: #323233;
        color: var(--dropdown-menu-title-text-color, #323233);
        font-size: 15px;
        font-size: var(--dropdown-menu-title-font-size, 15px);
        line-height: 18px;
        line-height: var(--dropdown-menu-title-line-height, 18px)
    }

    .van-dropdown-menu__title:after {
        position: absolute;
        top: 50%;
        right: -4px;
        margin-top: -5px;
        border-color: transparent transparent currentcolor currentcolor;
        border-style: solid;
        border-width: 3px;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        opacity: .8;
        content: ""
    }

    .van-dropdown-menu__title--active {
        color: #1989fa;
        color: var(--dropdown-menu-title-active-text-color, #1989fa)
    }

    .van-dropdown-menu__title--down:after {
        margin-top: -1px;
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg)
    }
</style>