<template>
  <div class="container">
    <el-form :model="form" :rules="rules" ref="form" label-width="80px">
      <el-form-item label="姓名">
        {{ form.name }}
      </el-form-item>
      <el-form-item label="手机号">
        {{ form.mobile }}
      </el-form-item>
      <el-form-item label="证书编号">
        {{ form.number }}
      </el-form-item>
      <el-form-item prop="avatar" label="头像">
        <upload-image v-model="form.avatar"></upload-image>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSubmit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import UploadImage from '@/components/upload/UploadImage.vue'
import { getAvatar, uploadAvatar } from '@/api/my.js'
export default {
  components: { UploadImage },
  data() {
    return {
      form: { avatar: '' },
      rules: {
        avatar: [{ required: true, message: '请上传头像', trigger: 'change' }]
      }
    }
  },
  beforeMount() {
    this.getAvatar()
  },
  methods: {
    handleSubmit() {
      this.$refs.form.validate().then(() => {
        this.uploadAvatar()
      })
    },
    getAvatar() {
      getAvatar().then(res => {
        if (res.status === 400) {
          this.$message.error(res.message)
        } else if (res.status === 403) {
          this.$router.push({ query: { needLogin: Date.now() } })
        } else {
          this.form = res.date
        }
      })
    },
    uploadAvatar() {
      uploadAvatar({ avatar: this.form.avatar }).then(res => {
        if (res.status) {
          this.$message.error(res.message)
        } else {
          this.$message({ type: 'success', message: '提交成功' })
        }
      })
    }
  }
}
</script>

<style scoped>
.container {
  max-width: 970px;
  margin: 0 auto;
}
</style>
