<template>
  <section class="modifyPass form-content">
    <el-form ref="form" :model="formData" :rules="rules" label-width="120px">
      <el-form-item label="旧密码：" prop="oldPass">
        <el-input type="password"  v-model="formData.oldPass" @change="handleInputChange"></el-input>
        <span></span>
      </el-form-item>
      <el-form-item label="新密码：" prop="newPass">
        <el-input type="password"  v-model="formData.newPass" @change="handleInputChange"></el-input>
        <span class="tips">1. 至少含8个字符； <br> 2. 至少大写、小写英文字母、数字、特殊符号中的三种</span>
      </el-form-item>
      <el-form-item label="确认新密码：" prop="checkPass">
        <el-input type="password"  v-model="formData.checkPass" @change="handleInputChange"></el-input>
        <span></span>
      </el-form-item>
      <el-form-item style="padding-top: 14px;">
        <el-button @click="resetForm('form')">重置</el-button>
        <el-button type="primary" :loading="formData.submiting" @click="onSubmit('form')">提交</el-button>
      </el-form-item>
      <el-form-item v-if="formData.error">
        <el-alert 
        type="error" 
        :title="formData.errorText" 
        :closable="true" 
        style="line-height: 1.2; width: 280px;" 
        @close="formData.error = false"></el-alert>
      </el-form-item>
    </el-form>
  </section>
</template>

<script>
import base64 from 'base-64'

import Api from '../api/index.js'

export default {
  data () {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入旧密码'))
      } else {
        callback()
      }
    }
    var validatePass1 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入新密码'))
      } else {
        if (this.formData.newPass !== '') {
          if (this.formData.newPass.length < 8) {
            callback(new Error('密码最小长度为8个字符'))
          } else {
            var reg = /(((?=.*[a-z])+(?=.*[A-Z])+(?=.*\d)+)|((?=.*[A-Z])+(?=.*[a-z])+(?=.*[~!@#$%^&*()<>?_+{}|])+)|((?=.*\d)+(?=.*[A-Z])+(?=.*[~!@#$%^&*()<>?_+{}|])+)|((?=.*\d)+(?=.*[a-z])+(?=.*[~!@#$%^&*()<>?_+{}|])+))[A-Za-z\d~!@#$%^&*()<>?_+{}|]/
            // console.log(reg.test(this.formData.newPass))
            if (!reg.test(this.formData.newPass)) {
              callback(new Error('密码输入规则有误，请阅读下边规则'))
            } else {
              this.$refs.form.validateField('checkPass')
            }
          }
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入新密码'))
      } else if (value !== this.formData.newPass) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }

    return {
      formData: {
        oldPass: '',
        newPass: '',
        checkPass: '',
        submiting: false,
        error: false,
        errorText: ''
      },
      rules: {
        oldPass: [
          {validator: validatePass, trigger: 'blur'}
        ],
        newPass: [
          {validator: validatePass1, trigger: 'blur'},
          {validator: validatePass1, trigger: 'change'}
        ],
        checkPass: [
          {validator: validatePass2, trigger: 'blur'}
        ]
      }
    }
  },
  computed: {
    gisopUserInfo() {
      return this.$store.state.gisopUserInfo
    }
  },
  mounted () {
    this.userguid = this.gisopUserInfo.userguid
    
    if (this.userguid === undefined) {
      return false
    } else {
      this.userguid = this.userguid.trim()
    }
  },
  methods: {
    handleInputChange() {
      this.formData.error = false
    },
    onSubmit (formName) {
      this.formData.error = false
      this.formData.submiting = true
      this.$refs[formName].validate((valid) => {
        if (valid) {
          Api.modifyUserPassword(this.userguid, base64.encode(this.formData.oldPass), base64.encode(this.formData.newPass)).then(data => {
            this.formData.submiting = false
            this.$router.go(-1)
            if (data.status === 0) {
              this.$message({
                type: 'success',
                message: '修改密码成功，请重新登录'
              })
              window.localStorage.removeItem('gisopUserInfo')
              window.sessionStorage.setItem('redirect', this.$route.fullPath)

              this.$router.replace('/login')
              this.$store.dispatch('setGisopUser', {})
            } else {
              this.$message({
                type: 'warning',
                message: data.message
              })
            }
          })
          .catch(res => {
            this.$message({
              type: 'error',
              message: '请求数据失败'
            })
          })
        } else {
          this.formData.submiting = false
          // console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="scss">
  .modifyPass {
    padding: 0 12px;

    .el-input {
      display: inline-block;
      width: 280px;
    }
    span.tips {
      margin-left: 10px;
      margin-top: 10px;
      display: inline-block;
      width: 300px;
      vertical-align: top;
      font-size: 12px;
      color: #768394;
      line-height: 14px;
    }
  }
</style>
