<template>
    <div v-loading="loading" element-loading-text="拼命加载中......请稍等">
        <br />
        <br />
        <el-row :gutter="20">
            <el-col :span="16">
                <el-form
                    :model="form"
                    :rules="rules"
                    ref="refForm"
                    label-width="150px"
                >
                    <el-form-item prop="currentMobile" label="当前手机号码：">
                        <span>{{ form.currentMobile }}</span>
                    </el-form-item>
                    <el-form-item prop="newMobile" label="新手机号码：">
                        <el-input v-model.trim="form.newMobile"></el-input>
                    </el-form-item>
                    <el-form-item prop="smsCode" label="短信验证码：">
                        <el-input
                            v-model.trim="form.smsCode"
                            style="width: 40%; margin-right: 10px"
                        ></el-input>
                        <send-sms-code-button
                            :mobile="form.newMobile"
                        ></send-sms-code-button>
                    </el-form-item>
                    <br />
                    <el-form-item prop="password" label="当前账户密码：">
                        <el-input
                            v-model.trim="form.password"
                            show-password
                        ></el-input>
                    </el-form-item>
                    <el-form-item>
                        <p>提示：修改成功后需要重新登录账户</p>
                        <el-button
                            type="primary"
                            icon="el-icon-check"
                            @click="handleSubmit('refForm')"
                            >修 改
                        </el-button>
                        <el-button @click="handleCancelEmit">取 消</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import SendSMSCodeButton from "@/components/SendSMSCodeButton";

import USER_MANAGEMENT from "@/api/user-management";
import cache from "@/utils/cache";

export default {
    name: "AccountModifyMobile",
    components: {
        "send-sms-code-button": SendSMSCodeButton,
    },
    data() {
        return {
            loading: false,
            form: {
                currentMobile: "",
                password: "",
                smsCode: "",
                newMobile: "",
            },
            rules: {
                password: [
                    {
                        required: true,
                        message: "请输入当前账户密码",
                        trigger: "change",
                    },
                ],
                smsCode: [
                    {
                        required: true,
                        message: "请输入短信验证码",
                        trigger: "change",
                    },
                ],
                newMobile: [
                    {
                        required: true,
                        message: "请输入新手机号码",
                        trigger: "change",
                    },
                ],
            },
        };
    },
    methods: {
        handleCancelEmit() {
            this.$emit("cancel");
        },
        handleSubmit(formName) {
            const _this = this;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    _this.loading = true;
                    USER_MANAGEMENT.modifyUserMobile({
                        oriMobile: _this.form.currentMobile,
                        mobile: _this.form.newMobile,
                        password: _this.form.password,
                        smsCode: _this.form.smsCode,
                    })
                        .then((val) => {
                            _this.$message.success("修改成功！");
                            cache.removeSession("user");
                            cache.removeSession("company");
                            cache.removeToken();
                            _this.$store.dispatch("login/logout");
                        })
                        .catch((err) => {
                            _this.$message.error(err);
                        })
                        .finally(() => {
                            _this.loading = false;
                        });
                }
            });
        },
    },
    created() {
        this.form.currentMobile = JSON.parse(cache.getSession("user")).account;
    },
};
</script>

<style scoped>
</style>