<template>
  <div>
    <div class="title">个人资料</div>
    <div class="content-container">
      <el-tabs v-model="activeName">
        <el-tab-pane label="基本信息" name="first">
          <div class="avatar">
            <el-avatar :size="100" :src="circleUrl" />
            <span class="edit">
              <svg-icon icon-class="编辑" />
            </span>
          </div>
          <div class="form-custom">
            <UserForm
              v-loading="loading"
              :roledata="roledata"
              :propsformdata="pdata"
              element-loading-text="拼命加载中"
              @handlesubmit="handleForm"
            />
          </div>
        </el-tab-pane>
        <el-tab-pane label="修改密码" name="second">
          <div class="form-container-text">
            <el-form ref="ruleForm" :model="ruleForm" status-icon :rules="rules" label-width="70px" class="demo-ruleForm">
              <el-form-item label="旧密码" prop="old_password">
                <el-input v-model="ruleForm.old_password" type="password" autocomplete="off" show-password />
              </el-form-item>
              <el-form-item label="新密码" prop="new_password">
                <el-input v-model="ruleForm.new_password" type="password" autocomplete="off" show-password />
              </el-form-item>
              <el-form-item label="确认密码" prop="new_password1">
                <el-input v-model="ruleForm.new_password1" type="password" autocomplete="off" show-password />
              </el-form-item>
            </el-form>
            <div style="text-align: center">
              <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { update_password, getinfo } from '@/api/common'
import stringify from '@/utils/stringify'
import UserForm from '@/components/UserForm'
import { get_role_name_list, update } from '@/api/user/user'
export default {
  name: 'User',
  components: { UserForm },
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.ruleForm.new_password1 !== '') {
          this.$refs.ruleForm.validateField('new_password1')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.ruleForm.new_password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      pdata: {},
      circleUrl: 'https://t7.baidu.com/it/u=2006997523,200382512&fm=193&f=GIF',
      activeName: 'first',
      roledata: [],
      loading: false,
      ruleForm: {
        new_password: '',
        new_password1: '',
        old_password: ''
      },
      rules: {
        new_password: [
          { validator: validatePass, trigger: 'blur' }
        ],
        new_password1: [
          { validator: validatePass2, trigger: 'blur' }
        ],
        old_password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    get_role_name_list().then(
      res => {
        this.roledata = res.data
      }
    )
    this.getUserInfo()
  },
  methods: {
    getUserInfo() {
      this.loading = true
      getinfo().then(res => {
        this.pdata = res.data
      }).finally(() => { this.loading = false })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          update_password(stringify(this.ruleForm)).then(res => {
            this.$store.commit('user/SET_TOKEN', res.data.token)
            this.$message.success(res.msg)
          })
        } else {
          return false
        }
      })
    },
    handleForm(form) {
      const data = { ...this.pdata, ...form }
      update(stringify(data)).then(res => {
        this.$message.success(res.msg)
        this.dialogVisible = false
        this.getUserInfo()
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style scoped>
.title {
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  color: #303133;
  line-height: 0px;
  margin: 3rem 0 3rem 0;
}
.content-container{
    margin: 0 20rem 0 20rem;
    background: white;
}
.el-tabs{
  padding: 2rem 3rem 2rem 3rem;
}
.form-container-text {
  margin: 6rem 13rem 6rem 13rem;
}
.avatar {
  text-align: center;
  margin-top:2.6875rem;
}
.form-custom{
  margin: 3rem 0 5rem 0;
}
.edit{
  background: #FFFFFF;
  opacity: 1;
  border: 1px solid #EEEEEE;
  border-radius: 50%;
  padding: 0.4rem;
  position: relative;
  bottom: 7px;
  right: 30px;
}
</style>
