<template>
    <main class="apply">
        <declare :innerVisibleDeclare="innerVisibleDeclare" @close="closeDeclare"></declare>
        <bind-store :innerVisibleBindStore="innerVisibleBindStore" @close="closeBindStore"></bind-store>
        <section class="layout-box clearfix">
            <div class="layout-content box-shadow">
                <div class="accont-title clearfix">
                    <h3>申请境外收款账户</h3>
                </div>
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="form-ruleForm">
                    <el-form-item prop="platform" class="platform">
                        <el-radio-group v-model="ruleForm.platform">
                            <el-radio label="AMAZON">
                                <img src="~assets/images/icon-platform-amazon.jpg" alt />
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item prop="storeSite" class="store-site">
                        <el-select v-model="ruleForm.storeSite">
                            <el-option
                                :label="item.name"
                                :value="item.code"
                                v-for="(item) in storeSiteList"
                                :key="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="resource">
                        <el-radio-group v-model="ruleForm.resource" @change="hasShop">
                            <el-radio label="1">已有产品售卖</el-radio>
                            <el-radio label="0">暂无产品售卖/暂无店铺</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item prop="storeName">
                        <el-input
                            v-model="ruleForm.storeName"
                            placeholder="填写您的店铺名称"
                            maxlength="30"
                        ></el-input>
                    </el-form-item>
                    <el-form-item prop="name">
                        <el-input
                            v-model="userShowInfo.certificationName"
                            :title="userShowInfo.certificationName"
                            maxlength="100"
                            disabled
                        ></el-input>
                        <span class="account-name">（账户持有人）</span>
                    </el-form-item>
                    <el-form-item prop="storeUrl" v-if="ruleForm.resource == 1">
                        <el-input v-model.trim="ruleForm.storeUrl" placeholder="请填写您的任意一款在售产品前台链接"></el-input>
                    </el-form-item>
                    <el-form-item style="width:100px;" v-if="ruleForm.resource == 1">
                        <el-radio-group v-model="sellerAuth">
                            <el-radio label="1">填写授权信息</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <div class="get-seller-id" v-if="ruleForm.resource == 1">
                        <p>
                            店铺在授权过程中，您需要开发者信息填写到亚马逊后台从而获得授权信息。
                            <router-link to="/guide/getMWS" target="_blank">如何获取卖家编号、MWS授权令牌？</router-link>
                        </p>
                        <div class="developer">
                            <span>开发商名称（Developer Name)</span>
                            <span>JishiyuPay</span>
                            <span class="tag-read" data-clipboard-text="JishiyuPay" @click="copy">复制</span>
                        </div>
                        <div class="developer">
                            <span>开发者ID（Developer ID）</span>
                            <span>789457319709</span>
                            <span
                                class="tag-read"
                                data-clipboard-text="789457319709"
                                @click="copy"
                            >复制</span>
                        </div>
                        <el-form-item prop="sellerId">
                            <el-input
                                v-model.trim="ruleForm.sellerId"
                                maxlength="100"
                                placeholder="请输入卖家编号Seller ID"
                            ></el-input>
                        </el-form-item>
                        <el-form-item prop="authToken">
                            <el-input
                                v-model.trim="ruleForm.authToken"
                                maxlength="100"
                                placeholder="请输入MWS Auth Token"
                            ></el-input>
                        </el-form-item>
                    </div>
                    <div class="no-store-notice" v-else>
                        <p>对于暂无Amazon店铺的用户，及时雨跨境支付将会为您提供一个待激活的收款账户，便于您注册Amazon新店铺。当您开始售卖产品或完成注册后，您需绑定店铺，避免影响您的亚马逊资金入账。</p>
                    </div>
                    <el-form-item prop="agreement" class="check-box">
                        <el-checkbox name="type" v-model="ruleForm.agreement"></el-checkbox>
                        <p>
                            我已阅读并同意
                            <a href="javascript:;" @click="showBindStore">《店铺绑定条款》</a>
                            与
                            <a
                                href="javascript:;"
                                @click="showDeclare"
                            >《申明》</a>
                        </p>
                    </el-form-item>
                    <el-form-item>
                        <el-button
                            type="primary"
                            @click="submitForm('ruleForm')"
                            :loading="subLoading"
                        >提交</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="layout-content box-shadow">
                <div class="accont-title clearfix">
                    <h3>为什么需要绑定店铺？</h3>
                </div>
                <ul class="layout-list">
                    <li>1、根据中国外汇管理等规定，跨境贸易相关外汇收支需要真实、合法的交易背景，因此及时雨Pay支付需要通过您绑定店铺从而收集您的店铺交易信息，以满足相关的法规要求。</li>
                    <li>2、您通过绑定店铺向及时雨Pay提供的所有信息，及时雨Pay将在您的授权范围内进行获取和使用，并承诺将严格按照相关法律法规、及时雨Pay的用户协议约定和隐私权政策，对您的信息进行保密。</li>
                </ul>
            </div>
        </section>
    </main>
</template>

<script>
import Clipboard from "clipboard";
import { mapState } from "vuex";
import { api_findDictionary } from "api/login.js";
import { api_addStore } from "api/portal.js";
import utils from "utils/utils.js";
import declare from "pages/dialog/declare";
import bindStore from "pages/dialog/bindStore";
export default {
    name: "apply",
    data() {
        return {
            ruleForm: {
                storeName: "",
                storeUrl: "",
                resource: "1",
                platform: "AMAZON",
                storeSite: "北美站",
                sellerId: "",
                authToken: "",
                agreement: []
            },
            rules: {
                storeName: [
                    {
                        required: true,
                        message: "请输入店铺名称",
                        trigger: "blur"
                    }
                ],
                storeUrl: [
                    {
                        required: true,
                        message: "请填写您的任意一款在售产品前台链接",
                        trigger: "blur"
                    }
                ],
                sellerId: [
                    {
                        required: true,
                        message: "请输入卖家编号Seller ID",
                        trigger: "blur"
                    }
                ],
                authToken: [
                    {
                        required: true,
                        message: "请输入MWS Auth Token",
                        trigger: "blur"
                    }
                ],
                agreement: [
                    {
                        type: "array",
                        required: true,
                        message: "请阅读服务协议并选中",
                        trigger: "change"
                    }
                ]
            },
            storeSiteList: [],
            browserIP: "",
            userShowInfo: {},
            sellerAuth: "1",
            innerVisibleDeclare: false,
            innerVisibleBindStore: false,
            subLoading: false
        };
    },
    computed: {
        ...mapState(["userInfo"])
    },
    components: {
        declare,
        bindStore
    },
    methods: {
        showDeclare() {
            this.innerVisibleDeclare = true;
        },
        closeDeclare() {
            this.innerVisibleDeclare = false;
        },
        showBindStore() {
            this.innerVisibleBindStore = true;
        },
        closeBindStore() {
            this.innerVisibleBindStore = false;
        },
        hasShop(val) {
            if (val == 0) {
                this.ruleForm.sellerId = "";
                this.ruleForm.authToken = "";
                this.ruleForm.storeUrl = "";
            }
        },
        copy() {
            var clipboard = new Clipboard(".tag-read");
            clipboard.on("success", e => {
                this.$message.success("复制成功");
                // 释放内存
                clipboard.destroy();
            });
            clipboard.on("error", e => {
                // 不支持复制
                this.$message.error("该浏览器不支持自动复制");
                // 释放内存
                clipboard.destroy();
            });
        },
        submitForm(formName) {
            this.subLoading = true;
            this.$refs[formName].validate(valid => {
                if (valid) {
                    let addStoreData = {
                        data: {
                            storeName: this.ruleForm.storeName,
                            storeUrl: this.ruleForm.storeUrl,
                            storeHoldPersonName: this.userShowInfo
                                .certificationName,
                            storePlateform: this.ruleForm.platform,
                            storeTheSite:
                                this.ruleForm.storeSite == "北美站"
                                    ? "NORTH_AMERICA_SITE"
                                    : this.ruleForm.storeSite,
                            storeSituation: this.ruleForm.resource,
                            sellId: this.ruleForm.sellerId,
                            mwsAuthToken: this.ruleForm.authToken,
                            browserIP: this.browserIp || "114.55.171.170"
                        }
                    };

                    api_addStore(addStoreData)
                        .then(res => {
                            if (res.success) {
                                this.$router.push({
                                    path: "/account/store/detail",
                                    query: {
                                        id: res.data
                                    }
                                });
                                this.subLoading = false;
                            } else {
                                if (res.code == "-1005") {
                                    this.$message.error(
                                        "授权信息填写错误，请重新填写！"
                                    );
                                } else if (res.code == "-1008") {
                                    this.$message.error(
                                        "店铺已授权，请勿重复提交"
                                    );
                                } else {
                                    this.$message.error(res.msg);
                                }

                                this.subLoading = false;
                            }
                        })
                        .catch(err => {});
                } else {
                    this.subLoading = false;
                    return false;
                }
            });
        }
    },
    created() {
        this.userShowInfo = this.userInfo.loginInfo;
        let storeSite = {
            params: {
                type: "STORE_SITE"
            }
        };
        api_findDictionary(storeSite)
            .then(res => {
                if (res.success) {
                    this.storeSiteList = res.data;
                } else {
                    this.$message.error(res.msg);
                }
            })
            .catch(err => {});

        if (
            this.userInfo.loginInfo.certificationStatus !== "SUCCESS" &&
            this.userInfo.loginInfo.certificationStatus !== "SUBMIT_WATING"
        ) {
            this.$router.push({
                path: "/account"
            });
        }
    }
};
</script>

<style lang="less" scoped>
@import "../../assets/styles/common.css";
.apply /deep/ .check-box {
    .el-checkbox {
        margin-right: 10px;
    }
    .el-form-item__error {
        margin-top: -10px;
    }
    p {
        display: inline-block;
        color: #747474;
        a {
            color: #3d86e9;
        }
    }
}
.apply /deep/ .el-input.is-disabled .el-input__inner {
    color: #333;
}
.apply /deep/ .el-button--primary {
    width: 330px;
}
.apply /deep/ .el-select {
    width: 330px;
}
.form-ruleForm {
    width: 330px;
    padding: 30px 0 18px 58px;
}
.platform /deep/ .el-radio-group {
    .el-radio {
        position: relative;
        float: left;
        width: 202px;
        height: 46px;
        border: 1px solid #e6e6e6;
        box-sizing: border-box;
        .el-radio__input {
            display: none;
        }
        .el-radio__label {
            display: block;
            width: 100%;
            height: 100%;
            padding-left: 0;
        }
    }
    width: 1000px;
}
.platform /deep/ .el-radio.is-checked {
    border: 1px solid #3d86e9;
    &::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        width: 20px;
        height: 20px;
        background: url(~assets/images/icon-platform-select.png) no-repeat;
    }
}
.get-seller-id {
    width: 964px;
    margin-bottom: 22px;
    padding: 14px 40px;
    background: #fcfcfc;
    box-sizing: border-box;
    & /deep/ .el-form-item {
        width: 330px;
    }
    p {
        line-height: 22px;
        margin-left: -30px;
        margin-bottom: 20px;
        padding-left: 32px;
        font-size: 14px;
        text-align: left;
        background: url(~assets/images/icon-notice.png) left 0 no-repeat;
        background-size: 20px 20px;
        a {
            color: #3d86e9;
        }
    }
    .developer {
        margin-bottom: 20px;
        height: 46px;
        line-height: 46px;
        border-radius: 4px;
        background: #e6e6e6;
        span {
            display: inline-block;
            text-align: left;
            font-size: 14px;
            &:nth-of-type(1) {
                width: 40%;
            }
            &:nth-of-type(2) {
                width: 30%;
            }
            &:nth-of-type(3) {
                width: 10%;
                font-size: 18px;
                color: #3d86e9;
                cursor: pointer;
            }
        }
    }
}
.no-store-notice {
    width: 964px;
    margin-bottom: 22px;
    padding: 14px 40px;
    border-radius: 4px;
    background: #fdf6eb;
    box-sizing: border-box;
    p {
        line-height: 22px;
        margin-left: -30px;
        padding-left: 32px;
        font-size: 14px;
        text-align: left;
        background: url(~assets/images/icon-notice.png) left 0 no-repeat;
        background-size: 20px 20px;
    }
}
.account-name {
    position: absolute;
    top: 0;
    left: 340px;
    width: 100px;
}
</style>
