<template>
    <div class="container">
        <img src="../assets/logo.png" class="logo" alt="">

        <div class="title">
            {{bindType?'快速绑定手机号':'手机快捷登录'}}
        </div>

        <div class="input">
            <img src="@/assets/list_icon_shouji.png" class="icon" alt="">
            <input type="number" @input="phone=phone.slice(0,11)" @focus="onInput=true" @blur="onInput=false" v-model="phone" placeholder="输入手机号">
            <img src="@/assets/list_icon_del.png" v-if="onInput&&phone" @click="phone=''" class="del" alt="">
        </div>
        <div class="btn">
            <gm-button :type='canNext?"primary":"dark"' @click="click">下一步</gm-button>
        </div>

    </div>
</template>
<script>
import GmButton from '@/components/Button';
export default {
    data() {
        return {
            phone: '',
            onInput: false,
            bindType: false
        }
    },
    created() {
        if (this.$route.query.bindType) {
            this.bindType = true
        }
        // this.$store.commit('updateLoading',true)
        //  this.$modal.success({ msg: '成功', duration: 0 })
        if (this.$route.query.phone) {
            if (window.history.length <= 1) {
                this.$router.replace({
                    name: 'home',
                    query: {},
                    params: {
                        isNext: 1
                    }
                })
            } else {
                this.$router.go(-1)
            }
        }
        // console.log(this.$route)
        // history.back()
    },
    computed: {
        canNext() {
            var result = false
            if (this.checkPhone(this.phone)) {
                result = true
            }
            return result
        }
    },
    methods: {
        click() {
            if (this.canNext) {
                if (this.bindType) {
                    this.checkUsePhone().then((value) => {
                        if (!value) {
                            this.$router.replace({
                                name: 'loginSe',
                                query: {
                                    phone: this.phone,
                                    bindType: this.$route.query.bindType
                                },
                                params: {
                                    isNext: 1
                                }
                            })
                        }
                        else {
                            this.$modal.info({ msg: "该手机号已使用", duration: 1500 })
                        }
                    })
                }
                else {
                    this.$router.replace({
                        name: 'loginSe',
                        query: {
                            phone: this.phone,
                        },
                        params: {
                            isNext: 1
                        }
                    })
                }


            }

        },
        getSend() {

            return new Promise((resolve, reject) => {
                this.$http.get({
                    url: '/rong/sendCode',
                    data: {
                        phone: this.phone
                    }
                }).then(res => {
                    if (res.success) {
                        this.$modal.success({ msg: '发送成功', duration: 1500 })

                    } else {
                        this.$modal.warn({ msg: '发送失败', 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)
                    }
                });
            })
        }
    },
    components: { GmButton }
}
</script>
<style lang="less" scoped>
.container {
    background: rgba(242, 242, 242, 1);
    padding: 0 0.3rem;
}
.logo {
    width: 4.12rem;
    height: 1.48rem;
    margin: 0.6rem 0 0;
    display: block;
}

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

.input {
    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;
    }
}
.btn {
    flex-grow: 1;
    margin-top: 1rem;
}
</style>


