<template>
  <view class="pwd-retrieve-container">

    <view style="padding: 15px;">
      <uni-forms ref="form" :value="user" labelWidth="80px">
        <uni-forms-item name="oldPwd" label="旧密码">
          <uni-easyinput type="password" v-model="user.oldPwd" placeholder="请输入旧密码" />
        </uni-forms-item>
        <uni-forms-item name="pwd" label="新密码">
          <uni-easyinput type="password" v-model="user.pwd" placeholder="请输入新密码" />
        </uni-forms-item>
        <uni-forms-item name="confirmPassword" label="确认密码">
          <uni-easyinput type="password" v-model="user.confirmPassword" placeholder="请确认新密码" />
        </uni-forms-item>
        <button type="primary" @click="submit">提交</button>
      </uni-forms>
    </view>



  </view>
</template>

<script>
  import {
    updateUserPwd
  } from "@/apis/system/user"

  import useUserStore from '@/store/user';

  export default {
    data() {
      const userStore = useUserStore();
      return {
        user: {
          oldPwd: useUserStore().password,
          pwd: undefined,
          username: '',
          confirmPassword: undefined
        },
        rules: {
          oldPwd: {
            rules: [{
              required: true,
              errorMessage: '旧密码不能为空'
            }]
          },
          pwd: {
            rules: [{
                required: true,
                errorMessage: '新密码不能为空',
              },
              {

                //	pattern: /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]).{6,}$/,
                //pattern: /^(?=.*[A-Za-z])(?=.*d)(?=.*[@$!%*#?&])[A-Za-zd@$!%*#?&]{8,}$/,
                //errorMessage: '长度至少为8,至少含有一个字母和一个数字和一个特殊字符'

                //用的是这个
                // minLength: 6,
                // maxLength: 20,
                // validateFunction: function(rule, value, data, callback) {
                //   if (!value.match(
                //       /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]).{6,}$/
                //     )) {
                //     callback('新密码长度在 6 到 20 个字符必须包含数字、字母和特殊字符！')
                //   }
                //   return true
                // },
                // errorMessage: '新密码长度在 6 到 20 个字符必须包含数字、字母和特殊字符！'

                minLength: 6,
                maxLength: 20,
                errorMessage: '新密码长度6个字符！'
              }
            ]
          },
          confirmPassword: {
            rules: [{
              required: true,
              errorMessage: '确认密码不能为空'
            }, {
              validateFunction: (rule, value, data) => data.pwd === value,
              errorMessage: '两次输入的密码不一致'
            }]
          }
        }
      }
    },
    mounted() {
      this.$refs.form.setRules(this.rules)
    },
    onReady() {

    },
    computed: {
      nick() {
        // debugger
        // return  userStore.username
        const userStore = useUserStore();
        return userStore.name
      },
      username() {
        // debugger
        // return  userStore.username
        const userStore = useUserStore();
        return userStore.username
      },
      avatar() {
        //debugger
        const userStore = useUserStore();
        return userStore.avatar
      },
      windowHeight() {
        return uni.getSystemInfoSync().windowHeight - 50
      }
    },
    methods: {
      submit() {
        let _self = this;
        const userStore = useUserStore();
        this.$refs.form.validate().then(res => {
          this.user.username = this.username;
          let putdata = {
            newPassword: this.user.pwd,
            oldPassword: this.user.oldPwd
          }
          updateUserPwd(putdata).then(response => {
            //  debugger
            this.$modal.msgSuccess(response.msg)
            setTimeout(function() {
              //uni.navigateBack(); //回退页面
              userStore.logOut();
            }, 300);
          })
        })
      }
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #ffffff;
  }

  .pwd-retrieve-container {
    // padding-top: 36rpx;
    // padding: 15px;
  }

  .formsws {
    .uni-forms-item {
      margin-bottom: 16rpx;
    }

    ::v-deep .uni-forms-item__error {
      position: initial;
    }
  }
</style>