<template>
<div>
  <van-nav-bar
    title="密码修改"
    left-arrow
    @click-left="$router.back(-1)"
  />
  <van-cell-group style="width: 96%;margin:2%;border-radius: 6px;overflow: hidden;padding-top: 10px;padding-bottom: 10px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);">
    <van-field type="password" v-model="user.oldPassword" placeholder="请输入" >
      <template #left-icon>
        <van-image
          height="20"
          width="16"
          src="../../../static/images/onlineHome/lock.png"></van-image>
      </template>
      <template #label>
        <H4 style="margin-left: 5px">原密码</H4>
      </template>
    </van-field>
    <van-field type="password" v-model="user.newPassword"  placeholder="请输入" >
      <template #left-icon>
        <van-image
          height="20"
          width="16"
          src="../../../static/images/onlineHome/lock.png"></van-image>
      </template>
      <template #label>
        <H4 style="margin-left: 5px">新密码</H4>
      </template>
    </van-field>
    <van-field type="password" v-model="user.confirmPassword"  placeholder="请输入" >
      <template #left-icon>
        <van-image
          height="20"
          width="16"
          src="../../../static/images/onlineHome/lock.png"></van-image>
      </template>
      <template #label>
        <H4 style="margin-left: 5px">确认密码</H4>
      </template>
    </van-field>
  </van-cell-group>
  <van-row style="text-align: center;margin-top: 40px">
    <van-button color="#1D6FE9" style="border-radius: 6px;width: 90%;margin: 0 auto" @click="submit">完成</van-button>
  </van-row>
</div>
</template>

<script>
    import onlineHomeIndex from "../onlineHomeIndex";
    import {updateUserPwd} from "../../api/onlineHome/my";

    export default {
      components: {
        onlineHomeIndex
      },
        name: "password",
      data() {
        return {
          user: {
            oldPassword: undefined,
            newPassword: undefined,
            confirmPassword: undefined
          },
        };
      },
      methods: {
        submit() {
          console.log(this.user)
          if(this.user.confirmPassword
            !=this.user.newPassword){
            this.$toast({
              icon: 'error', // 找到自己需要的图标
              message: '两次密码不同，请重新输入',
              duration:"1000",
              onClose:function(){
                this.user.oldPassword=""
                this.user.newPassword=""
                this.user.confirmPassword=""
                return false;
              }
            })
          }else{
            updateUserPwd(this.user.oldPassword, this.user.newPassword).then(
              response => {
                let _this =this
                this.$toast({
                  icon: 'success', // 找到自己需要的图标
                  message: '修改成功',
                  duration:"1000",
                  onClose:function(){
                    _this.$router.back(-1);
                  }
                })
              }
            );
          }

        },
      }
    }
</script>

<style scoped>

</style>
