<template>
  <div class="userSetting">
    <h3 class="settings_title">更改密码</h3>
    <el-divider></el-divider>

    <div class="item" style="margin-bottom: 25px;">
      <span class="item_title">输入密码:</span>
      <el-input placeholder="请输入更改的密码" v-model="password" clearable class="item_content" show-password>
      </el-input>
    </div>

    <div class="item" style="margin-bottom: 25px;">
      <span class="item_title">再次输入:</span>
      <el-input placeholder="请再次输入更改的密码" v-model="repassword" clearable class="item_content" show-password>
      </el-input>
    </div>
    <el-row class="button-row">
      <el-button @click="setUserConfig" type="primary">更改密码</el-button>

      <el-button @click="reset">重置输入</el-button>
    </el-row>

  </div>
</template>
<script>
import api from "@/api/settings/userSetting";
export default {
  data() {
    return {
      form: {
        conf: {
          username: 'admin',
          password: 'admin'
        }
      },
      password: '',
      repassword: ''
    }
  },
  mounted() {
  },
  computed: {

  },
  methods: {
    setUserConfig() {
      if (this.password !== this.repassword) {
        this.$message.error('两次输入的密码不一致,请重新输入');
        this.reset();
        return;
      }
      this.form.conf.password = this.password;
      api.setUserConfig(this.form).then(res => {
        console.log(res);
        this.$message.success('密码修改成功');
        this.reset();
      })
    },

    reset() {
      this.password = '';
      this.repassword = '';
    }
  },
}
</script>
<style scoped>
.userSetting {
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}

.userSetting::-webkit-scrollbar {
  display: none;
}

.item {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.item_title {
  width: 150px;
  text-align: right;
}

.item_content {
  margin-left: 15px;
  width: 200px;
}

.button-row {
  display: flex;
  justify-content: flex-end;
  /* 将按钮排布到右侧 */
  align-items: flex-end;
  /* 将按钮放到容器底部 */
  position: relative;
  margin-top: 50px;
  /* 保证按钮排在最底部 */
  margin-bottom: 30vh;
  /* 按钮距离底部有一定间距 */
}
</style>
