<template>
    <div class="nus_picker">
        <nu-layercb
            class="nu_picker-layercb"
            :cancel-text="cancelText"
            :confirm-text="confirmText"
            :name-text="nameText"
            @cancelChange="_cancel"
            @confirmChange="_onConfirm">
            <list-title
                class="nu_picker-titles"
                v-if="listTitle && listTitle.length > 0 && myLists"
                :lists="myLists"
                :listTitle="listTitle">
            </list-title>
            <nu-loadingc
                v-if="isLoading && (!myLists || !myLists.length)"
                class="nu_picker-loading">
            </nu-loadingc>
            <div class="nu_picker-content" v-if="myLists && myLists.length">
                <div class="nu_picker-wrapper">
                    <nu-wheel
                        class="nu_picker-wheel"
                        v-for="(list, key) in myLists"
                        :activeIndex="myActiveIndexMap[key]"
                        :filterName="filterName ? _filterName : undefined"
                        :isInit="myInitMap && myInitMap[key]"
                        :key="key"
                        :index="key"
                        :list="list"
                        :prefix="prefixs && prefixs[key]"
                        :state="state"
                        :suffix="suffixs && suffixs[key]"
                        @update:activeIndex="_onActiveIndexChange($event, key)"
                        @select="_onDataChange($event, key)"
                        @stateChange="_onStateChange">
                    </nu-wheel>
                </div>
            </div>
        </nu-layercb>
    </div>
</template>

<script>
import { getBackData, callFn, extend } from 'nimble-lib';
import filterLinkage from './helpers/filterLinkage';
import PickerTmp from './_comm/PickerTmp';
import ListTitle from './listTitle/ListTitle';
import NuLayercb from '../../widget/layer/layercb/Layercb';
import NuWheel from '../../widget/wheel/Wheel';
import NuLoadingc from '../../widget/loading/loadingc';
import confirm from '../../../Mixins/confirm';
import attrSync from '../../../Mixins/attrSync';

export default {
    extends: PickerTmp,
    name: 'NuPicker',
    components: {
        ListTitle,
        NuLayercb,
        NuWheel,
        NuLoadingc
    },
    data () {
        return {
            /* 是否是初始化状态 */
            isInit: true,
            /* 列表数据 */
            myLists: null,
            /* 状态 */
            state: '',
            isLoading: false
        };
    },
    mixins: [
        confirm(),
        /**
         * 选中的列表
         */
        attrSync('selectList', {
            myValueChange(nowVal) {
                const _that = this;
                return callFn(_that.selectChange, [nowVal]);
            }
        })
    ],
    watch: {
        /**
         * watch列表数据
         * @param {Array} nowVal 变化后的列表数据
         */
        lists () {
            this._setMyLists();
        }
    },
    created() {
        this._setMyLists();
    },
    methods: {
        /**
         * 过滤item项名称
         * @param {Object} item 当前item数据
         * @param {Object} options 选项
         * @returns {text}
         */
        _filterName(item, options) {
            const _that = this;

            // extend为true的话，lists，selectList数据量大的时候性能低
            return callFn(_that.filterName, [item, extend(false, options || {}, {
                activeIndexMap: _that.myActiveIndexMap,
                lists: _that.myLists,
                initMap: _that.myInitMap,
                isInit: _that.isInit,
                selectList: _that.mySelectList
            })]);
        },
        /**
         * 设置myLists
         */
        _setMyLists() {
            const _that = this;
            if (_that._time !== undefined) {
                clearTimeout(_that._time);
            }
            _that._time = setTimeout(() => {
                _that.isLoading = true;
            }, 200);
            getBackData(_that.lists).then((res) => {
                clearTimeout(_that._time);
                delete _that._time;
                _that.myLists = res;
            });
        },
        /**
         * 设置滚动索引的map
         * @param {number} activeIndex 激活的索引
         * @param {number} index 对应map的key
         */
        _onActiveIndexChange (activeIndex, index) {
            const _that = this;
            _that.myActiveIndexMap = _that.myActiveIndexMap || {};
            _that.$set(_that.myActiveIndexMap, index, activeIndex);
        },
        /**
         * 确定
         * @param {Event} evt 事件对象
         */
        _onConfirm (evt) {
            const _that = this;
            if (_that.state === 'end') {
                _that._confirm({
                    evt: evt,
                    data: _that.mySelectList
                });
            }
        },
        /**
         * 选择数据变化
         * @param {Event} evt 改变的数据
         * @param {Number} index data所在的列表的索引
         */
        _onDataChange (evt, index) {
            const _that = this;
            const _selectData = Object.assign({
                index: index
            }, evt || {});
            _that.mySelectList = _that.mySelectList || [];
            if (evt.data !== _that.mySelectList[index]) {
                _that.$set(_that.mySelectList, index, evt.data);
            }
            let _filterLinkage = _that.filterLinkage;
            if (!_filterLinkage) {
                let nextIndex = index + 1;
                if (nextIndex < (_that.myLists || []).length) {
                    _that.$set(_that.myInitMap, nextIndex, true);
                }
                return;
            }
            if (_filterLinkage === true) {
                _filterLinkage = filterLinkage;
            }
            /**
             * 获取数据映射
             */
            getBackData(_filterLinkage, [Object.assign({}, _selectData, {
                activeIndexMap: _that.myActiveIndexMap,
                lists: _that.myLists,
                initMap: _that.myInitMap,
                isInit: _that.isInit,
                selectList: _that.mySelectList,
                isResetIndex: _that.isResetIndex
            }), {
                lists: _that.lists,
                defaultValue: _that.defaultValue
            }]).then((res) => {
                if (typeof res !== 'undefined') {
                    let keys = {
                        selectList: 'mySelectList', // 设置选择的数据
                        initMap: 'myInitMap', // 初始化的map
                        lists: 'myLists', // 设置数据列表
                        activeIndexMap: 'myActiveIndexMap', // 设置选中index的map
                        isInit: 'isInit' // 设置选中index的map
                    };
                    let keyList = ['selectList', 'initMap', 'lists', 'activeIndexMap'];
                    for (let i = 0; i < keyList.length; i++) {
                        const _name = keyList[i];
                        if (res[_name] !== undefined) {
                            _that[keys[_name]] = res[_name];
                        }
                    }
                }
            });
            _that.isInit = false;
        },
        /**
         * 状态数据
         * @param {String} state wheel的状态（start， rolling，end三个状态）
         */
        _onStateChange (state) {
            const _that = this;
            if (_that.state !== state) {
                _that.state = state;
            }
        }
    }
};
</script>

<style lang="scss">
@import '../../../_assets/style/_iconFont.scss';
@import '../../../_assets/style/_var.scss';
@import '../../../_assets/style/_mixin.scss';

.nus_picker {
    overflow: hidden;
    .nu_layer-cont{
        position: relative;
    }
    .nu_picker-content {
        position: relative;
        overflow: hidden;
    }
    .nu_picker-wrapper {
        display: flex;
    }
    .nu_picker-loading{
        color: inherit;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}
</style>

