<!--  -->
<template>
  <div>
    <main-top :crumb="crumbData"></main-top>
    <div class="table-interface">
      <div class="top-body">
        <div class="body-middle">
          <el-form :rules="ruleForget" status-icon :model="formForget" ref="formForget">
            <el-form-item prop="password">
              <el-input v-model="formForget.password" placeholder="当前密码" type="password"></el-input>
            </el-form-item>
            <el-form-item prop="newPassword">
              <el-input v-model="formForget.newPassword" placeholder="新密码" type="password"></el-input>
            </el-form-item>
            <el-form-item prop="repeatPassword">
              <el-input v-model="formForget.repeatPassword" placeholder="重复新密码" type="password"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button style="width:100%" type="primary" @click="submitForm('formForget')">确定</el-button>
              <!-- <el-button>取消</el-button> -->
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

import MainTop from '@/components/main-top'
const crumbData = [
  {
    name: '密码修改',
    id: 8
  }
]

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {
    MainTop
  },
  data () {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入新密码'))
      } else {
        if (this.formForget.newPassword !== '') {
          this.$refs.formForget.validateField('comfirm')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.formForget.newPassword) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }

    // 这里存放数据
    return {
      crumbData,
      formForget: {
        password: '',
        newPassword: '',
        repeatPassword: '',
        id: ''
      },
      ruleForget: {
        password: [{ required: true, message: '请输入当前密码', trigger: 'blur' }],
        newPassword: [{ required: true, validator: validatePass, trigger: 'blur' }],
        repeatPassword: [{ required: true, validator: validatePass2, trigger: 'blur' }]
      }
    }
  },
  mounted () {
    let userInfo = window.localStorage.getItem('userInfo') || ''
    let tmp = ''
    if (userInfo) {
      tmp = JSON.parse(userInfo)
      this.formForget.id = tmp.user.id
    }
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.handleSubmitClick()
        } else {
          return false
        }
      })
    },
    handleSubmitClick () {
      this.$http({
        url: '/user/updatePassword',
        method: 'post',
        data: this.formForget
      }).then(res => {
        if (res.code === 0) {
          this.$notify.success({
            title: '提示',
            message: '修改成功',
            duration: 2000,
            onClose: () => {
              window.localStorage.setItem('userInfo', '')
              window.localStorage.setItem('token', '')
              this.$router.push({name: 'login'})
            }
          })
        } else {
          this.$notify.error({
            title: '错误',
            message: res.msg,
            duration: 2000
          })
        }
      })
    }
  }
}
</script>

<style scoped>
/* 引入公共css类 */
@import url(./style);
</style>
