<template>
  <div class="addUserInfo">
    <div>
      <el-form ref="form" class="form" :rules="rules" :model="form" label-width="120px"> 
        <el-form-item label="用户名:" prop="username">
          <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
         <!-- <el-form-item label="显示名:" prop="name">动态绑定域名，不需要重复打包
          <el-input v-model="form.nick_name" placeholder="请输入姓名"></el-input>
        </el-form-item> -->
        <el-form-item label="密码:" prop="password">
          <el-input v-model="form.password" placeholder="请输入新密码"></el-input>
        </el-form-item>
        <el-form-item label="邮件地址:">
          <el-input v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item label="地址:">
          <el-input v-model="form.address"></el-input>
        </el-form-item>
        <el-form-item label="手机号:" prop="mobile">
          <el-input v-model="form.mobile" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item class="button">
          <el-button type="primary" @click="onSubmit('form')">立即修改</el-button>
          <el-button type="primary" @click="returnLogin">返回登录页</el-button>
        </el-form-item>
        <el-form-item class="button">
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { getUserInfoAPI, editUserInfoAPI } from '@/api/login'
export default {
  data() {
    return {

      form: {
        email: '',
        // nick_name: '',
        mobile: '',
        username: '',
        address: '',
        password: '',
        jion_type: 0,
        status: 0,
        id: sessionStorage.getItem("userId")
      },
      rules: {
        password: [{ required: true, message: '请输入新密码', trigger: 'blur' }],
        mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
      },

    }
  },
  created() {
    this.getUserInfo()
  },
  methods: {
    getUserInfo() {
      getUserInfoAPI({ id: sessionStorage.getItem("userId") }).then(res => {
        // console.log(res);
        this.form.name = res.data[0].name
        this.form.email = res.data[0].email
        this.form.address = res.data[0].address
        this.form.mobile = res.data[0].mobile
        this.form.password = ""
        this.form.username = res.data[0].username
      })
    },

    onSubmit(formName) {//修改
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.form.contactor_phone = this.form.mobile
          editUserInfoAPI(this.form).then(res => {
            if (res.status==true) {
                this.$message({
              message: "修改成功",
              type: "success",
            });
            this.$router.push({ name: 'Login' })
            }
          })
        }
      })
    },
    returnLogin() {
      this.$router.push({ name: 'Login' })
    }
  }

}
</script>

<style lang="scss" scoped>
$bg: #2d3a4b;
.addUserInfo {
  min-height: 100%;
  width: 100%;
  background-color: $bg;
  color: white;
  .form {
    padding-top: 10px;
    color: white;
    width: 30%;
    margin-left: 27%;
    .button {
      margin-left: 22%;
    }
  }
}
</style>