<template>
    <div class="nus_login"
        :class="{'nu_codeLogin': myPageType === 'codeLogin'}">
        <transition name="t_loginModel"
            @after-enter="enter()"
            @after-leave="_afterLeave">
            <template
                v-for="(item, index) in pageTypeList">
                <div class="nu_page-item"
                    :class="[myReduce && 'nu_page-reduce']"
                    :is="myCom || item"
                    :loginBtnTxt="myLoginBtnText"
                    :getUserData="getUserData"
                    :username="username"
                    :validData="validData"
                    :key="index"
                    :isAccessFailure="isAccessFailure"
                    :patternType="patternType"
                    :copyright="copyright"
                    :thirdParty="thirdParty"
                    @openPage="openPage"
                    @link="linkClick"
                    @confirm="confirm"
                    @close="cancel"
                    v-if="item === pageFilter(myPageType)">
                </div>
            </template>
        </transition>
    </div>
</template>
<script>
import {
    dispatchEvent, prefixEvent, getCookie, callFn, USER_PAGE_TYPE, getBackData
} from 'nimble-lib';
import attrSync from '../../../Mixins/attrSync';
import LoginTmp from './_comm/LoginTmp';
import LoginForm from './loginForm/LoginForm';
import Agreement from '../agreement/Agreement';
import CodeLoginForm from './codeLoginForm/CodeLoginForm';

export default {
    extends: LoginTmp,
    name: 'nuLogin',
    components: {
        LoginForm,
        Agreement,
        CodeLoginForm
    },
    props: {
        // user: { // 操作用户信息的对象
        //     type: Object
        // },
        pageType: { // 页面类型
            type: String,
            default: USER_PAGE_TYPE.LOGIN
        },
        /**
         * 跳转页面
         */
        filterRedirect: {

        }
    },
    data () {
        let _phone = getCookie('ThirdpartyPhone');
        const _errMsg = callFn(this.validData, ['vPhone', _phone]);
        if (_errMsg) {
            _phone = null;
        }
        return {
            pageTypeList: ['login-form', 'agreement', 'code-login-form'],
            myPageType: _phone ? USER_PAGE_TYPE.CODE_LOGIN : this.pageType,
            outPage: null,
            pageList: [],
            myReduce: false,
            myLoginBtnText: _phone ? '验证' : this.loginBtnTxt,
            username: _phone,
            myCom: null
        };
    },
    popupPopstate(evt) {
        this._popstate(evt);
    },
    mixins: [
        /**
         * 登录模式（1为手机验证登录，2为账号密码登录）
         */
        attrSync('pattern')
    ],
    methods: {
        enter() {
            dispatchEvent(this.$el, prefixEvent('transitionend', true));
        },
        confirm (evt) {
            this.$emit('confirmChange', evt.data);
        },
        cancel (evt) {
            this.$emit('cancelChange', evt);
        },
        _afterLeave () {
            this.myReduce = false;
        },
        /**
         * xxxx用户协议链接点击回调
         * @param {Event} evt 事件对象
         */
        linkClick (evt) {
            console.log(evt);
            getBackData(this.filterRedirect, [USER_PAGE_TYPE.AGREEMENT, null, (evt || {}).itemData]).then((flag) => {
                if (flag !== false) {
                    if (flag) {
                        this.myCom = flag;
                    }
                    this.myPageType = USER_PAGE_TYPE.AGREEMENT;
                }
            });
        },
        /**
         * popstate事件回调
         * @param {Event} evt event事件对象
         */
        _popstate (evt) {
            const _that = this;
            evt = evt || {};
            const { nowPage } = evt;
            if (nowPage) {
                if (nowPage !== _that.myPageType) {
                    _that.myReduce = true;
                    setTimeout(() => {
                        _that.myCom = null;
                        _that.myPageType = nowPage;
                    });
                }
            } else {
                _that.cancel();
            }
        },
        /**
         * 过滤页面组件
         * @param {USER_PAGE_TYPE} pageType 页面类型
         * @return {String}
         */
        pageFilter (pageType) {
            let res = '';
            switch (pageType) {
                case USER_PAGE_TYPE.LOGIN: // 登录页
                    res = 'login-form';
                    break;
                case USER_PAGE_TYPE.AGREEMENT: // xxxx用户协议页面
                    // res = Agreement;
                    res = 'agreement';
                    break;
                case USER_PAGE_TYPE.CODE_LOGIN: // 验证码登陆
                    res = 'code-login-form';
                    break;
            }
            return res;
        },
        /**
         * 记录打开的页面
         * @param {String} pageType 页面类型
         */
        openPage (pageType) {
            const _that = this;
            let title = '';
            _that.myPageType = pageType;
            switch (pageType) {
                case USER_PAGE_TYPE.LOGIN:
                    title = '登录页';
                    break;
                case USER_PAGE_TYPE.AGREEMENT:
                    title = 'xxxx用户协议页面';
                    break;
            }
            _that._onOpenPage({
                state: {
                    carPage: 1,
                    pageType
                },
                title,
                pageName: pageType
            });
        },

        /**
         * 打开页面
         * @param {Object} data 打开页面的数据
         */
        _onOpenPage(data) {
            this.$emit('openPage', data);
            // setTimeout(() => {
            //     this.$emit('openPage', data);
            // });
        }
    }
};
</script>

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

.nus_login {
    $time: .3s;
    height: 100%;
    width: 100%;
    display: inline-block;
    white-space: nowrap;
    border-color: $nulogin-br-color;
    background: $nulogin-bg-color;
    *{
        border-color: inherit;
    }
    &.nu_codeLogin {
        width: 300px;
        height: 310px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 4px;
    }
    .nu_page-item {
        display: inline-block;
        white-space: normal;
        width: 100%;
        transform: translateX(0);
    }
    .t_loginModel{
        @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>
