<template>
  <div class="app-container">
    <div class="header_main">
      修改密码
      <div class="return_btn" @click="onClickLeft"></div>
    </div>
    <div class="jg"></div>
    <van-form validate-first ref="form">
      <div class="tabsBox">
        <van-field
          v-model="user.oldPassword"
          type="password"
          placeholder="请输入原密码"
          :rules="[{ required: true }]"
        >
          <template #left-icon>
            <van-icon name="../../../../static/images/lawEnforcement/icon/icon_xgmm.png"></van-icon>
          </template>
        </van-field>
        <van-field
          v-model="user.newPassword"
          type="password"
          placeholder="请输入新密码"
          :rules="[{ required: true }]"
        >
          <template #left-icon>
            <van-icon name="../../../../static/images/lawEnforcement/icon/icon_xgmm.png"></van-icon>
          </template>
        </van-field>
        <van-field
          v-model="user.confirmPassword"
          type="password"
          placeholder="请确认新密码"
          :rules="[{ required: true }]"
        >
          <template #left-icon>
            <van-icon name="../../../../static/images/lawEnforcement/icon/icon_xgmm.png"></van-icon>
          </template>
        </van-field>
      </div>
      <p class="submitButton" @click="submit">确定</p>
    </van-form>
  </div>
</template>
<script>
import { updateUserPwd } from "@/api/lawEnforcement/index";
export default {
  name: "index",
  data() {
    return {
      active:0,
      message:'',
      password:'',
      newPassword:'',
      user: {
        oldPassword: undefined,
        newPassword: undefined,
        confirmPassword: undefined
      },
    };
  },
  created() {

  },
  methods: {
    submit() {
      const data = {
        oldPassword:this.user.oldPassword,
        newPassword:this.user.newPassword
      }
      updateUserPwd(data).then(response => {
        this.$notify({ type: 'success' , message: response.msg });
      });
    },
  },
};
</script>

<style scoped lang="scss">
@font-face {
  font-family: SourceHanSansCNBold;
  src: url("../../../assets/fonts/SourceHanSansCN-Bold.otf");
}
.jg{
  height: 116px;
}
.submitButton{
  width: 45%;
  margin: 0 auto;
  background-image: linear-gradient(to right, #2E79E9 , #77A6EF);
  text-align: center;
  color: #ffffff;
  height: 70px;
  line-height: 70px;
  border-radius: 8PX;
  margin-top: 25PX;
}
.header_main{
  height: 116px;
  background: url('../../../../static/images/lawEnforcement/new/list_head.png') no-repeat;
  background-size: 100% 100%;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  font-size: 36px;
  line-height: 116px;
  text-align: center;
  color: #fff;
  z-index: 999;
  .return_btn{
    width: 24px;
    height: 43.2px;
    background: url('../../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat;
    background-size: 20px 36px;
    position: absolute;
    left: 38px;
    top: 36px;
  }
  .add_btn{
    width: 56.4px;
    height: 40.8px;
    background: url('../../../assets/images/sunVillage_info/list_icon_9.png') center center no-repeat;
    background-size: 47px 34px;
    position: absolute;
    right: 38px;
    top: 36px;
  }
}
.tabsBox{
  padding: 2% 0;
  margin: 0 auto;
  background-color: #FFF;
  border-radius: 8PX;
  box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
  margin-bottom: 15PX;
  margin-top: 15PX;
  width: 92%;
}
.loginOut{
  width: 88%;
  margin: 10PX 6%;
  border-radius: 8Px;
  box-shadow: 0PX 5PX 5PX #cccccc;
  border: none;
  background-color: #1D6FE9;
  color: #FFF;
}
</style>
