<template>
  <div class="edit-psd-conatiner">
    <Header title="修改密码" />
    <div class="edit-container">
      <van-form @submit="onSubmit">
        <div class="input-box">
          <van-field
            label="当前账号"
            readonly
            v-model="form.username"
            placeholder="请输入当前账号"
            input-align="right"
          />
          <van-field
            label="当前密码"
            type="password"
            v-model="form.oldPassWord"
            placeholder="请输入当前密码"
            input-align="right"
            :rules="[{ required: true }]"
          />
          <van-field
            label="新密码"
            type="password"
            v-model="form.password"
            placeholder="请输入新密码"
            input-align="right"
            :rules="[{ required: true }]"
          />
          <van-field
            label="再次输入新密码"
            v-model="form.againPsd"
            placeholder="请再次输入新密码"
            input-align="right"
            :rules="[{ required: true }]"
          />
        </div>
        <div class="admin-detail-button">
          <!-- <van-button type="default" plain native-type="button" @click="onCancle">取消</van-button> -->
          <van-button type="default" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </div>
    <my-tabbar active="3"></my-tabbar>
  </div>
</template>

<script>
import Header from "@/components/Header/index.vue";
export default {
  components: { Header },
  data() {
    return {
      form: {
        username: JSON.parse(localStorage.getItem("userInfo")).userName,
      },
    };
  },
  mounted() {
    // 查询管理员信息
  },
  methods: {
    onCancle() {
      this.form = {
        username: JSON.parse(localStorage.getItem("userInfo")).userName,
      };
    },
    // 提交数据
    onSubmit() {
      if (this.form.password !== this.form.againPsd) {
        this.$toast("两次输入的密码不一致");
        return false;
      }
      let vm = this;
      let param = {
        password: this.form.password,
        oldPassWord: this.form.oldPassWord,
      };
      vm.$https(
        {
          url: "tUser/editPwd",
          method: "put",
          authType: this.backToken,
        },
        vm.$qs.stringify(param)
      )
        .then((res) => {
          if (res.data.resultCode === "200") {
            localStorage.removeItem("token");
            localStorage.removeItem("userInfo");
            this.$router.replace({
              path: "/success",
              query: {
                txt: "密码已修改,请用新密码重新登录系统",
                url: "/login",
              },
            });
          } else {
            this.$toast(res.data.message);
          }
        })
        .catch(function (err) {
          console.log(err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.edit-psd-conatiner {
  width: 100%;
  height: 100vh;
  padding: 50px 24px 60px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  .edit-container {
  }

  .input-box {
    padding-bottom: 32px;
    .van-cell {
      line-height: 40px;
      padding-left: 0;
      padding-right: 0;
      border-bottom: 1px solid #eee;
    }
    .van-cell:after {
      display: none;
    }
  }
  .admin-detail-button {
    padding: 0 24px;
    box-sizing: border-box;
    width: 100%;
    margin: 0 auto;
    text-align: center;

    .van-button--normal {
      background: #a4151d;
      border-radius: 4px;
      height: 40px;
      width: 100%;
      color: #fff;
      border: none;
      font-size: 16px;
      &:first-child {
        margin-right: 5%;
      }
    }
    .van-button--plain {
      background: rgba(164, 21, 29, 0.1);
      border: 1px solid #b40011;
      border-radius: 4px;
      color: #b40011;
    }
  }
  /deep/.van-field__label {
    width: 7.2em;
  }
  .van-field__control,
  .van-cell__value {
    color: #333;
  }
}
</style>