<template>
  <view class="change_password">
    <view class="box">
      <u-input
        style="width: 100%"
        placeholder="当前密码"
        v-model="value"
        type="password"
      ></u-input>
    </view>
    <view class="box">
      <u-input
        style="width: 100%"
        placeholder="新密码（6-20位）"
        v-model="pwd1"
        type="password"
      ></u-input>
    </view>
    <view class="box">
      <u-input
        style="width: 100%"
        placeholder="确认新密码"
        v-model="pwd2"
        type="password"
      ></u-input>
    </view>
    <view class="btn">
      <u-button
        :throttle-time="0"
        type="primary"
        :disabled="!disabled"
        @click="updatePassword"
        shape="circle"
        :loading="loading"
        >确认修改</u-button
      >
    </view>
  </view>
</template>

<script>
import { updatePassword } from "@/api/all.js";
export default {
  data() {
    return {
      value: null,
      pwd1: null,
      pwd2: null,
      loading: false,
    };
  },
  computed: {
    disabled() {
      return this.value && this.pwd1 && this.pwd2;
    },
  },
  methods: {
    async updatePassword() {
      if (this.pwd1!==this.pwd2) {
        this.$toast("两次密码不一致");
        return;
      }
      if (this.loading) {
        return;
      }
      this.loading = true;
      try {
        const res = await updatePassword({
          password_old: this.value,
          password_new: this.pwd1,
        });
        if (res.errcode != -1) {
          this.$toast("修改成功");
        } else {
          this.$toast(res.msg);
        }
      } catch (error) {
        this.$toast("系统错误");
      } finally {
        this.loading = false;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.change_password {
  height: 100vh;
  background: #f8fafc;
  padding-top: 20px;
  .box {
    display: flex;
    align-items: center;
    height: 88rpx;
    padding: 0 60rpx;
    background: #fff;
  }
  .btn {
    margin: 0 32rpx;
    margin-top: 80rpx;
  }
}
</style>
