<template>
    <div class="conatiner">
        <div class="pageTitle">
            安全设置
        </div>

        <div class="content">
            <img src="../assetsPre/Bitmap.png" alt="">
            <table>
                <tr>
                    <td width='40%'>您当前的邮箱</td>
                    <td width='50%'>{{getMail(userInfo.mail)}}</td>
                    <td width='10%'>
                        <el-button type="text" @click="changeStart('邮箱')">修改</el-button>
                    </td>
                </tr>
                <tr>
                    <td>您当前的手机号</td>
                    <td>{{getPhone(userInfo.phone)}}</td>
                    <td>
                        <el-button type="text" @click="changeStart('手机号')">修改</el-button>
                    </td>
                </tr>
                <tr>
                    <td>账户密码</td>
                    <td>********</td>
                    <td>
                        <el-button type="text" @click="goNext('backPassword')">修改</el-button>
                    </td>
                </tr>
            </table>
        </div>

        <el-dialog :title="'修改'+changeType" :visible.sync="dialogVisible" width="30%">
            <el-form :model="userInfo" ref="form" label-width="80px" label-position="right" size="small" style="max-width:400px;">
                <el-form-item prop="mail" label="邮箱" v-if="changeType=='邮箱'">
                    <el-input v-model="changeUser.mail"></el-input>
                </el-form-item>

                <template v-if="changeType=='手机号'">
                    <el-form-item prop="mail" label="手机号">
                        <el-input v-model="changeUser.phone" style="width:255px"></el-input>
                    </el-form-item>
                    <el-form-item prop="code" label="验证码">
                        <el-input v-model="code" style="width:160px"></el-input>
                        <el-button style="width:92px;" type="warning" @click.prevent="startSend" :disabled="isSend">{{isSend?'('+startNum+')S':'发送验证码'}}</el-button>
                    </el-form-item>
                </template>

            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submit">保 存</el-button>
            </span>

        </el-dialog>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import orderItem from '../components/OrderItem'
export default {
    name: 'order',
    data() {
        return {
            dialogVisible: false,
            changeType: '手机号',
            code: '',
            backCode: '',
            startNum: 60,
            isSend: false,
            changeUser: {},
        }
    },
    computed: {
        ...mapState(['userInfo', 'msgCode']),
    },
    mounted() {

    },
    methods: {
        changeStart(str) {
            if (str === '手机号' && this.userInfo.phone) {
                this.goNext('changePhone')
                return
            }
            this.changeUser = { ...this.userInfo }
            this.code = ''
            this.backCode = ''
            this.isSend = false
            this.changeType = str
            this.dialogVisible = true
        },
        startSend() {
            if (!this.checkPhone(this.changeUser.phone)) {
                this.$message.warning('手机号格式错误')
                return
            }

            this.checkHas({ phone: this.changeUser.phone }).then((result) => {
                console.log(result)
                if (result) {
                    this.$message.warning('该手机号已经被用户绑定')
                }
                else {
                    this.sendMeg(this.changeUser.phone, this.msgCode['信息变更']).then((json) => {
                        if (json.success) {
                            this.$message.success('发送成功')
                            this.backCode = json.data
                            this.startNum = 61
                            this.isSend = true
                            this.setTime()
                        }
                        else {
                            this.$message.warning(json.error)
                        }

                    })
                }
            })

        },
        setTime() {
            if (this.startNum == 0) {
                this.isSend = false
                return
            }
            this.startNum--
            setTimeout(() => {
                this.setTime()
            }, 1000)
        },
        checkMes() {
            return new Promise((resolve, reject) => {
                if (!this.backCode) {
                    this.$message.warning('请发送验证码')
                    resolve(false)
                }
                else if (!this.code) {
                    this.$message.warning('请输入验证码')
                    resolve(false)
                }
                else {
                    this.$http.get({
                        url: '/aliapi/verifyMsgCode',
                        data: {
                            // sessionId: this.backCode,
                            code: this.code
                        }
                    }).then(res => {
                        if (res.success) {
                            resolve(true)
                        } else {
                            this.$message.warning(res.error)
                            resolve(false)
                        }
                    });
                }

            })


        },
        submit() {
            if (this.changeType == '手机号') {
                this.checkMes().then((result) => {
                    console.log(result)
                    if (result) {
                        this.changeNow()
                    }
                })
            }
            else {

                this.checkHas({ mail: this.changeUser.mail }).then((result) => {
                    console.log(result)
                    if (result) {
                        this.$message.warning('该邮箱已经被用户绑定')
                    }
                    else {
                        this.changeNow()
                    }
                })

            }


        },
        changeNow() {
            var data = { ...this.changeUser };
            this.$http.post({
                url: '/userInfo/update',
                data: data
            }).then(res => {
                this.dialogVisible = false
                if (res.success) {
                    this.$message.success('成功');
                    this.$http.get({
                        url: '/userInfo/getUserInfo',
                        data: {}
                    }).then(res => {
                        if (res.success) {
                            this.$store.commit('updateUserInfo', res.data);
                        }
                    })
                } else {
                    this.$message.warning('失败')
                }
            });
        },
        goNext(str) {
            if (str == 'backPassword') {
                this.$router.push({
                    name: 'backPassword',
                    query: {
                        title: '修改密码'
                    }
                })
            }
            else {
                this.$router.push({
                    name: str

                })
            }

        }

    },
    components: {
        orderItem
    }
}
</script>

<style lang="less" scoped>
.conatiner {
    min-height: 598px;
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    border: 1px solid rgba(234, 234, 234, 1);
    padding: 0 40px 0 25px;

    .pageTitle {
        font-size: 14px;
        font-family: MicrosoftYaHei;
        font-weight: bold;
        color: rgba(51, 51, 51, 1);
        line-height: 19px;
        padding: 18px 0 9px;
        border-bottom: 1px solid rgba(234, 234, 234, 1);
    }

    .content {
        width: 650px;
        margin: 34px auto;
        font-size: 0;

        img {
            width: 140px;
            height: 139px;
            vertical-align: middle;
        }

        table {
            display: inline-block;
            width: 400px;
            margin-left: 38px;
            vertical-align: middle;
            td {
                font-size: 14px;
                font-family: MicrosoftYaHei;
                color: rgba(51, 51, 51, 1);
                line-height: 51px;
            }
        }
    }
}
</style>
