<template>
    <div class="container">
        <div class="title">
            验证码已发送至
        </div>

        <div class="send">
            <div class="val" @click="back">{{phone}}</div>
            <div class="ps" @click="sendCode">{{isSend?'('+num+'秒)':'发送验证码'}}</div>
        </div>

        <div class="input">
            <img src="@/assets/list_icon_shouji.png" class="icon" alt="">
            <input type="number" @input="code=code.slice(0,6)" @focus="onInput=true" @blur="onInput=false" v-model="code" placeholder="输入短信验证码">
            <img src="@/assets/list_icon_del.png" v-if="onInput&&code" @click="code=''" class="del" alt="">
        </div>
        <div class="btn">
            <gm-button :type='canNext?"primary":"dark"' @click="click">{{bindType?'绑定':'注册/登录'}}</gm-button>
        </div>

    </div>
</template>
<script>
import GmButton from '@/components/Button'
export default {
    data() {
        return {
            code: '',
            onInput: false,
            phone: '',
            num: 61,
            isSend: false,
            realCode: '',
            bindType: false
        }
    },
    created() {
        if (this.$route.query.phone) {
            this.phone = this.$route.query.phone
        }
        if (this.$route.query.bindType) {
            this.bindType = true
        }
        this.sendCode()
    },
    computed: {
        canNext() {
            var reslut = false
            if (this.realCode && this.code) {
                reslut = true
            }
            return reslut
        },

    },
    methods: {
        back() {
            this.$router.replace({
                name: 'login',
            })
        },
        click() {

            if (this.canNext) {

                this.login().then(() => {
                    if (window.history.length <= 1) {
                        this.$router.replace({
                            name: 'home',
                            query: {},
                            params: {
                                isNext: 1
                            }
                        })
                    } else {
                        this.$router.go(-1)
                    }
                    // this.$router.replace({
                    //     name: 'home',
                    //     params: {
                    //         isNext: 1
                    //     }
                    // })
                })

            }

        },
        login() {

            return new Promise((resolve, reject) => {
                if (this.bindType) {
                    this.checkCode().then((value) => {
                        console.log(value)
                        if (value) {
                            this.updateUser('phone', this.phone)
                            resolve()
                        }
                        else {
                            this.$modal.info({ msg: "验证码错误", duration: 1500 })
                        }
                    })
                }
                else {
                    this.$store.commit('updateLoading', true)
                    this.$http.post({
                        url: '/userInfo/loginSms',
                        data: {
                            phone: this.phone,
                            code: this.code,
                            sessionId: this.realCode
                        }
                    }).then(res => {
                        this.$store.commit('updateLoading', false)
                        if (res.success) {
                            this.$modal.success({ msg: '登录/注册成功', duration: 1500 })
                            resolve()
                        } else {
                            this.$modal.info({ msg: res.error, duration: 1500 })
                        }
                    });
                }

            })

        },
        checkUsePhone() {
            this.$store.commit('updateLoading', true)
            return new Promise((resolve, reject) => {
                this.$http.get({
                    url: '/userInfo/getOne',
                    data: {
                        phone: this.phone
                    }
                }).then(res => {
                    this.$store.commit('updateLoading', false)
                    if (res.success) {
                        console.log(res.data)
                        if (res.data) {
                            resolve(true)
                        }
                        else {
                            resolve(false)
                        }
                        // resolve(true)
                    } else {
                        resolve(false)
                        // resolve(false)
                    }
                });
            })
        },
        checkCode() {
            this.$store.commit('updateLoading', true)
            return new Promise((resolve, reject) => {
                this.$http.get({
                    url: '/rong/verifyCode',
                    data: {
                        sessionId: this.realCode,
                        code: this.code
                    }
                }).then(res => {
                    this.$store.commit('updateLoading', false)
                    if (res.success) {
                        resolve(true)
                    } else {
                        resolve(false)
                    }
                });
            })
        },
        sendCode() {
            if (!this.isSend) {
                // this.realCode = '123456'

                this.getSend().then(() => {

                    this.isSend = true
                    this.getTime()
                })

            }

        },
        getSend() {
            this.$store.commit('updateLoading', true)
            return new Promise((resolve, reject) => {
                this.$http.get({
                    url: '/rong/sendCode',
                    data: {
                        phone: this.phone
                    }
                }).then(res => {
                    this.$store.commit('updateLoading', false)
                    if (res.success) {
                        this.$modal.success({ msg: '发送成功', duration: 1500 })
                        this.realCode = res.data
                        resolve()
                    } else {
                        this.$modal.info({ msg: res.error, duration: 1500 })
                    }
                });
            })

        },
        getTime() {
            if (this.num > 0) {
                this.num--
                setTimeout(() => {
                    this.getTime()
                }, 1000);
            }
            else {
                this.num = 61
                this.isSend = false
            }
        }
    },
    components: { GmButton }
}
</script>
<style lang="less" scoped>
.container {
    background: rgba(242, 242, 242, 1);
    padding: 0 0.3rem;
}
.logo {
    width: 3.6rem;
    height: 1.7rem;
    background: rgba(255, 255, 255, 1);
    border-radius: 0.4rem;
    margin: 0.4rem 0 0;
    text-align: center;
    line-height: 1.7rem;
}

.title {
    font-size: 0.56rem;
    font-weight: bold;
    color: rgba(0, 0, 0, 1);
    line-height: 0.56rem;
    margin-top: 0.6rem;
}

.input {
    min-height: 0.88rem;
    height: 0.88rem;
    margin-top: 0.36rem;
    display: flex;
    align-items: center;
    border-bottom: 0.02rem solid #e1e4e6;
    .icon {
        width: 0.4rem;
        height: 0.4rem;
    }

    input {
        min-width: 0;
        flex-grow: 1;
        align-self: stretch;
        margin-left: 0.24rem;
        outline: none;
        border: 0;
        background-color: transparent;
        font-size: 0.3rem;
        font-weight: bold;
        color: rgba(0, 0, 0, 1);

        &::-webkit-input-placeholder {
            font-size: 0.28rem;
            font-weight: normal;
            color: rgba(170, 172, 173, 1);
        }
    }

    .del {
        height: 0.6rem;
        width: 0.6rem;
    }
}

.send {
    display: flex;
    align-items: center;
    margin-top: 0.9rem;
    .val {
        font-size: 0.4rem;
        font-weight: bold;
        color: rgba(11, 116, 117, 1);
        line-height: 0.56rem;
        flex-grow: 1;
    }
    .ps {
        font-size: 0.28rem;
        color: rgba(170, 172, 173, 1);
        line-height: 0.4rem;
    }
}
.btn {
    flex-grow: 1;
    margin-top: 1rem;
}
</style>


