<template>
  <div class="cancellation">
    <van-form>
        <van-cell-group>
            <van-field
                v-model="userInfo.mobileNo"
                name="手机号码"
                label="手机号码"
                left-icon="phone-o"
                clearable
                readonly
                placeholder="输入您的手机号码"
                :rules="[{ pattern, required: true, message: '请填写正确的手机号码' }]"
            >
            </van-field>
            <van-field
                v-model="value2"
                clearable
                label="验证码"
                left-icon="comment-o"
                placeholder="请输入短信验证码"
                type="digit"
            >
                <template #button>
                    <van-button v-if="active == 1" @click="change" round size="small" color="rgb(243, 101, 74)">发送验证码</van-button>
                    <van-button v-else round size="small">
                        <van-count-down :time="time" @finish="finish">
                            <template #default="timeData">
                                <span>{{ timeData.seconds }}s后可重发</span>
                            </template>
                        </van-count-down>
                    </van-button>
                </template>
            </van-field>
        </van-cell-group>
    </van-form>
    <div class="button">
        <van-button round  color="rgb(243, 101, 74)" size="large" @click="jump">注销账号</van-button>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { Field,Button,CountDown,CellGroup,Dialog,Form  } from 'vant';
import { sendVerificationCode } from '@/api/cancellation'
Vue.use(Field)
    .use(Button)
    .use(CountDown)
    .use(CellGroup)
    .use(Dialog)
    .use(Form);
export default {
    data() {
        return {
            userInfo: {},
            value2: "",
            time: "",
            active: 1,
            dataList1: [],
            pattern: /^(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[8-9])[0-9]{8}$/,
        };
    },
    methods: {
        change(){
            if(this.userInfo.mobileNo){
                this.active = 2
                this.time = 60000
                this.initData1()    
            }else{
               Dialog.alert({
                    title: '提示',
                    message: '请填写正确的手机号',
                }).then(() => {
                    // on close
                }); 
            }
        },
        jump(){
            if (this.userInfo.mobileNo && this.value2) {
                this.$router.push({
                    name: "CancellationConfirmlogout",
                    params :{
                        mobile:this.userInfo.mobileNo,
                        code:this.value2,
                        uid:this.userInfo.userId,
                    }
                })
            } else {
                Dialog.alert({
                    title: '提示',
                    message: '请填写正确的验证码',
                }).then(() => {
                    // on close
                });
            }
        },
        finish(){
            this.active = 1
        },
        // 验证码
        initData1(){
            sendVerificationCode({ mobile:this.userInfo.mobileNo }).then((res) => {
                this.dataList1 = res
                // console.log('11111',this.dataList1);
            })
        },
        getUserInfo(res) {
            sessionStorage.setItem("ZJCD-UserInfo", res);
            this.userInfo = JSON.parse(res);
        },
    },
    mounted() {
        window.getUserInfo = this.getUserInfo;
    },
    created() {
        if (window.android !== undefined) {
            const res = window.android.getUserInfo(); // 这是一个json字符串
            sessionStorage.setItem("ZJCD-UserInfo", res);
            this.userInfo = JSON.parse(res);
        } else if (window.webkit) {
            window.webkit && window.webkit.messageHandlers.getUserInfo.postMessage("getUserInfo");
        } else {
            this.$toast("请先登录镇合意app");
        }
        let res = sessionStorage.getItem("ZJCD-UserInfo");
        this.userInfo = JSON.parse(res);
        console.log(this.userInfo);
    },
}
</script>

<style lang="stylus" scoped>
    .cancellation{
        display flex;
        flex-direction column;
        .button{
            margin: 2rem 0.5rem 0 0.5rem;
        }
    }
</style>