<template>
    <div class="btnModal">
        <div class="inputBox">
            <input v-model="phone" class="input" type="text" @input="inpChange" maxlength="11" placeholder="请输入联通号码">
        </div>
        <div class="btnBox">
            <div class="btnText"
                :style="{'background-image': `linear-gradient(#fff,${pageData.mainProduct.themeColor[0]})`,color:pageData.mainProduct.themeColor[1]}"
                @click="btnClick">
                立即开通
            </div>
        </div>
    </div>
</template>

<script>
    import {
    Dialog
    } from "vant";
    export default {
        data() {
            return {
                phone: ""
            }
        },
        props: {
            pageData: Object
        },
        methods: {
            inpChange(e) {
                if (/^1[3456789]\d{9}$/.test(this.phone)) {
                    let str = this.phone.slice(0,3)
                    let str2 =  this.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
                    }
                    this.$emit('phoneNum', this.phone)
                    setTimeout(() => {
                        this.$emit('btnClick')
                        e.srcElement.blur()
                    }, 100)

                }
            },
            btnClick() {
                if (this.phone === '') {
                    this.$toast('请输入手机号')
                    return false
                }
                if (/^1[3456789]\d{9}$/.test(this.phone)) {
                    let str = this.phone.slice(0,3)
                    let str2 =  this.phone.slice(0,4)
                    if(str === '167' || str === '171' || str2 ==='1704' || str2 ==='1707' || str2 ==='1708'|| str2 ==='1709'){
                         Dialog({
                          message: '您的号码为虚拟运营商号码，不支持办理此业务',
                          theme: 'round-button',
                          })
                          return false
                    }
                    this.$emit('btnClick')
                    this.$emit('phoneNum', this.phone)
                } else {
                    this.$toast('手机号格式错误')
                }


            }
        }
    }
</script>

<style lang="scss">

</style>