<template>
    <div class="container">
        <div class="list" v-if="type=='nickname'">
            <div class="input">
                <input type="text" autofocus @blur="inputFocus=false" maxlength="20" @focus="inputFocus=true" placeholder="请输入……" v-model="userInfo.nickname">
                <img class="clear" @click="userInfo.nickname=''" v-if="inputFocus&&userInfo.nickname" src="../assets/list_icon_del.png" alt="">
            </div>
            <div class="ps">20个字符以内,仅可以使用汉字/字母/数字/下划线</div>
            <div class="btn">
                <gm-button type='primary' @click="click">保存</gm-button>
            </div>
        </div>
        <div class="list" v-if="type=='phone' &&!changePhone">
            <div class="phone">
                <div class="title">你的手机号:{{userInfo.phone}}</div>
                <div class="subTitle">若更换手机号，则后续需要使用新的手机号进行登录</div>
            </div>
            <div class="btn">
                <gm-button type='primary' @click="changePhone=true">更换手机号</gm-button>
            </div>
        </div>

        <div class="list" v-if="type=='phone'&&changePhone">
            <div class="input">
                <img class="icon" src="../assets/list_icon_shouji.png" alt="">
                <input type="text" autofocus @blur="inputFocus=false" @focus="inputFocus=true" placeholder="请输入……" v-model="userInfo.phone">
                <img class="clear" @click="userInfo.phone=''" v-if="inputFocus&&userInfo.phone" src="../assets/list_icon_del.png" alt="">
            </div>
            <div class="input">
                <img class="icon" src="../assets/list_icon_yanzhengma.png" alt="">
                <input type="text" @blur="inputCodeFocus=false" @focus="inputCodeFocus=true" placeholder="请输入短信验证码" v-model="code">
                <img class="clear" @click="code=''" v-if="inputCodeFocus&&code" src="../assets/list_icon_del.png" alt="">

                <div class="send" @click="sendCode">
                    {{isSend?'('+num+'s)':'发送验证码'}}
                </div>
            </div>
            <div class="btn">
                <gm-button type='primary' @click="click">保存</gm-button>
            </div>
        </div>

    </div>
</template>
<script>
import GmButton from '@/components/Button'
import { mapState } from "vuex";
import moment from 'moment'
require('../crop')
export default {
    data() {
        return {
            inputFocus: false,
            type: "",
            changePhone: false,
            inputCodeFocus: false,
            code: '',
            isSend: false,
            num: 61,
            realCode: ''
        }
    },
    created() {
        this.type = this.$route.query.type
        if (this.type == 'nickname') {
            document.title = '修改昵称'
        }
        else {
            document.title = '绑定手机号'
        }

    },
    computed: {
        ...mapState(["userInfo"]),

    },
    methods: {
        click() {
            if (this.type == 'nickname') {
                if (!this.userInfo[this.type]) {
                    this.$modal.info({ msg: "昵称不能为空", duration: 1500 })
                    return
                }
                this.updateUser(this.type, this.userInfo[this.type])
                setTimeout(() => {
                    this.$router.go(-1)
                }, 1500)
            }
            else {

                if (!this.checkPhone(this.userInfo.phone)) {
                    this.$modal.info({ msg: "手机号错误", duration: 1500 })
                    return

                }
                if (!this.code) {
                    this.$modal.info({ msg: "验证码未输入", duration: 1500 })
                    return

                }
                if (!this.realCode) {
                    this.$modal.info({ msg: "请重新发送短信", duration: 1500 })
                    return

                }
                this.checkCode().then((value) => {
                    console.log(value)
                    if (value) {

                        this.updateUser(this.type, this.userInfo[this.type])
                        setTimeout(() => {
                            this.$router.go(-1)
                        }, 1500)

                    }
                    else {
                        this.$modal.info({ msg: "验证码错误", duration: 1500 })
                    }
                })
            }

        },
        sendCode() {
            if (!this.checkPhone(this.userInfo.phone)) {
                this.$modal.info({ msg: "手机号错误", duration: 1500 })
                return

            }

            this.checkUsePhone().then((value) => {
                if (!value) {
                    this.getSend().then(() => {

                        this.isSend = true
                        this.getTime()
                    })
                }
                else {
                    this.$modal.info({ msg: "该手机号已使用,不能进行绑定", duration: 1500 })
                }
            })

        },
        getSend() {
            this.$store.commit('updateLoading', true)
            return new Promise((resolve, reject) => {
                this.$http.get({
                    url: '/rong/sendCode',
                    data: {
                        phone: this.userInfo.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
            }
        },
        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)
                    }
                });
            })
        },
        checkUsePhone() {
            this.$store.commit('updateLoading', true)
            return new Promise((resolve, reject) => {
                this.$http.get({
                    url: '/userInfo/getOne',
                    data: {
                        phone: this.userInfo.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>
.list {
    margin: 0.3rem 0.3rem 0;
    background: rgba(255, 255, 255, 1);
    border-radius: 0.12rem;
    padding: 0 0.3rem;
    .input {
        height: 1.36rem;
        display: flex;
        border-bottom: 1px solid #f2f4f5;
        input {
            min-width: 0;
            flex-grow: 1;
            border: 0;
            outline: none;
            font-size: 0.36rem;
            font-weight: bold;
            color: rgba(51, 51, 51, 1);
            &::-webkit-input-placeholder {
                font-size: 0.28rem;
                font-weight: normal;
                color: rgba(170, 172, 173, 1);
            }
        }
        .clear {
            width: 0.6rem;
            height: 0.6rem;
            align-self: center;
        }

        .icon {
            width: 0.4rem;
            height: 0.4rem;
            margin-right: 0.4rem;
            align-self: center;
        }

        .send {
            font-size: 0.26rem;
            font-weight: bold;
            color: rgba(21, 168, 170, 1);
            line-height: 1.36rem;
            white-space: nowrap;
        }
    }

    .ps {
        text-align: center;
        font-size: 0.24rem;
        color: rgba(170, 172, 173, 1);
        line-height: 0.34rem;
        margin-top: 0.32rem;
    }

    .btn {
        margin: 0.8rem 0.3rem 0.6rem;
    }

    .phone {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0.6rem 0.3rem 0.5rem;
        border-bottom: 0.02rem solid #f2f4f5;
        .title {
            font-size: 0.32rem;
            font-weight: bold;
            color: rgba(0, 0, 0, 1);
            line-height: 0.44rem;
        }
        .subTitle {
            font-size: 0.28rem;
            color: rgba(170, 172, 173, 1);
            line-height: 0.4rem;
            text-align: center;
            margin-top: 0.4rem;
        }
    }
}

.container {
    background: rgba(242, 242, 242, 1);
}
</style>


