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

<script>
import Header from '@/components/Header/index.vue'
export default {
  components:{Header},
  data() {
    return {
      form: {}
    };
  },
  mounted() {
    // 查询管理员信息
  },
  methods: {
    onCancle() {
      this.form ={}
    },
    // 提交数据
    onSubmit() {
      console.log(this.form);
      this.$toast.success("密码已修改,请用新密码重新登录系统");
      this.$router.replace('/login')
    }
  }
};
</script>

<style lang="scss" scoped>
.edit-psd-conatiner {
  width: 100%;
  height: 100vh;
  padding: 16px;
  box-sizing: border-box;
  .edit-container {
   margin-top: 44px;
  }

  .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 40px;
    box-sizing: border-box;
    width: 100%;
    margin: 0 auto;

    .van-button--normal {
      background: #a4151d;
      border-radius: 4px;
      height: 40px;
      width: 45%;
      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>