<template>
    <div class="kyc-box">
        <login-header></login-header>
        <main class="wrap">
            <section>
                <div class="layout-box">
                    <div class="accont-title clearfix">
                        <h3>实名认证</h3>
                    </div>
                    <div class="kyc-content">
                        <div class="steps clearfix">
                            <ul>
                                <li>
                                    <img src="~assets/images/icon-step.png" alt />
                                </li>
                                <li>
                                    <img src="~assets/images/icon-step2.png" alt />
                                </li>
                                <li>
                                    <img src="~assets/images/icon-step3.png" alt />
                                </li>
                            </ul>
                            <p>
                                <span>创建用户</span>
                                <span>实名认证</span>
                                <span>等待审核</span>
                            </p>
                        </div>
                        <div class="registration-type">
                            <h3>注册类型</h3>
                            <el-select
                                v-model="typeValue"
                                :disabled="disabled"
                                placeholder="请选择"
                                @change="chooseType()"
                            >
                                <el-option
                                    v-for="item in typeOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                            <div class="notice">
                                <p>{{ noticeText }}</p>
                            </div>
                        </div>
                        <component :is="registrationType"></component>
                    </div>
                </div>
            </section>
        </main>
        <login-footer></login-footer>
    </div>
</template>

<script>
import { mapState } from "vuex";
import loginHeader from "./components/header";
import loginFooter from "./components/footer";
import ChinaPersonal from "./components/ChinaPersonal";
import ChinaCompany from "./components/ChinaCompany";
import HKPersonal from "./components/HKPersonal";
import HKCompany from "./components/HKCompany";
export default {
    name: "kyc",
    components: {
        loginHeader,
        loginFooter,
        ChinaPersonal,
        ChinaCompany,
        HKPersonal,
        HKCompany
    },
    computed: {
        ...mapState(["userInfo"])
    },
    data() {
        return {
            typeOptions: [
                {
                    value: "MAINLAND_PERSONAL",
                    label: "大陆个人"
                },
                {
                    value: "MAINLAND_COMPANY",
                    label: "大陆企业"
                },
                {
                    value: "HK_PERSONAL",
                    label: "香港个人"
                },
                {
                    value: "HK_COMPANY",
                    label: "香港企业"
                }
            ],
            typeValue: "MAINLAND_PERSONAL",
            registrationType: "ChinaPersonal",
            noticeText:
                "注册大陆个人账户：你可提现至大陆个人银行卡。请准备好：个人身份证人像页、国徽页、手持证件影印件",
            disabled: false
        };
    },
    methods: {
        chooseType() {
            if (this.typeValue == "MAINLAND_PERSONAL") {
                this.registrationType = "ChinaPersonal";
                this.noticeText =
                    "注册大陆个人账户：你可提现至大陆个人银行卡。请准备好：个人身份证人像页、国徽页、手持证件影印件";
            } else if (this.typeValue == "MAINLAND_COMPANY") {
                this.registrationType = "ChinaCompany";
                this.noticeText =
                    "注册大陆企业账户：你可提现至企业对公账户或法定代表人个人账户。请准备好：营业执照影印件、统一社会信用代码、企业法人身份证件正反面或护照人像页影印件";
            } else if (this.typeValue == "HK_PERSONAL") {
                this.registrationType = "HKPersonal";
                this.noticeText =
                    "注册香港个人账户：你可提现至香港个人银行卡。请准备好：香港永久性居民身份证人像页、手持证件影印件或护照人像页影印件";
            } else if (this.typeValue == "HK_COMPANY") {
                this.registrationType = "HKCompany";
                this.noticeText =
                    "注册香港企业账户：你可提现至香港企业对公账户。请准备好：商业登记证影印件、公司注册证书影印件、企业董事身份证件影印件";
            }
        }
    },
    created() {
        if (
            this.userInfo.loginInfo.certificationStatus !== "NO_SUBMIT" &&
            this.userInfo.loginInfo.certificationStatus !==
                "FIRST_TRIAL_FAILURE"
        ) {
            this.$router.push({
                path: "/account"
            });
        }
        if (
            this.userInfo.loginInfo.certificationStatus ===
            "FIRST_TRIAL_FAILURE"
        ) {
            this.typeValue = this.userInfo.loginInfo.registerType;
            this.disabled = true;
            this.chooseType();
        }
    }
};
</script>

<style lang="less" scoped>
@import "../../assets/styles/common.css";
.kyc-box /deep/ .btn-reg {
    margin-top: 40px;
    .el-button--primary {
        width: 100%;
    }
}
.kyc-box /deep/ .el-select {
    width: 330px;
}
.kyc-box {
    background: #f7f7f7;
}
.wrap {
    min-height: calc(100vh - 184px);
    margin: 30px 0;
    section {
        width: 1080px;
        margin: 0 auto;
        text-align: left;
        background: #fff;
        .kyc-content {
            padding: 30px 60px;
            h3 {
                margin-bottom: 8px;
            }
        }
        .steps {
            text-align: center;
            ul {
                overflow: hidden;
                padding-bottom: 6px;
                border-bottom: 1px solid #e6e6e6;
                box-sizing: border-box;
                li {
                    position: relative;
                    float: left;
                    width: 33.33%;
                    &:first-of-type::after,
                    &:nth-of-type(2)::after {
                        content: "";
                        display: block;
                        position: absolute;
                        left: 50%;
                        bottom: -6px;
                        width: 110px;
                        height: 1px;
                        margin-left: -55px;
                        background: #3d86e9;
                    }
                }
            }
            p {
                margin-top: 20px;
                span {
                    float: left;
                    width: 33.33%;
                }
            }
        }
        .registration-type {
            margin-top: 36px;

            .notice {
                position: relative;
                margin-top: 22px;
                padding: 20px 10px;
                border-radius: 6px;
                background: #fff8e8;
                &::before {
                    content: "";
                    position: absolute;
                    top: -20px;
                    left: 60px;
                    width: 0;
                    height: 0;
                    border-top: 10px solid transparent;
                    border-right: 10px solid transparent;
                    border-bottom: 10px solid #fff8e8;
                    border-left: 10px solid transparent;
                }
                p {
                    line-height: 22px;
                    padding-left: 32px;
                    font-size: 14px;
                    background: url(~assets/images/icon-notice.png) left 0
                        no-repeat;
                    background-size: 20px 20px;
                }
            }
        }
    }
}
</style>
