<template>
  <div class="nus_toast"
    v-if="myList && myList.length > 0">
        <template
            v-for="(item, index) in myList">
            <toast-item
                class="nu_toast-item"
                v-if="item"
                :key="index"
                :nameText="item.text"
                :time="item.time"
                @close.stop="_onClose(index)">
            </toast-item>
        </template>
  </div>
</template>

<script>
import ToastItem from './toastItem/ToastItem';
import WidgetTmp from '../_comm/WidgetTmp';
import { callFn } from 'nimble-lib';

export default {
    extends: WidgetTmp,
    name: 'NuToast',
    components: {
        ToastItem
    },
    props: {
        /**
         * 是否使用列表形式显示
         */
        isList: {
            default: false
        },
        /**
         * toast列表数据
         */
        list: {
            type: Array
        }
    },
    data () {
        return {
            myIsList: this.isList, // 是否使用列表形式显示
            myList: this.list || [], // toast列表
            itemData: null, // toast的临时数据项
            lock: false
        };
    },
    watch: {
        /**
         * 监听是否显示toast item的数组
         * @param {Array} nowVal 显示标识
         */
        list (nowVal) {
            this.itemData = nowVal;
        },
        /**
         * 监听toast的数据项的变化
         * @param {Array} nowVal toast的数据项
         */
        itemData (nowVal) {
            const _that = this;
            _that.lock = false;
            if (nowVal) {
                if (!_that.myIsList) {
                    _that.myList = [];
                }
                _that.myList = _that.myList.concat(nowVal);
            }
        }
    },
    methods: {
        _closePopup(count, cb) {
            let _that = this;
            let nowVal = this.myList;
            let _count = 0;
            count = count || 0;
            if (nowVal && nowVal.length) {
                for (let i = 0; i < nowVal.length; i++) {
                    const item = nowVal[i];
                    if (item) {
                        _count = _count + 1;
                        if (_count > count) {
                            callFn(cb);
                            return;
                        }
                    }
                }
            }
            if (_that._settime !== undefined && _that._settime === null) {
                clearTimeout(_that._settime);
            }
            if (_that.lock) {
                return;
            }
            _that.lock = true;
            _that.$emit('closePopup');
            _that._settime = setTimeout(() => {
                _that._settime = null;
                callFn(cb);
            }, 200);
        },
        /**
         * 关闭指定项的toast
         * @param {Number} index 索引
         */
        _onClose (index) {
            const _that = this;
            _that._closePopup(1, () => {
                _that.$set(_that.myList, index, null);
            });
        }
    }
};
</script>

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

.nu_tips-popup{
    &.nus_popup{
        .nu_content-wrap{
            width: 100%;
            max-width: 296px;
            pointer-events: none;
        }
    }
}
.nus_toast {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: $nutoast-font-size;
    color: $nutoast-cont-color;
    .nu_toast-item {
        margin-top: 5px;
        &:first-child {
            margin-top: 0;
        }
    }
}
</style>
