<template>
    <!-- 统一认证组件 -->
    <div class="tongCom">
        <div class="buyBox" v-if="
        pageData.remarks.isBuy === '1' && isBuy !== '已订购' && pageData.remarks.attestation ===0
      ">
            <div class="btn" @click="btnClick" :style="{
          'background-color': pageData.mainProduct.themeColor[0],
          'border-color': pageData.mainProduct.themeColor[1],
        }">
                {{ pageData.remarks.btnText ? pageData.remarks.btnText : "点我领取" }}
            </div>
            <div class="privacyBox">
                <van-checkbox v-model="checked" checked-color="#fc8940">
                    <p style="margin: 0; padding: 0">
                        我已阅读并同意
                    </p>
                </van-checkbox>
                <span class="span" style="color: #fc8940" @click="$emit('hideClick')">《隐私声明》</span>
                <span class="span" style="color: #fc8940" @click="$emit('ruleClick')">《产品说明》</span>
            </div>
            <div class="text"
                :style="productJson.length>0 && productJson[0].rushC.e!==''?{'color':`${productJson[0].rushC.e}`}:{'color':'#000'}">
                <span
                    :style="productJson.length>0 && productJson[0].rushC.e!==''?{'color':`${productJson[0].rushC.s}`}:{'color':'#ea1313'}">{{ times }}</span>{{pageData.remarks.orderText!=='' && pageData.remarks.orderText?pageData.remarks.orderText:'用户已抢购成功'}}
            </div>
            <div class="tips">
                {{pageData.remarks.privacyText}}
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                imgUrl: process.env.VUE_APP_IMGS_URL,
                productJson: [],
                checked: false,
                times: 0,
                showAgreeMent: false
            }
        },
        props: {
            pageData: Object,
            isBuy: String
        },
        created() {
            if (this.pageData.mainProduct.cacheSeatOne && this.pageData.mainProduct.cacheSeatOne!==null) {
                this.productJson = this.pageData.mainProduct.cacheSeatOne
            }
            if (this.pageData.remarks.privacy && this.pageData.remarks.privacy !== '' && this.pageData.remarks
                .privacy !==
                null) {
                if (this.pageData.remarks.privacy === '1') {
                    this.checked = true
                }
            }
            let start = this.pageData.remarks.orderNum && this.pageData.remarks.orderNum !== '' ? Number(this.pageData
                .remarks.orderNum) : 0
            let add = this.pageData.remarks.orderAdd && this.pageData.remarks.orderAdd !== '' ? Number(this.pageData
                .remarks.orderAdd) : 1
            let now = new Date().getTime();
            let times = (now - 1600476800000) / 180000;
            this.times = String(Math.ceil(times * add) + start)
        },
        methods: {
            btnClick() {
                if (this.checked === false) {
                    this.$toast.fail("请先勾选隐私声明");
                } else {
                    this.$emit("btnClick");
                }
            }
        }

    }
</script>

<style lang="scss">
    .tongCom {

        // 产品配图样式
        .matchBanner {
            margin: 0 auto;
            margin-top: -8px;
            width: 690px;
            padding: 70px 35px 90px 35px;
            box-sizing: border-box;
            border-radius: 20px;
            border-width: 1px;
            border-style: solid;

            .matchImage {
                width: 100%;
                height: 134px;
                background-size: 100%;
                background-repeat: no-repeat;
            }

            .textBox {
                // width: 750px;
                // padding: 0 50px;
                box-sizing: border-box;

                .input {
                    width: 100%;
                    height: 80px;
                    background: #FFFFFF;
                    border-radius: 10px;
                    margin-top: 25px;
                    opacity: 0.5;
                    display: flex;
                    flex-direction: row;
                    padding: 0 15px;
                    box-sizing: border-box;
                    position: relative;

                    input {
                        margin: 0;
                        padding: 0;
                        border: none;
                        outline: none;
                        width: 70%;
                        height: 100%;
                        line-height: 80px;
                        font-size: 34px;
                        font-family: PingFang SC;
                        font-weight: 500;
                        color: #000;
                    }

                    .getcode {
                        font-size: 34px;
                        font-family: PingFang SC;
                        font-weight: bold;
                        color: #0D0D0D;
                        position: absolute;
                        right: 20px;
                        bottom: 24px;
                    }
                }
            }
        }

        @keyframes scale {
            from {
                transform: scale(1);
            }

            to {
                transform: scale(0.8);
            }
        }

        .buyBox {
            margin-top: -48px;
            padding: 0 25px;
            position: relative;
            z-index: 3;

            .btn {
                width: 700px;
                height: 100px;
                border-radius: 50px;
                line-height: 100px;
                font-size: 40px;
                font-weight: bold;
                border-style: solid;
                border-width: 4px;
                color: #ffffff;
                text-align: center;
                animation-name: scale;
                animation-duration: 0.6s;
                animation-timing-function: linear;
                animation-iteration-count: infinite;
                animation-direction: alternate-reverse;
            }

            .text {
                line-height: 50px;
                font-size: 26px;
                color: #0d0d0d;
                text-align: center;

                span {
                    color: #ea1313;
                    font-weight: bold
                }
            }

            .tips {
                font-size: 20px;
                font-family: PingFang SC;
                font-weight: 400;
                opacity: 0.8;
                text-align: center;
                transform: scale(0.85, 0.85);
                width: 100%;
                margin-left: -10%;
                color: #707070;
                line-height: 40px;
                padding: 18px 10%
            }
        }
    }
</style>
