<template>
    <div style="position:relative ">
        <img src="/picture/hhr/yrym-ruanyan-adv-bg.jpg" style="width: 100%;   float: right">
        <img src="/picture/hhr/kefu.png"  style="width: 10%;position:fixed ;right: 15px;top: 15px" @click="showPopup">
        <div style="height: 700px;"></div>
        <div style="font-size: 28px;text-align: center;background: white;position:fixed ;bottom: 0px;width: 100%" class="van-hairline--surround">
            <van-cell-group style="">
                <van-field v-model="value" placeholder="身份证/手机号/宽带账号"/>
            </van-cell-group>
            <van-button round block type="info" native-type="submit" @click="selectPackage">优惠查询</van-button>
        </div>


        <div v-show="kefushow">
            <van-popup v-model="kefushow"
                       style="width: 90%;height: 45%; display: flex; align-items: center;justify-content: center;">
                <div style="border: 1px solid #e2e2e2;width: 92%;height: 90%;position: fixed;display: flex; align-items: center;justify-content: center;">
                    <div style="font-size: 20px; color: black;text-align: center;position: fixed;top: 3px">您的专属客服</div>
                    <img src="/picture/hhr/service-qrcode.jpg" style="width:55%;">
                </div>
            </van-popup>
        </div>
        <div v-show="show">
            <van-popup v-model="show"  style="width: 70%;height: 13%; display: flex; align-items: center;justify-content: center;">
                <div style=" background-image: url('./picture/hhr/div-tips-dialog.png');
    background-repeat: no-repeat;
    background-size: 100%;
    width: 100%;
    height: 100%;font-size: 22px;padding-top: 10px;text-align: center;">
                    <span style="">一大波优惠正在赶来中！<br>    敬请期待！</span>
                </div>
            </van-popup>
        </div>
        <div v-show="duanxing" >
            <van-popup v-model="duanxing"
                       style="width: 80%;height: 30%; display: flex; align-items: center;justify-content: center;">
            <div>
                <div style="font-size: 20px; color: black;text-align: center;position: fixed;top: 3px;margin: 0px 0px 20px 0px;">{{yanzhengma}}</div>

                <div style="margin: 50px 0px 0px 0px;">
                    <van-field
                            center
                            clearable
                            placeholder="请输入短信验证码"
                            style="width: 100%;height: 30%;"
                    >
                        <van-button slot="button" size="small" type="info"
                                    @click.stop.prevent="getCode"
                        >{{codeMsg}}
                        </van-button>
                    </van-field>


                    <van-button round block type="info" native-type="submit">
                        确认
                    </van-button>
                </div>
            </div>

            </van-popup>

        </div>

    </div>

</template>

<script>
    import {selectPackage,sendVerificationCode} from "@/api/app/package"
    import Vue from 'vue';
    import {Field} from 'vant';

    export default {
        name: "packageUpgrade",
        data() {
            return {
                value: '',
                countdown: 0,// 倒计时秒数
                codeMsg: '获取验证码', // 按钮上的文字
                timer: null,// 定时器
                labelCol: {
                    xs: { span: 24 },
                    sm: { span: 5 },
                },
                wrapperCol: {
                    xs: { span: 24 },
                    sm: { span: 10 },
                },
                yanzhengma: '',
                kefushow: false,
                show: false,
                duanxing: false
            };
        },
        methods: {
            getCode() {
                let selectOrder = this.value;
                // 验证码60秒倒计时
                if (!this.timer) {
                    sendVerificationCode({selectOrder}).then(res => {
                        if (res.state == 'error'){
                            console.log()
                        }else {
                            console.log()
                        }
                    })
                    //初始化倒计时
                    this.countdown=60;
                    this.timer = setInterval(() => {
                        if (this.countdown > 0 && this.countdown <= 60) {
                            this.countdown--;
                            if (this.countdown !== 0) {
                                this.codeMsg = "重新发送(" + this.countdown + ")";
                            } else {
                                clearInterval(this.timer);
                                this.codeMsg = "获取验证码";
                                this.countdown = 0;
                                this.timer = null;
                            }
                        }
                    }, 1000)
                }
            },
            selectPackage() {
                this.kefushow=false;
                if (this.value == "") {
                    return;
                } else {
                    let selectOrder = this.value;
                    sendVerificationCode({selectOrder}).then(res => {
                        if (res.state == 'error'){
                            this.show=true;
                        }else {
                            this.duanxing = true;
                            this.yanzhengma=res.data
                            //初始化倒计时
                            this.countdown=60;
                            this.timer = setInterval(() => {
                                if (this.countdown > 0 && this.countdown <= 60) {
                                    this.countdown--;
                                    if (this.countdown !== 0) {
                                        this.codeMsg = "重新发送(" + this.countdown + ")";
                                    } else {
                                        clearInterval(this.timer);
                                        this.codeMsg = "获取验证码";
                                        this.countdown = 0;
                                        this.timer = null;
                                    }
                                }
                            }, 1000)
                        }
                    })
                }

            },
            showPopup() {
                if(this.kefushow == true){
                    this.kefushow = false
                }else {
                    this.kefushow = true
                }
            },
            duanxings(){

            },
        }
    }
</script>

<style scoped>

</style>
