<template>
    <view style="height: 100%">
        <wux-popup position="bottom" :visible="visible" safeArea="bottom" @close="onPopupClose">
            <view :class="'wux-class ' + classes.wrap">
                <view :class="classes.hd">
                    <view :class="classes.title" v-if="title">{{ title }}</view>
                    <view :class="classes.menus" v-if="activeOptions.length">
                        <block v-for="(item, index) in activeOptions" :key="index">
                            <view :class="classes.menu + ' ' + (activeIndex === index ? prefixCls + '__menu--active' : '')" :data-menu-index="index" @tap="onMenuClick">
                                {{ item[fieldNames['label']] }}
                            </view>
                        </block>
                    </view>
                </view>
                <view :class="classes.bd" :style="bodyStyle">
                    <block v-for="(option, optionIndex) in showOptions" :key="optionIndex">
                        <view :class="classes.inner">
                            <scroll-view scroll-y :class="'wux-scroll-view-class ' + classes.scrollView">
                                <view :class="classes.option">
                                    <block v-for="(item, index) in option" :key="index">
                                        <view
                                            :class="
                                                classes.item +
                                                ' ' +
                                                (activeValue[optionIndex] === item[fieldNames['value']] ? prefixCls + '__item--active' : '') +
                                                ' ' +
                                                (item.disabled ? prefixCls + '__item--disabled' : '')
                                            "
                                            :data-option-index="optionIndex"
                                            :data-item="item"
                                            @tap="onItemSelect"
                                        >
                                            <text>{{ item[fieldNames['label']] }}</text>
                                            <icon
                                                :class="classes.icon"
                                                type="success_no_circle"
                                                size="16"
                                                color="#ef473a"
                                                v-if="activeValue[optionIndex] === item[fieldNames['value']]"
                                            />
                                        </view>
                                    </block>
                                </view>
                            </scroll-view>
                        </view>
                    </block>
                </view>
            </view>
        </wux-popup>
    </view>
</template>

<script>
'use strict';
import wuxPopup from '../popup/index';
var _baseComponent = _interopRequireDefault(require('../helpers/baseComponent'));
var _classNames = _interopRequireDefault(require('../helpers/classNames'));
var _arrayTreeFilter = _interopRequireDefault(require('../helpers/arrayTreeFilter'));
function _interopRequireDefault(e) {
    return e && e.__esModule
        ? e
        : {
              default: e
          };
}
function _defineProperty(e, t, a) {
    t in e
        ? Object.defineProperty(e, t, {
              value: a,
              enumerable: true,
              configurable: true,
              writable: true
          })
        : (e[t] = a);
    return e;
}
function _toConsumableArray(e) {
    return _arrayWithoutHoles(e) || _iterableToArray(e) || _nonIterableSpread();
}
function _nonIterableSpread() {
    throw new TypeError('Invalid attempt to spread non-iterable instance');
}
function _iterableToArray(e) {
    if (Symbol.iterator in Object(e) || '[object Arguments]' === Object.prototype.toString.call(e)) {
        return Array.from(e);
    }
}
function _arrayWithoutHoles(e) {
    if (Array.isArray(e)) {
        for (t = 0, a = new Array(e.length), void 0; t < e.length; t++) {
            var t;
            var a;
            a[t] = e[t];
        }
        return a;
    }
}
var WUX_CASCADER = 'wux-cascader';
var defaultFieldNames = {
    label: 'label',
    value: 'value',
    children: 'children'
};
(0, _baseComponent.default)({
    externalClasses: ['wux-scroll-view-class'],
    properties: {
        prefixCls: {
            type: String,
            value: 'wux-cascader'
        },
        defaultValue: {
            type: Array,
            value: []
        },
        value: {
            type: Array,
            value: []
        },
        controlled: {
            type: Boolean,
            value: false
        },
        title: {
            type: String,
            value: ''
        },
        options: {
            type: Array,
            value: []
        },
        chooseTitle: {
            type: String,
            value: '请选择'
        },
        visible: {
            type: Boolean,
            value: false
        },
        defaultFieldNames: {
            type: Object,
            value: defaultFieldNames
        }
    },
    data: {
        activeOptions: [],
        activeIndex: 0,
        bodyStyle: '',
        activeValue: [],
        showOptions: [],
        fieldNames: {}
    },
    computed: {
        classes: [
            'prefixCls',
            function (e) {
                return {
                    wrap: (0, _classNames.default)(e),
                    hd: ''.concat(e, '__hd'),
                    title: ''.concat(e, '__title'),
                    menus: ''.concat(e, '__menus'),
                    menu: ''.concat(e, '__menu'),
                    bd: ''.concat(e, '__bd'),
                    inner: ''.concat(e, '__inner'),
                    scrollView: ''.concat(e, '__scroll-view'),
                    option: ''.concat(e, '__option'),
                    item: ''.concat(e, '__item'),
                    icon: ''.concat(e, '__icon'),
                    ft: ''.concat(e, '__ft')
                };
            }
        ]
    },
    observers: {
        value: function (e) {
            if (this.controlled) {
                this.setData({
                    activeValue: e
                });
                this.getCurrentOptions(e);
            }
        },
        options: function () {
            this.getCurrentOptions(this.activeValue);
        }
    },
    methods: {
        getActiveOptions: function (a) {
            var e = this.options;
            var i = this.getFieldName('value');
            var t = this.getFieldName('children');
            return (0, _arrayTreeFilter.default)(
                e,
                function (e, t) {
                    return e[i] === a[t];
                },
                {
                    childrenKeyName: t
                }
            );
        },
        getShowOptions: function (e) {
            var t = this.options;
            var a = this.getFieldName('children');
            var i = this.getActiveOptions(e)
                .map(function (e) {
                    return e[a];
                })
                .filter(function (e) {
                    return !!e;
                });
            return [t].concat(_toConsumableArray(i));
        },
        getMenus: function (e, t) {
            if (0 < arguments.length && void 0 !== e) {
                var a = e;
            } else {
                var a = [];
            }
            if (1 < arguments.length) {
                var i = t;
            } else {
                var i = void 0;
            }
            var n = this;
            var r = (n.options, n.chooseTitle);
            var o = this.getActiveOptions(a);
            if (i) {
                var l;
                var s = this.getFieldName('value');
                var u = this.getFieldName('label');
                o.push((_defineProperty((l = {}), s, WUX_CASCADER), _defineProperty(l, u, r), l));
            }
            return o;
        },
        getNextActiveValue: function (e, t) {
            var a = this.activeValue;
            (a = a.slice(0, t + 1))[t] = e;
            return a;
        },
        updated: function (e, t, a, i) {
            var n = this.getFieldName('value');
            var r = this.getFieldName('children');
            var o = e[r] && 0 < e[r].length;
            var l = this.getNextActiveValue(e[n], t);
            var s = this.getMenus(l, o);
            var u = s.length - 1;
            var c = this.getShowOptions(l);
            var d = {
                activeValue: l,
                activeOptions: s,
                activeIndex: u,
                showOptions: c
            };
            if (o || (l.length === c.length && (t = Math.max(0, t - 1)))) {
                d.bodyStyle = 'transform: translate('.concat(-50 * t, '%)');
                d.showOptions = c;
            }
            if (a) {
                this.setData(d);
            }
            if ('function' == typeof i) {
                i.call(this, e, s, !o);
            }
        },
        getCurrentOptions: function (e) {
            var t = 0 < arguments.length && void 0 !== e ? e : this.activeValue;
            var a = Math.max(0, t.length - 1);
            var i = this.getActiveOptions(t);
            var n = i[a];
            if (n) {
                this.updated(n, a, true);
            } else {
                var r;
                var o = this.getFieldName('value');
                var l = this.getFieldName('label');
                i.push((_defineProperty((r = {}), o, WUX_CASCADER), _defineProperty(r, l, this.chooseTitle), r));
                var s = {
                    showOptions: this.getShowOptions(t),
                    activeOptions: i,
                    activeIndex: i.length - 1,
                    bodyStyle: ''
                };
                this.setData(s);
            }
        },
        onMenuClick: function (e) {
            var t = e.currentTarget.dataset.menuIndex;
            var a = 'transform: translate('.concat(-50 * (1 < t ? t - 1 : 0), '%)');
            this.setData({
                bodyStyle: a,
                activeIndex: t
            });
        },
        onItemSelect: function (e) {
            var t = e.currentTarget.dataset;
            var a = t.item;
            var i = t.optionIndex;
            if (a && !a.disabled) {
                this.updated(a, i, !this.controlled, this.onChange);
            }
        },
        onPopupClose: function () {
            this.$emit('close');
        },
        onChange: function (e, t, a) {
            var that = this;
            var n = 0 < arguments.length && void 0 !== e ? e : {};
            var r = 2 < arguments.length && void 0 !== a && a;
            var o = (1 < arguments.length && void 0 !== t ? t : []).filter(function (e) {
                return e[that.getFieldName('value')] !== WUX_CASCADER;
            });
            var l = o.map(function (e) {
                return e[that.getFieldName('value')];
            });
            if (false === n.isLeaf && !n.children) {
                this.emitEvent({
                    value: l,
                    options: o,
                    done: false
                });
                return void this.$emit('load', {
                    detail: {
                        value: l,
                        options: o
                    }
                });
            }
            this.emitEvent({
                value: l,
                options: o,
                done: r
            });
        },
        emitEvent: function (e) {
            var t = 0 < arguments.length && void 0 !== e ? e : {};
            this.$emit('change', {
                detail: t
            });
            if (t.done) {
                this.onPopupClose();
            }
        },
        getFieldName: function (e) {
            return this.fieldNames[e];
        }
    },
    attached: function () {
        var e = this;
        var t = e.defaultValue;
        var a = e.value;
        var i = e.controlled ? a : t;
        var n = Object.assign({}, defaultFieldNames, this.defaultFieldNames);
        this.setData({
            activeValue: i,
            fieldNames: n
        });
        this.getCurrentOptions(i);
    }
});
</script>
<style>
.wux-cascader__hd {
    position: relative;
    width: 100%;
    font-size: 34rpx;
    line-height: 1.5;
    color: #444;
}
.wux-cascader__hd::after {
    content: ' ';
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 1px;
    border-bottom: 1px solid #d9d9d9;
    color: #d9d9d9;
    transform-origin: 0 100%;
    transform: scaleY(0.5);
}
.wux-cascader__title {
    position: relative;
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
}
.wux-cascader__title::after {
    content: ' ';
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 1px;
    border-bottom: 1px solid #d9d9d9;
    color: #d9d9d9;
    transform-origin: 0 100%;
    transform: scaleY(0.5);
}
.wux-cascader__menus {
    display: flex;
    height: 88rpx;
    padding: 0 20rpx;
    align-items: center;
    box-sizing: border-box;
}
.wux-cascader__menu {
    font-size: 26rpx;
    padding: 0 20rpx;
    max-width: 40%;
    width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
}
.wux-cascader__menu--active {
    color: #ef473a;
}
.wux-cascader__bd {
    width: 100%;
    display: flex;
    transition: transform 0.3s;
    background-color: #f5f5f5;
    min-height: 540rpx;
}
.wux-cascader__inner {
    display: block;
    height: inherit;
    width: 50%;
    flex: 0 0 50%;
    background-color: #fff;
}
.wux-cascader__inner:nth-child(2n) {
    background-color: #f5f5f5;
}
.wux-cascader__scroll-view {
    max-height: 540rpx;
}
.wux-cascader__option {
    width: 100%;
    height: inherit;
    display: block;
    padding: 0 40rpx;
    box-sizing: border-box;
}
.wux-cascader__item {
    position: relative;
    z-index: 10;
    display: block;
    color: rgba(0, 0, 0, 0.85);
    font-size: 26rpx;
    /* height: 80rpx; */
    padding: 25rpx 0;
    text-align: left;
    width: auto;
    /* overflow: hidden; */
    /* white-space: nowrap; */
}
.wux-cascader__item::after {
    content: ' ';
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 1px;
    border-bottom: 1px solid #d9d9d9;
    color: #d9d9d9;
    transform-origin: 0 100%;
    transform: scaleY(0.5);
}
.wux-cascader__item--active {
    color: #ef473a;
    padding-right: 36rpx;
}
.wux-cascader__item--disabled {
    opacity: 0.3;
}
.wux-cascader__icon {
    position: absolute;
    top: 24rpx;
    right: 0;
    z-index: 20;
    font-size: 0;
    line-height: 1;
}
</style>
