<template>
    <div class="nus_login">
        <i class="nu_close nu_icon nu_header-close" @click="$emit('close')">&#xe606;</i>
        <div class="nu_login-wrap">
            <div class="nu_login-cont">
                <div class="nu_cont-logo">
                    <div class="nu_logo-img">
                        <nu-imgc
                            :imgUrl="logo"
                            :aspect="1"
                            :lazyOptions="{width: '54px'}">
                        </nu-imgc>
                    </div>
                    <!-- <img class="nu_logo-img" v-lazy="{src:logo, width: '54px'}" alt="" /> -->
                </div>
                <name-login-box
                    v-if="myPattern + '' === '2'"
                    class="nu_login-form"
                    :pattern="myPattern"
                    :getUserData="getUserData"
                    :validData="validData"
                    :btnTxt="loginBtnTxt"
                    :copyrightChecked.sync="myCopyrightChecked"
                    @submit="$emit('submit', $event)"
                    @confirm="confirm">
                </name-login-box>
                <login-box
                    v-else
                    class="nu_login-form"
                    :pattern="myPattern"
                    :getUserData="getUserData"
                    :validData="validData"
                    :code-btn-txt="codeBtnTxt"
                    :btnTxt="loginBtnTxt"
                    :copyrightChecked.sync="myCopyrightChecked"
                    @submit="$emit('submit', $event)"
                    @confirm="confirm">
                </login-box>
                <div class="nu_quick-nav nu_login-form" v-if="patternType + '' === '0'">
                    <nu-textt
                        @click="switchLogin"
                        class="nu_quick-btn">
                        {{patternName}}
                    </nu-textt>
                </div>
                <div class="nu_cont-thirdParty" v-if="thirdParty && deviceInfo && deviceInfo.isWeixin && !isAccessFailure">
                    <nu-textl>第三方账号登录</nu-textl>
                    <div class="nu_thirdParty-list">
                        <nu-icon
                            class="nu_thirdParty-item"
                            :icon="'\ue61f'"
                            :nameText="'微信登录'"
                            @click="wxAuthorize">
                        </nu-icon>
                    </div>
                </div>
                <!-- <component :is='copyrightCom' v-if="copyrightCom"></component> -->
                <component
                    :is="copyrightCom"
                    :copyrightChecked.sync="myCopyrightChecked"
                    @link="$emit('link', $event)"></component>
                <!-- <div class="nu_cont-rule"
                    v-if="copyright">
                    {{copyright}}
                    <a class="nu_rule_link" @click="$emit('link', $event)">《用户协议》</a>
                </div> -->
            </div>
        </div>
    </div>
</template>

<script>
import {
    getBackData, deviceInfo, USER_DATA_TYPE, USER_PAGE_TYPE
} from 'nimble-lib';
import Vue from 'vue';
import NuCheckbox from '../../../form/checkbox/Checkbox';
import LoginTmp from '../_comm/LoginTmp';
import LoginBox from './loginBox/LoginBox';
import NameLoginBox from './nameLoginBox/NameLoginBox';
import NuIcon from '../../../widget/icon';
import NuTextl from '../../../widget/text/textl';
import NuTextt from '../../../widget/text/textt';
import attrSync from '../../../../Mixins/attrSync';
import NuImgc from '../../../widget/img/imgc';
import { DEFAULT_LOGO } from '../constant';

export default {
    name: 'NuLoginForm',
    extends: LoginTmp,
    components: {
        LoginBox,
        NameLoginBox,
        NuIcon,
        NuTextl,
        NuTextt,
        NuImgc
    },
    props: {
        codeBtnTxt: { // 二维码按钮文字

        },
        logo: { // logo图标
            type: String,
            default: DEFAULT_LOGO
        },
        loginBtnTxt: {
            type: String,
            default: '登录'
        }
    },
    mixins: [
        /**
         * 登录模式（1为手机验证登录，2为账号密码登录）
         */
        attrSync('pattern', {
            myValueInit() {
                return this.patternType || 1;
            }
        })
        // attrSync('pattern', {
        //     value: {
        //         default: 1
        //     }
        // })
    ],
    data () {
        return {
            myCopyrightChecked: null,
            deviceInfo
        };
    },
    computed: {
        patternName() {
            let res = '';
            switch (this.myPattern + '') {
                case '1':
                    res = '账号密码登录';
                    break;
                case '2':
                    res = '短信验证码登录';
                    break;
            }
            return res;
        },
        copyrightCom() {
            let res = null;
            let { copyright } = this;
            if (typeof copyright === 'string') {
                copyright = [{
                    text: copyright
                }];
            }
            if (copyright instanceof Array && copyright.length) {
                let text = '';
                copyright.forEach((item, index) => {
                    if (typeof item === 'string') {
                        text += item;
                    } else if (item instanceof Object) {
                        switch (item.type) {
                            case 'link':
                                text += `<a class="nu_rule_link"
                                    @click="$emit('link', {Event:$event,itemData: copyright[${index}]})">${item.nameText}</a>`;
                                break;
                            case 'checkbox':
                                text += `<nu-checkbox
                                    :checked.sync="myCopyrightChecked"
                                    :iconClass="(copyright[${index}]||{}).iconClass"
                                    :icon="(copyright[${index}]||{}).icon"
                                    :iconActive="(copyright[${index}]||{}).iconActive">${item.nameText || ''}</nu-checkbox>`;
                                break;
                            default:
                                text += item.nameText;
                                break;
                        }
                    }
                });
                // const Vue = this.$root.constructor;
                res = Vue.extend({
                    template: '<div class="nu_cont-rule">' + text + '</div>',
                    mixins: [attrSync('copyrightChecked')],
                    components: {
                        NuCheckbox
                    },
                    data() {
                        return {
                            copyright
                        };
                    }
                });
            }
            return res;
        }
    },
    mounted () {
        this.$emit('openPage', USER_PAGE_TYPE.LOGIN);
    },
    methods: {
        confirm(evt) {
            this.$emit('confirm', evt);
        },
        switchLogin() {
            if (this.myPattern < 2) {
                this.myPattern += 1;
            } else {
                this.myPattern = 1;
            }
        },
        wxAuthorize() {
            const _that = this;
            getBackData(_that.getUserData, [USER_DATA_TYPE.WX_AUTHORIZE, {}]);
        }
    }
};
</script>

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

.nus_login {
    width: 100%;
    height: 100%;
    min-width: 300px;

    .nu_header-close {
        // @extend %ac_icon;
        color: $nulogin-close-color;
        top: 20px;
        left: 20px;
        font-size: 20px;
        font-weight: 500;
    }
    .nu_login-wrap {
        width: 100%;
        height: 100%;
        overflow-y: auto;
        background: #fff no-repeat top center / contain;
    }
    .nu_login-cont {
        margin-top: 94px;
        margin-bottom: 40px;
    }
    .nu_cont-logo {
        user-select: none;
        .nu_logo-img {
            width: 54px;
            height: 54px;
            margin: 0 auto;
            display: block;
        }
    }
    .nu_login-form {
        padding: 0 30px;
        max-width: 500px;
        margin: 60px auto 0;
    }
    .nu_cont-rule {
        color: $nulogin-rule-text-color;
        font-size: 12px;
        text-align: center;
        margin-top: 40px;
        padding: 0 30px;
    }
    .nu_rule_link {
        color: $nulogin-rule-link-color;
        cursor: pointer;
    }

    .nu_quick-nav{
        color: $color999;
        margin-top: 12px;
        @include after();
    }
    .nu_quick-btn {
        float: left;
    }

    .nu_cont-thirdParty{
        padding: 0 30px;
        margin-top: 35px;
        color: $nulogin-third-party-color;
    }
    .nu_thirdParty-list{
        margin-top: 20px;
        width: 100%;
        text-align: center;
    }
    .nu_thirdParty-item{
        display: inline-block;
        .nu_tcicon{
            width: 36px;
            font-size: 36px;
            color: $nulogin-third-party-wx-color;
        }
        .nu_text{
            font-size: 24px;
            margin-top: 12px;
        }
    }
}
</style>
