<template>
    <view v-if="showWrapper" :class="'van-dropdown-item '+ (direction?'van-dropdown-item--down':'')" :style="wrapperStyle">
        <van-popup :show="showPopup" :custom-style="'position: absolute;'+(popupStyle)" overlay-style="position: absolute;" :overlay="overlay" :position="direction === 'down' ? 'top' : 'bottom'"
            :duration="transition ? duration : 0" :close-on-click-overlay="closeOnClickOverlay" @enter="onOpen" @leave="onClose" @close="toggle" @after-enter="onOpened" @after-leave="onClosed">
            <van-cell v-for="(item,index) in (options)" :key="item.value" :data-option="item" :class="'van-dropdown-item__option '+ (item.value === value ?'van-dropdown-item__option--active':'')"
                clickable :icon="item.icon" @click.native="onOptionTap($event,item)">
                <view slot="title" class="van-dropdown-item__title" :style="item.value === value  ? 'color:' + activeColor : ''">
                    {{ item.text }}
                </view>
                <van-icon v-if="item.value === value" name="success" class="van-dropdown-item__icon" :color="activeColor"></van-icon>
            </van-cell>
            <slot></slot>
        </van-popup>
    </view>
</template>
<script>
    import Util from '../../utils/utils.js';
    import VanPopup from '../popup/index.vue'
    import VanCell from '../cell/index.vue'
    import VanIcon from '../icon/index.vue'
    export default {
        // relation: {
        //     name: 'dropdown-menu',
        //     type: 'ancestor',
        //     current: 'dropdown-item',
        //     linked: function() {
        //         this.updateDataFromParent();
        //     }
        // },
        components: {
            'van-popup': VanPopup,
            'van-cell': VanCell,
            'van-icon': VanIcon
        },
        props: {
            value: {
                type: null,
                default: null
            },
            title: {
                type: String,
                default: ''
            },
            disabled: {
                type: Boolean,
                default: false
            },
            titleClass: {
                type: String,
                default: ''
            },
            options: {
                type: Array,
                default: []
            },
            popupStyle: {
                type: String,
                default: ''
            }
        },
        watch: {
            value: function() {
                this.rerender()
            },
            title: function() {
                this.rerender()
            },
            titleClass: function() {
                this.rerender()
            },
            options: function() {
                this.rerender()
            }
        },
        data() {
            return {
                transition: true,
                showPopup: false,
                showWrapper: false,
                displayTitle: ''
            }
        },
        mounted() {
            // console.log(this.options)
            this.updateDataFromParent()
        },
        methods: {
            rerender: function() {
                var _this = this;
                this.$nextTick(function() {
                    _this.$parent && _this.$parent.updateItemListData();
                });
            },
            updateDataFromParent: function() {
                if (this.$parent) {
                    var _a = this.$parent,
                        overlay = _a.overlay,
                        duration = _a.duration,
                        activeColor = _a.activeColor,
                        closeOnClickOverlay = _a.closeOnClickOverlay,
                        direction = _a.direction;
                    this.setData({
                        overlay: overlay,
                        duration: duration,
                        activeColor: activeColor,
                        closeOnClickOverlay: closeOnClickOverlay,
                        direction: direction
                    });
                }
            },
            onOpen: function() {
                this.$emit('open');
            },
            onOpened: function() {
                this.$emit('opened');
            },
            onClose: function() {
                this.$emit('close');
            },
            onClosed: function() {
                this.$emit('closed');
                this.setData({
                    showWrapper: false
                });
            },
            onOptionTap: function(event, option) {
                console.log(event, option)
                // var option = event.currentTarget.dataset.option;
                var value = option.value;
                var shouldEmitChange = this.value !== value;
                this.setData({
                    showPopup: false,
                    value: value
                });
                this.$emit('close');
                this.rerender();
                console.log(shouldEmitChange, value)
                if (shouldEmitChange) {
                    this.$emit('change', value);
                }
            },
            toggle: function(show, options) {
                var _this = this;
                if (options === void 0) {
                    options = {};
                }
                var showPopup = this.showPopup;
                // console.log(showPopup)
                // console.log('typeof show', typeof show !== 'boolean')
                if (typeof show !== 'boolean') {
                    show = !showPopup;
                }
                if (show === showPopup) {
                    return;
                }
                this.setData({
                    transition: !options.immediate,
                    showPopup: show,
                });
                if (show) {
                    this.$parent.getChildWrapperStyle().then(function(wrapperStyle) {
                        _this.setData({
                            wrapperStyle: wrapperStyle,
                            showWrapper: true
                        });
                        _this.rerender();
                    });
                } else {
                    this.rerender();
                }
            }
        }
    }
</script>
<style>
    @import '../common/index.css';

    .van-dropdown-item {
        position: fixed;
        right: 0;
        left: 0;
        overflow: hidden
    }

    .van-dropdown-item__option {
        text-align: left
    }

    .van-dropdown-item__option--active .van-dropdown-item__icon,
    .van-dropdown-item__option--active .van-dropdown-item__title {
        color: #1989fa;
        color: var(--dropdown-menu-option-active-color, #1989fa)
    }

    .van-dropdown-item--up {
        top: 0
    }

    .van-dropdown-item--down {
        bottom: 0
    }

    .van-dropdown-item__icon {
        display: block;
        line-height: inherit
    }
</style>