<template>
    <div class="editPhoneStep1">
        <el-row>
            <div class="content_title">
                <span>变更手机号</span>
            </div>
        </el-row>
        <el-row>
            <div class="step">
                <el-steps :active="active" align-center>
                    <el-step description="验证当前手机号"></el-step>
                    <el-step description="绑定新手机号"></el-step>
                    <el-step description="完成"></el-step>
                </el-steps>
            </div>
        </el-row>
        <el-row style="padding-left:250px">
            <el-form
                :model="formData"
                status-icon
                ref="ruleForm"
                :rules="rules"
                label-width="100px"
                class="demo-ruleForm"
            >
                <el-form-item label="新手机号" prop="phone">
                    <el-input placeholder="请输入新手机号" v-model="formData.phone"></el-input>
                </el-form-item>
                <el-form-item label="验证码" prop="code">
                    <el-input placeholder="请输入6位验证码" class="ipt" v-model="formData.code"></el-input>
                    <div class="code" @click="sendCode">发送验证码</div>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSave()" class="btn1">确定</el-button>
                    <el-button type="primary" @click="$router.push({ name: 'account' })" class="btn2">返回</el-button>
                </el-form-item>
            </el-form>
        </el-row>
    </div>
</template>

<script>
export default {
    name: 'editPhoneStep1',
    data() {
        return {
            formData: {},
            rules: {
                code: [
                    {
                        required: true,
                        message: '请输入验证码',
                        trigger: 'blur'
                    }
                ],
                phone: [
                    { required: true, message: '请输入新手机号', trigger: 'blur' },
                    {
                        regexp: /^1[3-9]\d{9}$/,
                        message: '请输入正确的手机号',
                        trigger: 'blur'
                    }
                ]
            },
            active: 1
        };
    },
    computed: {
        userInfo() {
            return this.$store.state.userInfo;
        }
    },
    methods: {
        onSave() {
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    this.seva();
                } else {
                    return false;
                }
            });
        },
        seva() {
            this.formData.id = this.userInfo.id;
            this.$http
                .post('/user/updatePhone', this.formData)
                .then(res => {
                    this.$router.push({ name: 'editPhoneStep3' });
                })
                .catch(e => {
                    console.log(e);

                    this.$message.error(e.error);
                });
        },
        sendCode() {
            // this.$http
            //     .get('/sms/sendVerify', {
            //         phone: this.formData.phone
            //     })
            //     .then(res => {
            //         this.code = res;
            //     })
            //     .catch(e => {
            //         console.log(e);
            //         this.$message.error(e.error);
            //     });
        }
    }
};
</script>
<style lang="less">
.editPhoneStep1 {
    height: 520px;
}
.content_title {
    height: 60px;
    line-height: 60px;
    box-sizing: border-box;
    padding-bottom: 20px;
    border-bottom: #f2f3f5 1px solid;
    > span {
        font-size: 16px;
        color: #000000;
        line-height: 30px;
        font-weight: 700;
    }
}
.step {
    width: 500px;
    margin: 50px auto 0;
    .el-step__icon.is-text {
        border-width: 0px;
        background-color: #c8c9cc;
        color: #fff;
        &:nth-child(0) {
            background-color: #bf1616;
        }
    }
    .el-step__head.is-wait {
        font-size: 14px;
        font-weight: bold;
        color: #0f264d;
    }
    .el-step__head.is-process {
        color: #fff;
        .el-step__icon.is-text {
            background-color: #bf1616;
        }
    }

    .el-step__head.is-finish {
        color: #bf1616;
        .el-step__icon.is-text {
            background-color: #bf1616;
        }
        .el-step__line {
            background-color: #bf1616;
            border-color: #bf1616;
        }
    }
    .el-step__line {
        height: 1px;
    }

    .el-step__description.is-process {
        color: #bf1616;
    }

    .el-step__main {
        margin-top: 15px;
    }
}
.el-form {
    margin-top: 40px;
    .el-input {
        width: 300px !important;
    }
    .el-form-item {
        margin-bottom: 20px;
    }
    .el-button {
        margin-top: 80px;
    }
}
.el-button {
    border: none;
}
.btn1 {
    width: 110px;
    height: 36px;
    background: #bf1616;
    border-radius: 4px;
}
.btn2 {
    width: 110px;
    height: 36px;
    background: #c4c7cc;
    border-radius: 4px;
}
.ipt {
    position: relative;
}
.code {
    height: 18px;
    font-size: 13px;
    color: #bf1616;
    line-height: 18px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 207px;
    margin: auto;
    cursor: pointer;
}
</style>
