<template>
  <div class="right-forgotPassword-body">
    <div class="header-title">
      <h2 class="title">forgot</h2>
    </div>
    <div class="form-cont">
      <el-form :model="forgotForm" :rules="forgotFormRules"
               ref="forgotForm" label-width="7rem"
               @submit.native.prevent
               class="user-forgotForm">
        <el-form-item label="账号" prop="userId">
          <el-input v-model="forgotForm.phone"
                    placeholder="请输入注册手机号"></el-input>
        </el-form-item>
        <el-form-item label="密保问题" prop="passwordQuestion">
          <el-select v-model="forgotForm.ncryptedProble" placeholder="您设置的密保问题">
            <el-option
              v-for='item in questionList'
              :key='item'
              :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="密保答案" prop="questionAnswer">
          <el-input v-model="forgotForm.ncryptedAnswers"
                    placeholder="您设置的密保答案"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type='password'
                    v-model="forgotForm.password"
                    placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="repassword">
          <el-input type='password'
                    v-model="forgotForm.repassword"
                    placeholder="请再确认密码"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="right-cont-btn">
      <el-button type="primary" v-on:click="submitForm()">找回</el-button>
      <el-button v-on:click="resetForm()">重置</el-button>
    </div>
    <div class="footer">
      <router-link class="link footer-left" to="/login">登录</router-link>
      <router-link class="link footer-right" to="/register">注册</router-link>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data () {
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.forgotForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      questionList: [
        '最喜欢的食物',
        '最敬爱的人',
        '小学班主任老师',
        '最喜欢的电影'
      ],
      forgotForm: {
        phone: '',
        ncryptedProble: '',
        ncryptedAnswers: '',
        password: '',
        repassword: ''
      },
      forgotFormRules: {
        phone: [
          {required: true, message: '请输入账号', trigger: 'blur'},
          {pattern: /^1[3-8][0-9]{9}$/, message: '手机号格式不正确', trigger: 'blur'}
        ],
        ncryptedProble: [
          {required: true, message: '请选择密保问题', trigger: 'change'}
        ],
        ncryptedAnswers: [
          {required: true, message: '请选择密保答案', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 6, max: 30, message: '长度在 6 到 30 个字符'},
          {pattern: /^(\w){6,20}$/, message: '只能输入6-20个字母、数字、下划线'}
        ],
        repassword: [
          {required: true, validator: validatePass2, trigger: 'blur'}
        ]
      }
    }
  },
  mounted () {
    window.onkeydown = (e) => {
      let key = window.event.keyCode
      // eslint-disable-next-line eqeqeq
      if (key == 13) {
        this.submitForm('forgotForm')
      }
    }
  },
  methods: {
    submitForm () {
      this.$refs.forgotForm.validate((valid) => {
        let data
        if (valid) {
          data = {
            phone: this.forgotForm.phone,
            ncryptedProble: this.forgotForm.ncryptedProble,
            ncryptedAnswers: this.forgotForm.ncryptedAnswers,
            password: this.forgotForm.password,
            repassword: this.forgotForm.repassword
          }
          // const baseUrl = 'http://localhost:8083/api/'
          // const baseUrl = 'https://api.tomey.live/api/'
          const baseUrl = 'http://mytwins.top/api/'
          axios({
            method: 'post',
            url: baseUrl + 'forgot',
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
            },
            data: qs.stringify(data, {arrayFormat: 'brackets'})
          }).then(res => {
            console.log(res)
          })
          this.$notify({
            title: '登录失败',
            message: res.msg,
            duration: 2000,
            type: 'error'
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm () {
      this.$refs.forgotForm.resetFields()
    }
  }

}
</script>

<style lang='scss'>
.right-forgotPassword-body {
  position: relative;
  width: 100%;
  height: 100%;

  .header-title {
    height: 4rem;

    .title {
      line-height: 4rem;
      font-size: 1rem;
      letter-spacing: 0.05rem;
      color: #555;
    }
  }

  .form-cont {
    width: 90%;
    margin-top: 1rem;

    .el-form-item {
      margin-bottom: 1.1rem;
    }

    // 密保问题
    .el-select {
      width: 100%;
    }

    // 登录按钮
    .el-button--primary {
      margin-right: 0.5rem;
    }
  }
}
</style>
