<template>
  <view class="pwd-retrieve-container container-with-elep full-height-with-titile">
	<view style="background-color: rgba(255,255,255,0.9); border-radius: 20px; padding: 45px 25px">
		<uni-forms  ref="form" :value="user" labelWidth="0px">
		  <uni-forms-item style="" name="oldPassword" label="">
			  <uni-easyinput  type="password" v-model="user.oldPassword" :placeholder="languageData.password.inputOldPwd" />
		  </uni-forms-item>
		  <uni-forms-item name="newPassword" label="">
			  <uni-easyinput type="password" v-model="user.newPassword" :placeholder="languageData.password.inputNewPwd" />
		  </uni-forms-item>
		  <uni-forms-item name="confirmPassword" label="">
			  <uni-easyinput type="password" v-model="user.confirmPassword" :placeholder="languageData.password.confirmPassword2" />
		  </uni-forms-item>
		  <button type="primary" style="border-radius: 25px;width: 80%;" @click="submit">{{languageData.me.submit}}</button>
		</uni-forms>
	</view>	
	<loading  ref="loading" :custom="false" :shadeClick="false" :type="1" />
  </view>
</template>

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

  export default {
    data() {
      return {
		languageData:{},
        user: {
          oldPassword: undefined,
          newPassword: undefined,
          confirmPassword: undefined
        },
        rules: {
          oldPassword: {
            rules: [{
              required: true,
              errorMessage: this.$languageData.password.errOldPwd
            }]
          },
          newPassword: {
            rules: [{
                required: true,
                errorMessage: this.$languageData.password.errNewPwd,
              },
              {
                minLength: 6,
                maxLength: 20,
                errorMessage: this.$languageData.password.errLength,
              }
            ]
          },
          confirmPassword: {
            rules: [{
                required: true,
                errorMessage: this.$languageData.password.errCheck,
              }, {
                validateFunction: (rule, value, data) => data.newPassword === value,
                errorMessage: this.$languageData.password.errSame,
              }
            ]
          }
        }
      }
    },
    onReady() {
      this.$refs.form.setRules(this.rules)
    },
	onLoad() {
		this.languageData = this.$languageData;
	},
    methods: {
      submit() {
		this.$nextTick(() => {
			this.$refs.loading.open();
		})
        this.$refs.form.validate().then(res => {
          updateUserPwd(this.user.oldPassword, this.user.newPassword).then(response => {
			setTimeout(()=>{},1000)
			this.$refs.loading.close();
			this.$modal.msgSuccess(this.languageData.updateSuccess);
			setTimeout(()=>{
				uni.navigateBack({
					delta: 1
				})
			},1000)
          })
        }).catch(e=>{
			this.$refs.loading.close();
		})
      }
    }
  }
</script>

<style lang="scss">
::v-deep .uni-forms-item{
  border-radius: 38px;
  overflow: hidden;
}
  page {
    background-color: #ffffff;
  }

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