<template>
  <div class="home_wrapper">
    <div class="header_main">
      修改密码
      <div class="return_btn" @click="onClickLeft"></div>
      <div class="add_btn" @click="send">保存</div>
    </div>
    <van-form @submit="onSubmit" ref="formData" error-message-align="right">
      <div class="list_main">

        <van-field required label="旧密码" :rules="[{ required: true , message:'' }]" v-model="user.oldPassword" placeholder="请输入旧密码" input-align="right" :border="false" />

        <van-field required label="新密码" :rules="rules.newPassword" v-model="user.newPassword" placeholder="请输入新密码" input-align="right" :border="false" />

        <van-field required label="确认密码" :rules="[{ required: true, message: '' }]" prop="email" v-model="user.confirmPassword" placeholder="请确认密码" input-align="right" :border="false" />

      </div>

<!--      <div style="margin: 16px;">-->
<!--        <van-button round block type="primary" native-type="submit">-->
<!--          保存-->
<!--        </van-button>-->
<!--      </div>-->
    </van-form>
  </div>
</template>

<script>
  import { updateUserPwd } from "@/api/sunVillage_info/fixedAssets";
  import {REGEXP} from "@/utils/global";
  import {Notify} from "vant";
  export default {
    name: "certificateList",
    data() {
      return {
        user:{},
        rules: {
          newPassword: [
            { required: true , message:''},
            { validator: (val) => { return val.length >= 8; }, message: '密码长度至少8位', },
            { validator: (val) => { return val.length <= 20; }, message: '密码长度不能超过20位', },
            { pattern: REGEXP.PASSWORD, message: '密码必须包括字母、数字、特殊符号!', }
          ],
        },
      };
    },
    created() {
    },
    methods: {
      send(){
        this.$refs.formData.submit();
      },
      onSubmit(){
        var that = this;
        if (this.user.newPassword != this.user.confirmPassword){
          that.$notify({ type: 'warning', message: '两次输入的密码不一致！' });
          return;
        }
        if(!this.validatePassword(this.user.newPassword))
          return;
        updateUserPwd(this.user.oldPassword, this.user.newPassword).then(response => {
          that.$notify({ type: 'success', message: '修改成功！' });
          setTimeout(function(){
            history.back(-1);
          },2000)
        });
      },
      validatePassword(what) {
        if(!(REGEXP.PASSWORD.test(what)))
        {
          Notify.clear();
          Notify({ type: 'danger', message: '密码至少8个字符，必须包括字母、数字、特殊符号!' });
          return false;
        }
        return true;
      },
    },
  }
</script>

<style scoped lang="scss">
  .home_wrapper{
    background: #e9e9e9;
    min-height: 100vh;
    width: 100vw;
    .header_main {
      height: 116px;
      background: url('../../assets/images/sunVillage_info/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;
      position: relative;

      .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{
        height: 40.8px;
        font-size: 14PX;
        position: absolute;
        right: 38px;
        top: 36px;
        line-height: 40.8px;
      }
    }
    .release_head{
      height: 90px;
      padding:0 23px;
      display: flex;
      align-items: center;
      font-size: 26px;
      color: #929292;
      .people{
        flex: 1;
        display: flex;
        align-items: center;
        .icon{
          width: 24px;
          height: 21px;
          background: url('../../assets/images/sunVillage_info/details_icon_1.png') no-repeat;
          background-size: 100% 100%;
          display: block;
          margin-right: 8px;
        }
      }
      .time{
        flex: 1;
        display: flex;
        align-items: center;
        justify-content:flex-end;
        .icon{
          width: 25px;
          height: 25px;
          background: url('../../assets/images/sunVillage_info/details_icon_2.png') no-repeat;
          background-size: 100% 100%;
          display: block;
          margin-right: 8px;
        }
      }
    }
    .release_conetnt{
      padding:0 22px;
      font-size: 32px;
      color: #252525;
      line-height: 44px;
      img{
        max-width: 100%;
        margin-bottom: 16px;
      }
      p{
        margin-bottom: 16px;
      }
    }
    .list_main{
      padding:25px;
      background: #ffffff;
      width: 94%;
      margin: 25px auto 0;
      border-radius: 15PX;
      box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);
    }
    .titBox{
      display: flex;
      align-items: center;
    }
    .tit{
      font-size: 36px;
      font-weight: bold;
    }
    /deep/ .van-cell{
      padding-left: 0!important;
      padding-right: 0!important;
      padding-bottom: 0!important;
      &:first-child{
        padding-top: 0;
      }
    }
    /deep/ .van-field__label{
      padding-left: 10PX;
      width: auto;
      display: flex;
      align-items: center;
    }
    /deep/ .van-cell--required::before{
      left: 0PX;
    }
    /deep/ .van-field__error-message{
      /*display: none;*/
    }
  }
</style>
