<template>
    <div class="nus_address">
        <transition name="t_address"
            @after-enter="enter()"
            @after-leave="_afterLeave">
            <template
                v-for="(item, index) in pageTypeList">
                <div class="nu_page-item"
                    v-if="item === pageFilter(myPageType)"
                    :class="[myReduce && 'nu_page-reduce']"
                    :is="item"
                    :key="index"
                    :addBtnText="addBtnText"
                    :saveBtnText="mySaveBtnText"
                    :getAddressData="getAddressData"
                    :message="message"
                    :filterItem="filterItem"
                    :addressData="addressItem"
                    @openPage="openPage"
                    @addEdit="_toEditPage"
                    @selectItem="_onSelectItem"
                    @save="_onSave">
                </div>
            </template>
        </transition>
    </div>
</template>

<script>
import { dispatchEvent, prefixEvent } from 'nimble-lib';
import AddressTmp from './_comm/AddressTmp';
import { PAGE_TYPE } from '../../../Services/address/constants';
import { EVENT_TYPE } from './constants';
import { POPUP_EVENT } from '../../../_commons/constant';
import MyAddress from './myaddress/Myaddress';
import Addressedit from './addressedit/Addressedit';
export default {
    extends: AddressTmp,
    name: 'NuAddress',
    components: {
        MyAddress,
        Addressedit
    },
    props: {
        /**
         * 页面类型
         */
        pageType: {
            type: String,
            default: PAGE_TYPE.ADDRESS_LIST
        }
    },
    data () {
        const _that = this;
        return {
            pageTypeList: ['my-address', 'addressedit'],
            myPageType: _that.pageType,
            outPage: null,
            pageList: [],
            myReduce: false,
            addressItem: null
        };
    },
    popupPopstate(evt) {
        this._popstate(evt);
    },
    computed: {
        mySaveBtnText() {
            let res = '';
            if (this.saveBtnText) {
                res = this.saveBtnText;
            } else {
                res = this.isBack ? '保存并使用' : '保存';
            }
            return res || '';
        }
    },
    methods: {
        /**
         * 动画进入回调方法
         */
        enter () {
            dispatchEvent(this.$el, prefixEvent('transitionend', true));
        },
        /**
         * 动画离开
         */
        _afterLeave () {
            this.myReduce = false;
        },
        /**
         * popstate事件回调
         * @param {Event} evt event事件对象
         */
        _popstate (evt) {
            const _that = this;
            evt = evt || {};
            let nowPage = evt.nowPage;
            if (nowPage) {
                if (nowPage !== _that.myPageType) {
                    _that.myReduce = true;
                    setTimeout(() => {
                        _that.myPageType = nowPage;
                    });
                }
            } else {
                _that._cancel();
            }
        },
        /**
         * 过滤页面组件
         * @param {PAGE_TYPE} pageType 页面类型
         * @return {String}
         */
        pageFilter (pageType) {
            let res = '';
            switch (pageType) {
                case PAGE_TYPE.ADDRESS_LIST: // 我的地址库列表
                    res = 'my-address';
                    break;
                case PAGE_TYPE.ADDRESS_EDIT: // 地址编辑页面
                    res = 'addressedit';
                    break;
            }
            return res;
        },
        /**
         * 记录打开的页面
         * @param {String} pageType 页面类型
         */
        openPage (pageType) {
            const _that = this;
            let title = '';
            _that.myPageType = pageType;
            switch (pageType) {
                case PAGE_TYPE.ADDRESS_LIST:
                    title = '选择收货地址';
                    break;
                case PAGE_TYPE.ADDRESS_EDIT:
                    title = '编辑收货地址';
                    break;
            }
            _that.$emit(EVENT_TYPE.OPEN_PAGE, {
                state: {
                    carPage: 1,
                    pageType: pageType
                },
                title: title,
                pageName: pageType
            });
        },

        /**
         * 跳转到编辑页面
         * @param {Object} evt 地址项数据
         */
        _toEditPage (evt) {
            const _that = this;
            _that.addressItem = (evt || {}).data;
            _that.myPageType = PAGE_TYPE.ADDRESS_EDIT;
        },
        /**
         * 保存成功的事件回调
         * @param {Object} item item项数据
         */
        _onSave (item) {
            const _that = this;
            if (_that.isBack) {
                _that._onSelectItem(item);
            } else {
                _that.$emit('goBackPage');
            }
        },
        /**
         * 当选中item的事件回调
         * @param {Object} item 数据项
         */
        _onSelectItem (item) {
            this.$emit(EVENT_TYPE.SELECT_ITEM, item);
            this._confirm(item);
        },
        /**
         * confirm事件回调方法
         * @param {Event} evt 事件对象
         */
        _confirm (evt) {
            this.$emit(POPUP_EVENT.CONFIRM, evt);
        },
        /**
         * cancel事件回调
         * @param {Event} evt 事件对象
         */
        _cancel (evt) {
            this.$emit(POPUP_EVENT.CANCEL, evt);
        }
    }
};
</script>

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

.nus_address {
    $time: .3s;
    width: 100%;
    height: 100%;
    background-color: $nuaddress-bg-color;
    white-space: nowrap;
    .t_address {
        @at-root #{&}-{
            &enter-active,&leave-active{
                transition: transform $time ease-out;
            }
            &enter-to,&leave-to{
                transform: translateX(-100%);
            }
            &enter-active{
                &.nu_page-reduce{
                    transform: translateX(-200%);
                }
            }
            &leave-to{
                &.nu_page-reduce{
                    transform: translateX(100%);
                }
            }
            &enter-to{
                &.nu_page-reduce{
                    transform: translateX(-100%);
                }
            }
        }
    }
}
</style>
