<template>
  <view class="content1">
    <view class="change-password">
      <u--form
        ref="formRef"
        label-position="top"
        :model="form"
        :rules="rules"
        label-width="100%"
        :label-style="{ color: '#333', fontSize: '32upx', fontWeight: 'bold' }"
      >
        <u-form-item label="原密码" border-bottom required>
          <u--input v-model="form.password" type="password" border="none" />
        </u-form-item>
        <u-form-item label="新密码" border-bottom required>
          <u--input v-model="form.newpwd" type="password" border="none" />
        </u-form-item>
        <u-form-item label="确认新密码" border-bottom required>
          <u--input v-model="form.confirmPwd" type="password" border="none" />
        </u-form-item>
        <u-form-item>
          <u-button
            type="primary"
            shape="circle"
            text="确定"
            @click="fnSubmit"
          />
        </u-form-item>
      </u--form>
    </view>
  </view>
</template>

<script>
import { setChangePassword } from "@/api";

export default {
  data() {
    return {
      form: {
        password: "",
        newpwd: "",
        confirmPwd: "",
      },
      rules: {
        password: {
          type: "string",
          required: true,
          message: "请输入原密码",
          trigger: ["blur", "change"],
        },
        newpwd: {
          type: "string",
          required: true,
          message: "请输入新密码",
          trigger: ["blur", "change"],
        },
        confirmPwd: {
          type: "string",
          required: true,
          message: "请再次输入新密码",
          trigger: ["blur", "change"],
        },
      },
    };
  },
  computed: {
    userInfo() {
      return this.$store.getters.getUserInfo;
    },
  },
  methods: {
    async fnSubmit() {
      if (!this.form.newpwd) {
        uni.$u.toast("请填写新密码");
        return;
      }
      if (this.form.newpwd.length < 6 || this.form.newpwd.length > 20) {
        uni.$u.toast("长度最少6个字符最多20个字符");
        return;
      }
      if (!this.form.confirmPwd) {
        uni.$u.toast("请填写新密码");
        return;
      }
      if (this.form.confirmPwd.length < 6 || this.form.confirmPwd.length > 20) {
        uni.$u.toast("长度最少6个字符最多20个字符");
        return;
      }
      if (this.form.confirmPwd !== this.form.newpwd) {
        uni.$u.toast("两次输入密码不一致");
        return;
      }
      await setChangePassword({
        password: this.form.password,
        newpwd: this.form.newpwd,
        USERNAME: this.userInfo.USERNAME,
      });
      uni.$u.toast("修改成功");
      const userInfo = {};
      for (const userInfoKey in this.userInfo) {
        if (Object.prototype.hasOwnProperty.call(this.userInfo, userInfoKey)) {
          userInfo[userInfoKey] = "";
        }
      }
      await this.$store.dispatch("setUserInfo", userInfo);
      uni.reLaunch({
        url: "/pages/login/login",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.change-password {
  background-color: #fff;
  border-radius: 20upx;
  padding: 40upx;
}
</style>
