<template>
    <van-action-sheet
        @close="close"
        :lazy-render="false"
        :overlay-style="{ zIndex: 18 }"
        class="help-box"
        v-model:show="show"
        title="帮助"
    >
        <div class="container" ref="container">
            <van-tabs v-model:active="active" @click="changeTab" v-show="scrollTop > 10">
                <van-tab title="特别提醒" name="node1"> </van-tab>
                <van-tab title="竞拍说明" name="node2"> </van-tab>
                <van-tab title="竞拍告知" name="node3"> </van-tab>
                <van-tab title="竞拍公告" name="node4"> </van-tab>
            </van-tabs>
            <h3 ref="node1">一、特别提醒</h3>
            <h4>1.温馨提示</h4>
            <p>
                华储艺术品中心（深圳）有限公司举办的拍卖活动均按照本规则进行，参加拍卖活动的相关方务必仔细阅读并予以遵守。
            </p>
            <h4>2.特别声明</h4>
            <p>华储艺术品中心（深圳）有限公司特别声明不能保证拍品的真伪、品质及价值，对拍品不承担瑕疵担保责任。</p>
            <h3 ref="node2">二、竞拍说明（玩法说明）</h3>
            <h4>1.什么是增价拍？</h4>
            <p>
                增加拍是指由送拍方设置最低成交价和加价幅度，由竞买人按照规定的加价幅度加价，在规定的时间内由最高出价者竞得。
            </p>
            <h4>增价拍规则</h4>
            <p><span>1</span>首次出价不得低于最低成交价。</p>
            <p><span>2</span>出价最高者领先，价低者竞拍记录出具，出局者可以再次出价。</p>
            <p><span>3</span>再次出价，须至少增加一个加价幅度出价。</p>
            <h4>2.什么是一口价？</h4>
            <p>一口价是送拍方以固定价格出售商品，没有讨价还价的余地，最先付款支付成功的竞买人竞得。</p>
            <h4>3.保证金的缴纳</h4>

            <p>
                保证金是买家需要预先缴纳一定金额的资金，作为最终支付竞得拍品的拍品款和相关费用的保证。如果竞拍成功，已缴纳的保证金将自动抵扣相应金额的拍品款。如果买家为竞得拍品，系统将自动将保证金（无息）退回到买家的账户中。
            </p>
            <h4>4.保证金的返还</h4>
            <p><span>1</span>买家未成功竞得拍品：例如在竞拍过程中始终未出价、在竞拍过程中放弃加价等等情况；</p>
            <p><span>2</span>买家竞拍成功后，平台自动关闭交易，或未履约发货及其他原因导致交易未完成的；</p>
            <p>
                <span>3</span
                >竞拍结束后，系统一般会在1-15个工作日内将款项退还到支付账号中，如您缴纳的竞拍保证金符合退换条件，但是系统未予自动退还，您可以联系本公司客服。
            </p>
            <h4>5.保证金的扣除</h4>
            <p>买家竞拍成功后，如果未按规定时间支付剩余货款，保证金将被扣除。</p>
            <h4>6.保证金抵拍退款</h4>
            <p>买家竞拍成功后 买家需在规定时间内缴纳剩余尾款，订单完成后之后，保证金原路退回至买家支付账户。</p>
            <h4>7.关于退换货</h4>
            <p>由于拍品的特殊性质，因此不提供退换货服务，请您务必充分评估并谨慎出价。</p>
            <h3 ref="node3">三、竞拍告知</h3>
            <h4>1.发货时间</h4>
            <p>数字艺术品在拍卖付款成功后1个工作日内将移至您的账户。</p>
            <p>
                实物商品正常订单付款后一般72小时发货。节假日订单顺延至工作日统一发货。送拍方的仓库可能分布在全国各地，因此一旦出现疫情封控或其他特殊情况需要延后发货的，送拍方将直接联系您沟通具体情况。
            </p>
            <h4>2.物流服务</h4>
            <p>所有实物拍品一般默认快递发货。</p>
            <h4>3.关于运费</h4>
            <p>
                中国大陆地区一般提供包邮服务，不提供的会在详情页注明。
                国际及港澳台快递费、包装费用均由买受人支付相应费用。
            </p>
            <h4>4.运费保险</h4>
            <p>
                如拍品物流过程中出现问题，快递公司默认保丢不保损，未选择保价服务的商品，如在运输途中出现破损、缺失、丢失等异常情况，买家将无法享受快递公司的理赔服务。买家接受和认可平台不对运输过程中的任何损失或丢失情况负责任。为避免运输途中出现缺失与损坏，买受人可根据拍品价值及需求提前联系官方咨询保价服务。
            </p>
            <h4>5.开具发票</h4>
            <p>
                如买家需开具发票，发票中的购买方名称必须与本人名称一致，且须于结清拍品款的当月月底前联系客服办理增值税普通发票开具事宜。逾期恕不办理，请买家务必正确提供开票信息。
            </p>
            <h3 ref="node4">四、竞拍公告</h3>
            <p>
                1.凡参与一口价购买或增价拍的竞买人，请您先了解本（公告）规则，您一旦参与购买或竞价即视为您已经同意本现则。
            </p>
            <p>
                2.本场竞拍活动是数字艺术品版权（拍品）的拍卖活动，本拍品已经过蚂蚁链技术的加密程序，您竞拍成功后可前往“RAEX绿洲宇宙”手机APP查看、验证和下载。
            </p>
            <p>
                3.本拍品数量为【1】件，作品拍卖展示时，频道内会显著、清晰标准拍品的详细信息，所有拍品的相关内容和版权均由送拍方自行承担责任。
            </p>
            <p>
                4.本拍品的介绍（包括但不限于图片、文字、视频等）及拍品资质文件（包括但不限于来源证明、鉴定证书等），所有拍品的相关内容和版权均由送拍方自行编辑上传并承担责任。
            </p>
            <p>
                5.本拍品由送拍方提供，您将独立承担参与本次拍卖的相关风险，并享有相应权利。如因送拍方或者拍品原创作者发布危害国家利益、违反社会道德、公序良俗及其他可能造成严重负面舆论的言论或行为，导致数字艺术品版权被屏蔽或者限制使用的，您应当自行与送拍方沟通解决。
            </p>
            <p>6.“蚂蚁链”仅提供区块链技术服务，不参与作品拍卖的具体环节。 7送拍方应保证本作品版权的合法性和唯一性。</p>
            <p>
                8.为防止恶意竞拍扰乱市场秩序的行为，在您参加竞拍活动前，系统需要冻结一定金额的保证金。在竞拍结束后如未成功则自动解冻，无息返还至原支付账户。竞拍成功的用户竞拍结束后72小时内未支付尾款的，保证金将作为违约金不予返还。
            </p>
            <p>9.每个拍品每个用户仅限参与一次，名额不可转让、折现、出售。</p>
            <p>
                10.考虑到本次拍卖活动中的拍品具有区块链上唯一性的特征，同时鉴于参拍前已向您充分说明拍卖特性，因此拍品不提供退换货服务，请您务必充分评估并谨慎出价。
            </p>
            <p>
                11.买家理解并同意，鉴于网络服务的特殊性，我们对本服务持续提供可能受到多重因素影响，如出现技术升级、网路故障、经营策略调整、配合国家重大技术、法规政策变化，平台可能随时终止、中断提供服务或变更服务形式、规格或其他方面而无须承担责任。
            </p>
            <p>12.如您想要通过竞拍方式购买数字艺术品，应当满足以下条件：</p>
            <p><span>1</span>您已满18周岁未满60周岁，并具有中华人民共和国国籍。</p>
            <p><span>2</span>您已通过实名制认证。</p>
            <p>
                您仅代表您个人而不属于任何组织或企业，您理解及确认我们有权依据国家法律法规、监管政策、活动规则或业务需要对上述条件进行补充或修改，您一旦参拍并购买商品，即表示您承诺符合以上条件并受到本协议及活动细则约束。
            </p>
        </div>
    </van-action-sheet>
</template>

<script>
import { ref, watch } from 'vue';
import { useScrollParent, useEventListener, useToggle } from '@vant/use';
export default {
    setup() {
        const container = ref();
        const node1 = ref();
        const node2 = ref();
        const node3 = ref();
        const node4 = ref();
        const scrollParent = useScrollParent(container);
        const active = ref('');
        const [state, toggle] = useToggle();
        const scrollTop = ref(0);

        useEventListener(
            'scroll',
            e => {
                scrollTop.value = container.value.parentNode.scrollTop;
                if (!state.value) {
                    if (scrollTop.value > node4.value.offsetTop - 80) {
                        active.value = 'node4';
                    } else if (scrollTop.value > node3.value.offsetTop - 80) {
                        active.value = 'node3';
                    } else if (scrollTop.value > node2.value.offsetTop - 80) {
                        active.value = 'node2';
                    } else {
                        active.value = 'node1';
                    }
                }
            },
            { target: scrollParent }
        );

        let time = null;
        const changeTab = options => {
            if (time) {
                clearTimeout(time);
                time = null;
            }
            toggle(true);
            let scrollTop = 0;
            if (options === 'node4') {
                scrollTop = node4.value.offsetTop - 50;
            } else if (options === 'node3') {
                scrollTop = node3.value.offsetTop - 50;
            } else if (options === 'node2') {
                scrollTop = node2.value.offsetTop - 50;
            } else {
                scrollTop = 0;
            }

            container.value.parentNode.scroll({
                top: scrollTop,
                behavior: 'smooth'
            });

            time = setTimeout(() => {
                toggle(false);
            }, 1500);
        };

        return { container, node1, node2, node3, node4, active, changeTab, scrollTop };
    },
    data() {
        return {
            show: false
        };
    },
    methods: {
        close() {
            this.$emit('changePopup');
        }
    }
};
</script>

<style lang="less" scoped>
.container {
    padding: 16px;
    position: relative;

    .van-tabs {
        position: sticky;
        top: 0;
        z-index: 20;
        /deep/.van-tabs__nav {
            justify-content: space-between;
        }
    }
}

h3 {
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: #000000;
    line-height: 22px;
    margin: 16px 0 0;
}
h4 {
    font-size: 14px;
    color: #000000;
    line-height: 20px;
    margin: 12px 0 0;
}
p {
    font-size: 14px;
    color: #939599;
    line-height: 22px;
    margin: 5px 0 0;
}
p + h3 {
    margin: 24px 0 0;
}
h3 + p {
    margin: 12px 0 0;
}
p + p {
    margin: 12px 0 0;
}

p {
    span {
        font-size: 12px;
        font-weight: bold;
        color: #ffffff;
        line-height: 16px;
        width: 16px;
        height: 16px;
        display: inline-flex;
        background-color: #939599;
        text-align: center;
        border-radius: 16px;
        align-items: center;
        justify-content: center;
        margin-right: 6px;
    }
}

/deep/.van-tab {
    margin-right: 0;
    flex-grow: 0 !important;
}
</style>
<style lang="less">
.help-box {
    .fixedBottom(59px);
    z-index: 19 !important;
    height: 50vh;
}
</style>
