
<template>
    <Modal
        :class="bem()"
        :visible="visible"
        :showClose="false"
        :maskClosable="maskClosable"
        :keyborad="maskClosable"
        :onCancel="onCancel"
        :afterClose="afterClose"
        @update:visible="v => $emit('update:visible', v)"
        width="820px">
        <div :class="bem('bg', [type])">
            <template v-if="type === 'phone' || type === 'wechat'">
                <div :class="bem('title')">
                    <slot name="login_title"> 会员登录 </slot>
                </div>
                <div :class="bem('subtitle')">
                    <slot name="login_subtitle"> 登录即可下载作品 <Icon name="download" /> </slot>
                </div>
                <div :class="bem('desc')" role="ul">
                    <slot name="login_desc">
                        <p>· 免费使用基础抠图，纵享无限下载</p>
                        <p>· 最新高级抠图功能，注册用户独家享</p>
                        <p>· 自动记录在线操作，随时随地再处理</p>
                        <p>· 在线客服免排队，人工1V1答疑解惑</p>
                    </slot>
                </div>
            </template>
            <template v-else-if="type === 'register'">
                <div :class="bem('title')">
                    <slot name="register_title"> 会员注册 </slot>
                </div>
                <div :class="bem('subtitle')">
                    <slot name="register_subtitle"> 注册即可下载作品 <Icon name="download" /> </slot>
                </div>
                <div :class="bem('desc')" role="ul">
                    <slot name="register_desc">
                        <p>· 免费使用基础抠图，纵享无限下载</p>
                        <p>· 最新高级抠图功能，注册用户独家享</p>
                        <p>· 自动记录在线操作，随时随地再处理</p>
                        <p>· 在线客服免排队，人工1V1答疑解惑</p>
                    </slot>
                </div>
            </template>
            <template v-else-if="type === 'resetpwd'">
                <div :class="bem('title')">
                    <slot name="resetpwd_title"> 密码找回 </slot>
                </div>
                <div :class="bem('subtitle')">
                    <slot name="resetpwd_subtitle"> 验证信息修改密码</slot>
                </div>
                <div :class="bem('desc')" role="ul">
                    <slot name="register_desc"/>
                </div>
            </template>
            <template v-else-if="type === 'bindphone'">
                <div :class="bem('title')">
                    <slot name="bindphone_title">账户安全 </slot>
                </div>
                <div :class="bem('subtitle')">
                    <slot name="bindphone_subtitle"> 设置密码找回途径</slot>
                </div>
                <div :class="bem('desc')" role="ul">
                    <slot name="bindphone_desc"/>
                </div>
            </template>
            <div :class="bem('auth-wrapper')">
                <Icon v-if="showClose" name="close" @click.native="close" />
                <Auth
                    :type.sync="type"
                    @success="handleSuccess"
                    @error="handleError"
                />
            </div>
        </div>
    </Modal>
</template>
<script>
import Auth from '../Auth';
import Modal from '../Modal';
import Icon from '../Icon';
import { componentMixin, createComponentName } from '../_utils/component';

export default {
    name: createComponentName('auth-modal'),
    components: {
        Auth,
        Modal,
        Icon
    },
    mixins: [componentMixin],
    props: {
        // 显示弹窗 支持 :visible.sync
        visible: {
            type: Boolean,
            default: false,
        },
        onOk: {
            type: Function,
        },
        onCancel: {
            type: Function,
        },
        afterClose: {
            type: Function,
        },
        // 是否显示关闭按钮
        showClose: {
            type: Boolean,
            default: true,
        },
        // 点击遮罩是否可关闭
        maskClosable: {
            type: Boolean,
            default: true,
        },
        // 界面类型
        defaultType: {
            // phone / register / resetpwd / bindphone / qq / wechat
            type: String,
            default: 'wechat',
        },
    },

    data() {
        let defaultType = this.defaultType;

        if (defaultType === 'login') { // 兼容代码
            defaultType = 'wechat';
        }

        return {
            type: defaultType
        };
    },
    watch: {
        visible(v) {
            if (!v) this.type = this.defaultType;
        },
        defaultType() {
            this.type = this.defaultType;
        }
    },
    methods: {
        close() {
            this.$emit('update:visible', false);
            if (this.onCancel) this.onCancel();
        },
        handleSuccess(event) {
            // submit 成功
            // @arg action 操作类型 'login' 'register' 'resetpwd' 等
            if (this.onOk && event.action === 'login') {
                this.onOk(event);
            }
            this.$emit('success', event);
        },
        handleError(event) {
            // submit 失败
            // @arg action 操作类型 'login' 'register' 'resetpwd' 等
            // @arg error 失败信息
            this.$emit('error', event);
        }
    }
};
</script>
<style lang="less">
@import '../_styles/base.less';
.@{auth-modal} {

    box-sizing: border-box;

    & .@{modal} {
        padding: 0;
        border-radius: 4px;

        &__body {
            margin: 0;
        }
    }

    &__bg {
        opacity: 0;
        transition: all 400ms ease;
        height: 500px;
        padding: 87px;
        padding-top: 92px;
        line-height: 1.2;
        box-sizing: border-box;

        &--wechat,
        &--login,
        &--phone {
            background: #156bf9 url('../../assets/img/bg-login.png') no-repeat;
            opacity: 1;
        }

        &--register{
            background: #6224e0 url('../../assets/img/bg-register.png') no-repeat;
            opacity: 1;

            .@{auth}-register__submit {
                background-color: #6224e0;
                border: none;
                &:hover {
                    background-color: #5d16ec;
                }
                &[disabled] {
                    background: #FAFAFA;
                }
            }
        }

        &--resetpwd{

            background: #00002f url('../../assets/img/bg-resetpwd.png') no-repeat;
            opacity: 1;
            padding-top: 250px;
        }

        &--bindphone{

            background: #00002f url('../../assets/img/bg-bindphone.png') no-repeat;
            opacity: 1;

            .@{auth-modal}__subtitle {
                font-size:16px;
            }

            .@{auth-modal}__title {
                font-size:36px;
            }

            .@{icon}--close {
                display: none;
            }
        }
    }

    &__title {
        font-size:26px;
        font-weight:bold;
        color:rgba(255,255,255,1);
        font-family: 'PingFangSC-Semibold', MicrosoftYaHei-Bold;;
    }

    &__subtitle {
        font-size:26px;
        font-family: 'PingFang SC', MicrosoftYaHei;
        // font-weight: bold;
        color:rgba(255,255,255,1);
        line-height:43px;
        display: flex;
        align-items: center;
    }

    &__desc {
        margin-top: 42px;

        > p {
            margin: 0;
            line-height: 40px;
            font-size: 14px;
            color: #fff;
            font-family: PingFangSC, MicrosoftYaHei;
            text-align: left;
        }
    }

    &__auth-wrapper {
        position: absolute;
        top: 41px;
        right: -48px;
    }

    .@{icon}--close {
        position: absolute;
        right: 20px;
        top: 16px;
        z-index: 10;
        color: #999;
        cursor: pointer;
        font-size: 16px;

        &:hover {
            color: #707070;
        }
    }

    .@{icon}--download {
        color: #fff;
        margin-left: 10px;
    }
}
</style>
