<template>
  <uni-row class="main" v-bind:style="{ height: client.win_height + 'px' }">
    <uni-col :span="24" class="one">
      <form @submit="onSubmit">
        <view class="content">
          <view class="title">旧密码：</view>
          <input
            :value="form.oldPassword"
            name="oldPassword"
            password
            placeholder="请输入新密码"
          />
        </view>
        <view class="content">
          <view class="title">新密码：</view>
          <input
            :value="form.newPassword"
            name="newPassword"
            password
            placeholder="请输入新密码"
          />
        </view>
        <view class="btn">
          <button type="primary" size="mini" form-type="submit">
            提交保存
          </button>
        </view>
      </form>
    </uni-col>
  </uni-row>
</template>

<script>
import { mapState, mapGetters, createNamespacedHelpers } from "vuex";
const { mapActions } = createNamespacedHelpers("login");
const { mapActions: securityGuardBase } = createNamespacedHelpers(
  "security_guard_base"
);
export default {
  data() {
    return {
      // 用户信息
      userInfo: {},
      // 浏览器高度
      height: "",
      // 表单
      form: {},
      rule: [],
    };
  },
  created() {
    this.$set(this, `height`, this.client.win_height);
    this.search();
  },
  methods: {
    ...mapActions(["login"]),
    ...securityGuardBase(["update"]),
    // 查询用户
    search: function () {
      let user = this.user;
      if (user) this.$set(this, `userInfo`, user);
    },
    // 提交保存
    onSubmit: async function (e) {
      //进行表单检查
      var formData = e.detail.value;
      const object = {
        table: "security_guard_base",
        phone: this.userInfo.phone,
        password: formData.oldPassword,
      };
      const res = await this.login(object);
      if (this.$checkRes(res)) {
        let object_1 = {
          id: this.userInfo.id,
          password: formData.newPassword,
        };
        const arr = await this.update(object_1);
        if (this.$checkRes(arr)) {
          uni.removeStorageSync("token");
          uni.showToast({
            title: `修改密码成功`,
            duration: 2000,
            icon: "success",
          });
          uni.redirectTo({
            url: `/pages/login/index`,
          });
        } else {
          uni.showToast({
            title: `${res.errmsg}`,
            duration: 2000,
            icon: "error",
          });
        }
      } else {
        uni.showToast({
          title: `${res.errmsg}`,
          duration: 2000,
          icon: "error",
        });
      }
    },
  },
  computed: {
    ...mapState(["user"]),
    ...mapGetters(["client"]),
  },
  onLoad() {},
};
</script>

<style lang="scss">
.main {
  background-color: #409eff;
  height: 700px;
  overflow: hidden;
  .one {
    float: left;
    width: 100%;
    .content {
      padding: 0 10px;
      margin: 10px 0;
      .title {
        font-size: 16px;
        margin: 0 0 8px 0;
        color: #000000;
      }
      input {
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 10px;
      }
    }
    .btn {
      text-align: center;
      margin: 15rpx 0 0 0;
      button {
        margin: 0 10px;
      }
    }
  }
}
</style>
