<template>
    <div class="kyc-box">
        <login-header></login-header>
        <main class="wrap">
            <section class="layout-box clearfix">
                <div class="notice box-shadow"  v-if="isNeed">
                    <p>您需要完善您的最终受益人信息，请上传最终受益人身份证正、反面彩色影印件！</p>
                </div>
                <div class="layout-content box-shadow">
                    <div class="accont-title clearfix">
                        <h3>补充信息</h3>
                    </div>
                    <p
                        class="resubmit-notice clearfix"
                        v-if="userInfo.loginInfo.certificationStatus ==
                        'CONTACTS_AUDIT_FAILURE' || userInfo.loginInfo.certificationStatus ==
                        'FIRST_TRIAL_FAILURE'"
                    >
                        <span>*审核未通过的信息：</span>
                        <br />
                        <span>{{ jsRemark }}</span>
                    </p>
                    <div class="shareholder-info" v-loading="loading">
                        <p class="shareholder-notice">
                            补充最终受益人信息
                            <el-popover placement="right" trigger="hover">
                                <div class="popover-content">
                                    <p>
                                        根据香港海关《打击洗钱及恐怖分子资金筹集指引》及监管法规的最新要求，金融机构需要对客户进行持续尽职调查，
                                        <br />识别企业法定代表人及其最终受益人身份并要求提供股权占比大于25%的受益人身份证件，
                                        <br />现需要对您在我司留存的信息进行补充，感谢您的配合！
                                    </p>
                                </div>
                                <img src="~assets/images/icon-question.png" slot="reference" alt />
                            </el-popover>
                        </p>
                        <h3 class="shareholder-title">
                            最终受益人姓名
                            <span>*所有最终受益人的信息全部添加完成后，方可提交。</span>
                        </h3>
                        <ul class="shareholder-list clearfix">
                            <li
                                v-for="(item, index) in shareholderInfo"
                                :key="index"
                                @click="toUpdate(item)"
                            >
                                {{ item.stockName }}
                                <div class="shareholder-popover" v-if="item.isNeed">
                                    <img src="~assets/images/icon-notice.png" alt />待补充完善信息
                                </div>
                            </li>
                            <li class="btn-add" v-if="userInfo.isHK && shareholderInfo.length < 4">
                                <a href="javascript:;" @click="toUpdate">+添加最终受益人</a>
                            </li>
                        </ul>
                        <div style="height:70px;" v-if="isNeed"></div>
                        <p
                            class="notice-HK"
                            v-if="userInfo.isHK"
                        >企业实名认证的董事持股超过75%（不含）以上的，无需补充受益人，直接点击“提交”即可。</p>
                        <el-button
                            type="primary"
                            class="submit-btn"
                            @click="submit"
                            :loading="subLoading"
                        >提交</el-button>
                    </div>
                </div>
            </section>
        </main>
        <login-footer></login-footer>
    </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import loginHeader from "./components/header";
import loginFooter from "./components/footer";
import Clipboard from "clipboard";
import {
    api_getEnterprisePartners,
    api_updateKycNatural,
    api_getCertiInfo
} from "api/login.js";
export default {
    name: "kycShareholder",
    components: {
        loginHeader,
        loginFooter
    },
    data() {
        return {
            shareholderInfo: [],
            jsRemark: "",
            loading: true,
            isNeed: false,
            noRepeatClick: true,
            subLoading: false
        };
    },
    computed: {
        ...mapState(["userInfo"])
    },
    methods: {
        ...mapMutations(["setLegalPerson", "setIsHK"]),
        init() {
            let getEnterprise25PartnersData = {
                params: {}
            };
            api_getEnterprisePartners(getEnterprise25PartnersData).then(res => {
                if (res.success) {
                    if (res.data) {
                        this.shareholderInfo = res.data;
                        this.shareholderInfo.filter(item => {
                            if (item.isNeed) {
                                this.isNeed = true;
                            }
                        });
                    }
                } else {
                    this.$message.error(res.msg);
                }
                this.loading = false;
            });
        },
        formatNum(strNum) {
            var outputmoney = function(number) {
                number = number.replace(/\,/g, ""); //把所有的逗号，清除
                if (isNaN(number) || number == "") return "";
                number = Math.round(number * 100) / 100;
                if (number < 0)
                    return (
                        "-" +
                        outputdollars(Math.floor(Math.abs(number) - 0) + "") +
                        outputcents(Math.abs(number) - 0)
                    );
                else
                    return (
                        outputdollars(Math.floor(number - 0) + "") +
                        outputcents(number - 0)
                    );
            };
            //格式化金额
            var outputdollars = function(number) {
                if (number.length <= 3) {
                    return number == "" ? "0" : number;
                } else {
                    var mod = number.length % 3;
                    var output = mod == 0 ? "" : number.substring(0, mod);
                    for (let i = 0; i < Math.floor(number.length / 3); i++) {
                        if (mod == 0 && i == 0) {
                            output += number.substring(
                                mod + 3 * i,
                                mod + 3 * i + 3
                            );
                        } else {
                            output +=
                                "," +
                                number.substring(mod + 3 * i, mod + 3 * i + 3);
                        }
                    }
                    return output;
                }
            };
            var outputcents = function(amount) {
                amount = Math.round((amount - Math.floor(amount)) * 100);
                return amount < 10 ? ".0" + amount : "." + amount;
            };
            return outputmoney(strNum + "");
        },
        toUpdate(val) {
            if (!val) {
                this.$router.push({
                    path: "/kycUpdate",
                    query: {
                        id: ""
                    }
                });
            } else {
                this.$router.push({
                    path: "/kycUpdate",
                    query: {
                        id: val.contractsId
                    }
                });
            }
            this.$store.commit("setLegalPerson", val.stockName);
        },
        submit() {
            if (this.noRepeatClick) {
                this.noRepeatClick = false;
                this.subLoading = true;
                let canSubmit = this.shareholderInfo.every(item => {
                    return item.isNeed === false;
                });
                if (canSubmit) {
                    let updateKycNaturalData = {
                        data: {}
                    };
                    api_updateKycNatural(updateKycNaturalData).then(res => {
                        if (res.success) {
                            this.$router.replace({
                                path: "/account"
                            });
                        } else {
                            this.$message.error(res.msg);
                        }
                        this.subLoading = false;
                    });
                } else {
                    this.subLoading = false;
                    this.$message.error("请补全最终受益人信息！");
                }
            }
        },
        firstTrialFailue() {
            let getCertiInfoParams = {
                params: {}
            };
            api_getCertiInfo(getCertiInfoParams).then(res => {
                this.jsRemark = res.data.jsRemark;
            });
        }
    },
    created() {
        this.init();
        if (
            this.userInfo.loginInfo.certificationStatus ===
                "CONTACTS_AUDIT_FAILURE" ||
            this.userInfo.loginInfo.certificationStatus ===
                "FIRST_TRIAL_FAILURE"
        ) {
            this.firstTrialFailue();
        }
    }
};
</script>

<style lang="less" scoped>
@import "../../assets/styles/common.css";
.kyc-box {
    background: #f7f7f7;
}
.wrap {
    min-height: calc(100vh - 184px);
    margin: 30px 0;
}
.notice {
    margin-bottom: 20px;
    padding: 20px;
    background: #fff8e8;
    p {
        line-height: 22px;
        padding-left: 32px;
        font-size: 14px;
        text-align: left;
        background: url(~assets/images/icon-notice.png) left 0 no-repeat;
        background-size: 20px 20px;
        color: #cc3333;
    }
}
.shareholder-info {
    padding: 20px 60px 60px;
    text-align: left;
    .shareholder-notice {
        img {
            vertical-align: middle;
            margin-top: -4px;
            cursor: pointer;
        }
    }
    .shareholder-title {
        margin-top: 26px;
        font-size: 18px;
        span {
            font-size: 14px;
            font-weight: normal;
            color: #999;
        }
    }
    .shareholder-list {
        margin-top: 20px;
        li {
            position: relative;
            float: left;
            margin-right: 20px;
            width: 166px;
            height: 44px;
            line-height: 44px;
            text-align: center;
            font-size: 14px;
            border: 1px solid #3d86e9;
            border-radius: 2px;
            color: #3d86e9;
            cursor: pointer;
            &.btn-add {
                width: initial;
                border: none;
                a {
                    color: #3d86e9;
                }
            }
            .shareholder-popover {
                position: absolute;
                left: 0;
                top: 62px;
                width: 166px;
                height: 44px;
                line-height: 44px;
                text-align: center;
                border-radius: 6px;
                background: #fff8e8;
                color: #333;
                &::before {
                    content: "";
                    position: absolute;
                    top: -24px;
                    left: 50%;
                    width: 0;
                    height: 0;
                    margin-left: -12px;
                    border-top: 12px solid transparent;
                    border-right: 12px solid transparent;
                    border-bottom: 12px solid #fff8e8;
                    border-left: 12px solid transparent;
                }
                img {
                    margin: -4px 10px 0 0;
                    vertical-align: middle;
                }
            }
        }
    }
    .notice-HK {
        margin-top: 20px;
        font-size: 14px;
        font-weight: normal;
        color: #999;
    }
    .submit-btn {
        display: block;
        margin-top: 20px;
        width: 330px;
        height: 44px;
        text-align: center;
        border-radius: 4px;
        background: #3d86e9;
        color: #fff;
    }
}
.resubmit-notice {
    margin: 20px 60px;
    padding: 20px;
    text-align: left;
    line-height: 28px;
    border-radius: 6px;
    background: #fff8e8;
    color: #cc3333;
    span {
        &:first-child {
            font-weight: bold;
        }
        &:last-child {
            font-size: 16px;
        }
    }
}
</style>
