<template>
  <div class="main">
    <h3>{{$t('pwd_alter')}}</h3>
    <div class="content">
       <div class="form">
        <Form ref="form" :model="form" :rules="ruleCustom" :label-width="80">
          <FormItem :label="$t('origin_pwd')+':'" prop="password" :placeholder="$t('origin_pwd_input_tips')+':'">
              <Input clearable v-model="form.password" type="password"/>
          </FormItem>
          <FormItem :label="$t('new_pwd')+':'" prop="new_password" :placeholder="$t('new_pwd_input_tips')+':'">
              <Input clearable v-model="form.new_password" type="password"/>
          </FormItem>
          <FormItem :label="$t('new_pwd_confirm')+':'" prop="confirm_password" :placeholder="$t('pwd_confirm_tips')+':'">
              <Input clearable type="password" v-model="form.confirm_password"/>
          </FormItem>
          <FormItem>
              <Button type="primary" class="btn" @click="handleSubmit('formCustom')">{{$t('submit')}}</Button>
          </FormItem>
      </Form>
      </div>
    </div>
  </div>
</template>

<script>
import { getToken } from '@/libs/util'
import { ResetPwd } from '@/api/account'
export default {
  name: 'resetPwd',
  data () {
    var validateOrigPass = (rule, value, callback) => {
      if (!value) {
        callback(new Error(this.$t('origin_pwd_input_tips')))
      } else {
        callback()
      }
    }
    var validatePass = (rule, value, callback) => {
      if (this.form.confirm_password) {
        this.$refs.form.validateField('confirm_password')
      }
      callback()
    }
    var validatePass2 = (rule, value, callback) => {
      if (!value) {
        callback(new Error(this.$t('new_pwd_confirm_error_1')))
      } else if (value !== this.form.new_password) {
        callback(new Error(this.$t('new_pwd_confirm_error_2')))
      } else {
        callback()
      }
    }
    return {
      token: getToken(),
      form: {
        password: '',
        new_password: '',
        confirm_password: ''
      },
      ruleCustom: {
        password: [
          { required: true, message: this.$t('origin_pwd_input_tips'), trigger: 'blur' },
          { pattern: /^[a-zA-Z0-9]{6,20}$/, message: this.$t('pwd_length_error'), trigger: 'blur' },
          { validator: validateOrigPass, trigger: 'blur' }
        ],
        new_password: [
          { required: true, message: this.$t('new_pwd_input_tips'), trigger: 'blur' },
          { pattern: /^\S+$/, message: this.$t('new_pwd_format_error'), trigger: 'blur' },
          { pattern: /^[a-zA-Z0-9]{6,20}$/, message: this.$t('pwd_length_error'), trigger: 'blur' },
          { validator: validatePass, trigger: 'blur' }
        ],
        confirm_password: [
          { required: true, message: this.$t('pwd_confirm_tips'), trigger: 'blur' },
          { validator: validatePass2, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleSubmit () {
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return false
        }
        const data = new FormData()
        data.append('access_token', this.token)
        data.append('password', this.form.password)
        data.append('new_password', this.form.confirm_password)
        ResetPwd(data).then(res => {
          if (res.data.is_alter) {
            this.$Message.success(this.$t('pwd_alter_success'))
          } else {
            this.$Message.error(this.$t('pwd_alter_fail'))
          }
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  padding: 18px;
  background-color: #fff;
  height: 800px;

  h3{
    font-size: 18px;
    padding-bottom: 20px;
  }

  .content {
  width: 660px;
  margin: 5px 20px;
  display: flex;

  .form{
    width: 350px;
  }
  }
}
</style>
