<template>
    <main>
        <section class="banner"></section>
        <section class="content">
            <nav class="help-nav clearfix">
                <dl
                    v-for="(item, index) in navList"
                    :key="index"
                    :class="[navClass[index], {active:index==activeIndex}]"
                    @mouseover="changeClass(item)"
                    @mouseout="changeClass(item)"
                    @click="handleChangeIndex(index, item)"
                >
                    <dt></dt>
                    <dd>
                        <p :class="item.childShow ? 'slide-up' : ''" v-if="item.childShow">
                            <a href="javascript:;">{{ item.title }}</a>
                        </p>
                        <p v-else :class="item.childList ? 'slide-down' : ''">
                            <a href="javascript:;">{{ item.title }}</a>
                        </p>
                        <ul class="faq-option box-shadow" v-show="item.childShow">
                            <li
                                v-for="(childItem, childIndex) in item.childList"
                                :key="childIndex"
                                @click="handleChildClick(childItem)"
                            >
                                <a href="javascript:;">{{childItem.title}}</a>
                            </li>
                        </ul>
                    </dd>
                </dl>
            </nav>
        </section>
        <section>
            <div class="faq-box">
                <div class="faq-list">
                    <div v-for="(item) in faqFilterList" :key="item.id">
                        <div class="faq-title" @click="toggleFaq(item)">{{ item.title }}</div>
                        <div class="faq-content" v-show="item.faqIsShow" v-html="item.content"></div>
                    </div>
                </div>
            </div>
        </section>
    </main>
</template>

<script>
export default {
    name: "help",
    data() {
        return {
            activeIndex: 0,
            toggleClass2: "slide-down",
            toggleClass3: "slide-down",
            service: false,
            receipt: false,
            seller: false,
            navClass: [
                "faq",
                "safe",
                "service",
                "receipt",
                "withdraw",
                "seller"
            ],
            navList: [
                {
                    id: "0",
                    title: "常见问题"
                },
                {
                    id: "1",
                    title: "安全合规"
                },
                {
                    title: "账户服务",
                    childShow: false,
                    childList: [
                        {
                            id: "01",
                            title: "注册账户"
                        },
                        {
                            id: "02",
                            title: "实名认证"
                        },
                        {
                            id: "03",
                            title: "提现相关"
                        },
                        {
                            id: "04",
                            title: "修改手机号/邮箱"
                        }
                    ]
                },
                {
                    title: "平台收款",
                    childShow: false,
                    childList: [
                        {
                            id: "05",
                            title: "Amazon"
                        }
                        // {
                        //     id: "06",
                        //     title: "eBay& Wish"
                        // },
                        // {
                        //     id: "07",
                        //     title: "法国乐天"
                        // },
                        // {
                        //     id: "08",
                        //     title: "Mercado"
                        // }
                    ]
                },
                {
                    title: "卖家增值服务",
                    childShow: false,
                    childList: [
                        {
                            id: "09",
                            title: "VAT服务"
                        },
                        {
                            id: "10",
                            title: "供应商付款"
                        }
                    ]
                }
            ],
            faqList: [
                {
                    id: "0",
                    faqChildList: [
                        {
                            title: "注册企业账户和个人账户有什么区别？",
                            content:
                                "<p>支持提现账户不同：大陆个人用户支持提现至本人储蓄卡内，香港个人用户支持提现至香港个人储蓄卡或对私离岸账户；大陆企业用户支持提现至对公账户及法人账户（不支持证件类型为护照的法人提现到法人个人账户）；香港企业用户支持提现至香港对公账户和对公离岸账户。</p>",
                            faqIsShow: false
                        },
                        {
                            title: "注册账户需要准备哪些材料？",
                            content:
                                "<div><b style='color:#000;'>大陆个人用户：</b></div><div>①手机号码、电子邮箱；</div><div>②身份证正反面彩色影印件、本人手持身份证照片；</div><div>③本人银行借记卡；</div><div>&nbsp;</div><div><b style='color:#000;'>大陆企业用户：</b></div><div>大陆企业（仅支持三证合一证件，非三证合一证件无法注册提交，请联系当地工商局进行变更）：</div><div>①手机号码、电子邮箱；</div><div>②营业执照（三证合一企业或个体工商户）、法定代表人证照影印件；</div><div>③企业对公银行账户或法定代表人个人银行账户；</div><div>&nbsp;</div><div><b style='color:#000;'>香港个人用户：</b></div><div>①手机号码、电子邮箱；</div><div>②本人身份证件影印件，支持证件类型有护照影印件/香港永久居民身份证影印件+手持身份证件照片；</div><div>③本人香港银行储蓄卡或境内离岸账户；</div><div>&nbsp;</div><div><b style='color:#000;'>香港企业用户：</b></div><div>①手机号码、电子邮箱；</div><div>②企业注册证书影印件；</div><div>③企业商业登记证影印件；</div><div>④公司董事的身份证件影印件，支持证件类型有二代居民身份证/护照/港澳居民通行证/台湾居民通行证/香港永久性居民身份证均可；</div><div>以上证件要求清晰可见，支持数码拍照，影印件大小在5MB以内。</div>",
                            faqIsShow: false
                        },
                        {
                            title: "提现的实时汇率采用的是哪个银行的牌价？",
                            content:
                                "<p>1、人民币提现使用的实时汇率是中国银行的实时现汇买入价，您可至中国银行网站查询。<br>2、指定币种提现使用的实时汇率是由及时雨Pay的合作银行提供的实时汇率。</p>",
                            faqIsShow: false
                        },
                        {
                            title:
                                "我在亚马逊上新开店，无法提供卖家编号和授权怎么办？",
                            content:
                                "<p>若您申请境外收款账户时尚未开通亚马逊店铺，可在申请境外收款账号时点击“暂无产品售卖/暂无店铺”提前拿到收款账号，待店铺开始正常营运时再补充卖家编号和MWS授权令牌。</p>",
                            faqIsShow: false
                        },
                        {
                            title:
                                "企业账号实名认证后，营业执照过期/法人变更/注销是否有影响？",
                            content:
                                "<p>营业执照过期不影响平台款项入账，但是会影响提现，因此请在第一时间更新营业执照。<br>若法人变更，若涉及资金问题，请在转让前清空余留款项，分配店铺归属，避免产生纠纷。<br>若营业执照即将注销，请在注销前清空余留款项，并及时处理所绑定的店铺，营业执照注销后该账号将无法继续为您提供服务。</p>",
                            faqIsShow: false
                        }
                    ]
                },
                {
                    id: "1",
                    faqChildList: [
                        {
                            title: "提供资料给及时雨Pay安全吗？",
                            content:
                                "<p>及时雨Pay作为专业的第三方支付机构，我们处理资金的银行账户受中国人民银行监管，客户资料会受到严格的保密和保护，只能用于申请账号进行实名认证而不会用作其他商业用途。</p>",
                            faqIsShow: false
                        },
                        {
                            title: "及时雨Pay的安全合规性是怎样的？",
                            content:
                                "<p>及时雨Pay拥有美国、香港地区牌照的企业，为用户资金安全提供坚实保障。</p>",
                            faqIsShow: false
                        },
                        {
                            title: "为什么要提供店铺授权信息？",
                            content:
                                "<p>根据中国外汇管理相关规定，贸易相关外汇收支均需要真实、合法的交易背景，因此需要您提供店铺授权信息，以满足合规要求。若您不能提供相关信息，您将无法继续正常使用及时雨Pay所提供的服务。</p>",
                            faqIsShow: false
                        }
                    ]
                },
                {
                    id: "01",
                    faqChildList: [
                        {
                            title:
                                "我有多个店铺，是否需要申请多个及时雨Pay账户？",
                            content:
                                "<p>不用。及时雨Pay支持多店铺绑定，无需注册多个及时雨Pay账号。</p>",
                            faqIsShow: false
                        },
                        {
                            title:
                                "我可以使用同一套资料注册多个及时雨Pay账户吗？",
                            content:
                                "<p>不可以。一个手机号、邮箱、身份信息只能注册一个及时雨Pay账号。实名信息一旦上传将被认证，不可重新再上传第二套身份信息。</p>",
                            faqIsShow: false
                        }
                    ]
                },
                {
                    id: "02",
                    faqChildList: [
                        {
                            title: "实名认证人是否支持更换？",
                            content:
                                "<p>不支持。实名信息一旦上传将会被审核认定，无法更改。若需更改实名人，建议用另外的信息重新注册一个及时雨Pay账号，以新的信息进行实名认证。</p>",
                            faqIsShow: false
                        },
                        {
                            title:
                                "企业账号实名认证后，营业执照过期/法人变更/注销是否有影响？",
                            content:
                                "<p>营业执照过期不影响平台款项入账，但是会影响提现，因此请在第一时间更新营业执照。<br>若法人变更，若涉及资金问题，请在转让前清空余留款项，分配店铺归属，避免产生纠纷。<br>若营业执照即将注销，请在注销前清空余留款项，并及时处理所绑定的店铺，营业执照注销后该账号将无法继续为您提供服务。</p>",
                            faqIsShow: false
                        }
                    ]
                },
                {
                    id: "03",
                    faqChildList: [
                        {
                            title: "如何查询提现费率？",
                            content:
                                "<p>登录及时雨Pay账户，点击右上角账号中心---我的账号，即可查看自己当前费率。</p>",
                            faqIsShow: false
                        },
                        {
                            title: "从及时雨Pay提现到银行卡到账需要多久？",
                            content:
                                "<div>提现到个人人民币账户：一般情况下，银行工作日18:00以前 发起的提现申请 可当天到账。</div><div>提现到对公人民币账户：一般情况下，银行工作日15:30以前 发起的对公账户提现申请 可当天到账；银行工作日15:30以后 发起的提现申请 下个工作日到账。</div><div>注：第一次提现到对公账户需要开通道查询 收付汇名录登记情况，需要3-5个工作日，因此 首次提现 需要久一点。</div><div>&nbsp;</div><div>提现到香港美金账户：银行工作日16:00以前 发起的提现申请 可当天到账；银行工作日16:00以后 发起的提现申请 下个工作日到账。</div><div>提现到大陆美金账户：银行工作日16:00以前 发起的提现申请 可当天到账；银行工作日16:00以后 发起的提现申请 下个工作日到账。</div><div>提现到日币/英镑/新加坡币账户：1-3个工作日到账</div><div>提现到香港/大陆欧元账户：在该打款移到香港之前，1-3个工作日到账，移到香港之后，到账时效和美金原币种提现到账时效一致</div>",
                            faqIsShow: false
                        },
                        {
                            title: "提现的实时汇率是如何确定的？",
                            content:
                                "提现汇率参考的是中国银行（香港）的实时现汇买入价。",
                            faqIsShow: false
                        }
                    ]
                },
                {
                    id: "04",
                    faqChildList: [
                        {
                            title: "如何修改绑定邮箱？",
                            content:
                                "<p>登录及时雨Pay，点击右上角的账号中心---我的账号---点击“修改邮箱”，获取验证码，提交更改即可。</p>",
                            faqIsShow: false
                        },
                        {
                            title: "如何修改绑定手机号？",
                            content:
                                "<p>登录及时雨Pay，点击右上角的账号中心---我的账号---点击“更换手机”，验证方式选择手机/邮箱，获取验证码，提交更改即可。</p>",
                            faqIsShow: false
                        }
                    ]
                },
                {
                    id: "05",
                    faqChildList: [
                        {
                            title: "Amazon款项未能正常入账的常见原因是什么？",
                            content:
                                "<p>请查看您的店铺是否已提供卖家编号和授权信息，若已经授权，请及时联系在线客服。</p>",
                            faqIsShow: false
                        },
                        {
                            title: "亚马逊打款后，需要多久到及时雨Pay？",
                            content:
                                "<p>亚马逊结算款在出账后，大约需要3-5个工作日入账到及时雨Pay。款项到账后我们将会第一时间邮件通知您。</p>",
                            faqIsShow: false
                        },
                        {
                            title:
                                "我的亚马逊店铺正在注册中，无法提供卖家编号和授权怎么办？",
                            content:
                                "<p>在申请收款服务时，账户用途请选择“用于创建新的亚马逊店铺”，提前拿到收款账号，待店铺开始正常营运时再补充店铺授权信息。</p>",
                            faqIsShow: false
                        },
                        {
                            title: "如何进行店铺授权？",
                            content:
                                "<div>及时雨Pay目前仅支持手动授权。</div><div>手动授权可打开以下链接获取操作指引：<a href='https://www.jishiyupay.com/guide/getMWS' target='_blank' style='color:#3d86e9;'>https://www.jishiyupay.com/guide/getMWS</a></div>",
                            faqIsShow: false
                        }
                    ]
                },
                {
                    id: "06",
                    faqChildList: [
                        {
                            title: "提供资料给及时雨Pay安全吗？06",
                            content: "",
                            faqIsShow: false
                        }
                    ]
                },
                {
                    id: "07",
                    faqChildList: [
                        {
                            title: "提供资料给及时雨Pay安全吗？07",
                            content: "",
                            faqIsShow: false
                        }
                    ]
                },
                {
                    id: "08",
                    faqChildList: [
                        {
                            title: "提供资料给及时雨Pay安全吗？08",
                            content: "",
                            faqIsShow: false
                        }
                    ]
                },
                {
                    id: "09",
                    faqChildList: [
                        {
                            title: "筹备中，即将开通",
                            content: "筹备中，即将开通",
                            faqIsShow: false
                        }
                    ]
                },
                {
                    id: "10",
                    faqChildList: [
                        {
                            title: "筹备中，即将开通",
                            content: "筹备中，即将开通",
                            faqIsShow: false
                        }
                    ]
                }
            ],
            faqFilterList: []
        };
    },
    methods: {
        changeClass(item) {
            if (item.childList) {
                item.childShow = !item.childShow;
            }
        },
        toggleFaq(item) {
            item.faqIsShow = !item.faqIsShow;
        },
        handleChangeIndex(index, item) {
            this.activeIndex = index;
            if (item.id) {
                this.faqList.filter(res => {
                    if (item.id == res.id) {
                        this.faqFilterList = res.faqChildList;
                    }
                });
            }
        },
        handleChildClick(item) {
            if (item.id) {
                this.faqList.filter(res => {
                    if (item.id == res.id) {
                        this.faqFilterList = res.faqChildList;
                    }
                });
            }
        }
    },
    created() {
        this.faqFilterList = this.faqList[0].faqChildList;
    }
};
</script>

<style lang="less" scoped>
@import "../../assets/styles/common.css";
section {
    width: 100%;
}
.banner {
    height: 480px;
    background: url(~assets/images/bg-help.jpg) 50% 0 no-repeat;
}
.content {
    background: #f7f7f7;
}
.help-nav {
    width: 1080px;
    margin: 0 auto;
    padding: 30px 0 0;
    dl {
        float: left;
        width: 20%;
        padding-bottom: 58px;
        cursor: pointer;
        dt {
            width: 132px;
            height: 132px;
            margin: 0 auto;
        }
        dd {
            position: relative;
            color: #333;
            p {
                display: inline-block;
                position: relative;
                &.slide-down::before {
                    content: "";
                    display: block;
                    position: absolute;
                    top: 4px;
                    right: -22px;
                    width: 17px;
                    height: 10px;
                    background: url(~assets/images/icon-arr.png) no-repeat;
                }
                &.slide-up::before {
                    content: "";
                    display: block;
                    position: absolute;
                    top: 4px;
                    right: -22px;
                    width: 17px;
                    height: 10px;
                    background: url(~assets/images/icon-arr2.png) no-repeat;
                }
            }
            .faq-option {
                position: absolute;
                top: 30px;
                width: 100%;
                line-height: 30px;
                padding: 20px 10px;
                box-sizing: border-box;
                background: #fff;
            }
        }
        &:hover {
            p {
                a {
                    color: #3d86e9;
                }
            }
        }
        &.faq {
            background: url(~assets/images/icon-help.png) no-repeat;
            background-position: 42px 40px;
            &:hover {
                background-position: 42px -178px;
            }
            &.active {
                background-position: 42px -178px;
                p {
                    a {
                        color: #3d86e9;
                    }
                }
            }
        }
        &.safe {
            background: url(~assets/images/icon-help.png) no-repeat;
            background-position: -138px 40px;
            &:hover {
                background-position: -138px -178px;
            }
            &.active {
                background-position: -138px -178px;
                p {
                    a {
                        color: #3d86e9;
                    }
                }
            }
        }
        &.service {
            background: url(~assets/images/icon-help.png) no-repeat;
            background-position: -318px 40px;
            &:hover {
                background-position: -318px -178px;
            }
            &.active {
                background-position: -318px -178px;
                p {
                    a {
                        color: #3d86e9;
                    }
                }
            }
        }
        &.receipt {
            background: url(~assets/images/icon-help.png) no-repeat;
            background-position: -498px 40px;
            &:hover {
                background-position: -498px -178px;
            }
            &.active {
                background-position: -498px -178px;
                p {
                    a {
                        color: #3d86e9;
                    }
                }
            }
        }
        &.withdraw {
            background: url(~assets/images/icon-help.png) no-repeat;
            background-position: -678px 40px;
            &:hover {
                background-position: -678px -178px;
            }
            &.active {
                background-position: -678px -178px;
                p {
                    a {
                        color: #3d86e9;
                    }
                }
            }
        }
        &.seller {
            background: url(~assets/images/icon-help.png) no-repeat;
            background-position: -876px 40px;
            &:hover {
                background-position: -876px -178px;
            }
            &.active {
                background-position: -876px -178px;
                p {
                    a {
                        color: #3d86e9;
                    }
                }
            }
        }
    }
}
.faq-box {
    width: 1080px;
    margin: 0 auto;
    .faq-list {
        padding: 20px 0 40px;
        .faq-title {
            margin-top: 30px;
            padding-left: 20px;
            text-align: left;
            border-left: 4px solid #3d86e9;
            color: #333;
            cursor: pointer;
            &:hover {
                color: #3d86e9;
            }
        }
        .faq-content {
            margin-left: 20px;
            margin-top: 28px;
            padding: 20px;
            line-height: 24px;
            text-align: left;
            font-size: 16px;
            background: #f7f7f7;
            color: #666;
        }
    }
}
.faq-content /deep/ div {
    margin-bottom: 20px;
}
</style>
