<template>
    <!-- 统一认证组件 -->
    <div class="jianCom">
        <div v-if="isBuy !== '已订购' && pageData.remarks.isBuy !== 1 " class="buyBoxText">
            <div class="textBox">
                <div class="input">
                    <input type="text" v-model="loginForm.phone" placeholder="请输入联通手机号" />
                </div>
                <div class="input">
                    <input type="text" v-model="loginForm.vcode" v-on:input="checkVcode" placeholder="验证码"
                        maxlength="6" />
                    <span class="getcode" :class="{ code: 1, number: codeState.state }"
                        @click="getCode()">{{ codeState.state ? codeState.time + "s" : "获取验证码" }}</span>
                </div>
            </div>
            <div class="btn" :style="{
          'background-color': pageData.mainProduct.themeColor[0],
          'border-color':pageData.mainProduct.themeColor[1],
        }" @click="btnClick">
                {{ 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>
    import {
        getNewCode
    } from '../../../api'
    import {
    Dialog
    } from "vant";
    export default {
        data() {
            return {
                imgUrl: process.env.VUE_APP_IMGS_URL,
                productJson: [],
                checked: false,
                times: 0,
                loginForm: {
                    phone: "",
                    vcode: "",
                },
                codeState: {
                    state: false,
                    time: 60,
                    task: null,
                },
            }
        },
        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 {
                    let {
                        phone,
                        vcode
                    } = this.loginForm;
                    if (!/^1[23456789]\d{9}$/.test(phone)) {
                        return this.$toast("请输入正确手机号");
                    }
                    if (!vcode) {
                        return this.$toast("请输入验证码");
                    }
                    this.$emit("btnClick", this.loginForm);
                    this.loginForm = {}
                }
            },
            checkVcode() {
                if (this.loginForm.vcode.length > 6) {
                    this.loginForm.vcode = this.loginForm.vcode.slice(0, 6);
                }
            },
            getCode() {
                if (this.codeState.state) return;
                let {
                    phone
                } = this.loginForm;
                if (!/^1[23456789]\d{9}$/.test(phone)) {
                    return this.$toast("请输入正确手机号");
                }
                    let str = phone.slice(0,3)
                    let str2 =  phone.slice(0,4)
                    let number = this.$store.state.fictitious.split(',')
                    let isDialog = true
                    if(number !== ''){
                      number.forEach(element => {
                        if(element===str || element===str2){
                           isDialog = false
                        }
                      });
                    }
                    if(isDialog === false){
                        Dialog({
                          message: '您的号码为虚拟运营商号码，不支持办理此业务',
                          theme: 'round-button',
                          })
                      return false
                    }
                if (this.checked === false) {
                    return this.$toast.fail("请先勾选隐私声明");
                }
                let params = {
                    cpid: this.pageData.mainProduct.cpid,
                    spid: this.pageData.mainProduct.spid,
                    type: '',
                    userid: phone
                }
                getNewCode(params).then(res => {
                    if (res.code === 10000) {
                        this.$toast("验证码已发送");
                        this.codeState.state = true;
                        this.codeState.task = setInterval(() => {
                            if (this.codeState.time <= 0) {
                                clearInterval(this.codeState.task);
                                this.codeState.task = null;
                                this.codeState.state = false;
                                this.codeState.time = 60;
                            } else {
                                this.codeState.time--;
                            }
                        }, 1000);
                        this.$store.commit("setUser", {
                            userid: res.data,
                            phone: this.loginForm.phone,
                        });
                    }

                }, res => {
                    this.$toast(res.message);
                })
            }
        }

    }
</script>

<style lang="scss">
    .jianCom {
        @keyframes scale {
            from {
                transform: scale(1);
            }

            to {
                transform: scale(0.8);
            }
        }

        .buyBoxText {
            width: 690px;
            margin: 20px 30px;
            background-color: #fff;
            padding-bottom: 40px;

            .btn {
                margin-top: 60px;
                width: 690px;
                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;
            }

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

                .input {
                    height: 117px;
                    margin: 0 auto;
                    border-bottom: 2px solid #595959;
                    position: relative;

                    input {
                        margin: 0;
                        padding: 0;
                        border: none;
                        outline: none;
                        width: 100%;
                        font-size: 34px;
                        font-family: PingFang SC;
                        font-weight: 500;
                        color: #757575;
                        background-color: transparent;
                        position: absolute;
                        bottom: 22px;
                        left: 28px;
                    }

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

            .text {
                line-height: 50px;
                font-size: 26px;
                // font-weight: bold;
                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>
