<template>
  <div>
    <div class="con-title">{{ $t('avatar.title') }}</div>
    <div class="con-box">
      <el-row justify="center">
        <el-col :xs="24" :sm="9" :md="8" :lg="7" :xl="6">
          <div class="pic-show">
            <img :src="imgUrl" alt />
          </div>
        </el-col>
        <el-col :xs="24" :sm="15" :md="16" :lg="17" :xl="18">
          <div class="info">
            {{ $t('avatar.student') }}
            <b>{{ user.student_name }}</b>
          </div>
          <div class="info">{{ $t('avatar.studentnum') }}{{ user.student_no }}</div>
          <div class="info" style="display: none">{{ $t('avatar.studentid') }}{{ user.student_id }}</div>
          <div class="info" style="display: none">{{ $t('avatar.studentsoid') }}{{ user.sso_id }}</div>
          <div class="info">{{ $t('avatar.msg') }}</div>
          <el-upload
            ref="upFile"
            class="upload-demo"
            action
            :multiple="false"
            :limit="1"
            :show-file-list="false"
            :on-change="handleChange"
            :http-request="uploadFile"
            :file-list="filesArr"
          >
            <el-button type="primary">{{ $t('avatar.clickup') }}</el-button>
          </el-upload>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import action from '@action'
import { uploadFile } from '@/api/common'

export default {
  components: {},
  data() {
    const Gu = window.G.UserInfo
    return {
      imgUrl: Gu.avatar || '',
      user: {
        student_no: Gu.student_info.sno,
        student_name: Gu.student_info.personal_name,
        student_id: Gu.student_info.id,
        sso_id: Gu.id
      },
      file: {
        id: 'WU_FILE_0',
        name: '',
        type: '',
        lastModifiedDate: '',
        size: '',
        file: ''
      },
      filesArr: []
    }
  },
  methods: {
    handleChange(file, filelist) {
      this.file.name = file.raw.name
      this.file.type = file.raw.type
      this.file.lastModifiedDate = file.raw.lastModifiedDate
      this.file.size = file.raw.size
      this.file.file = file.raw
    },
    uploadFile() {
      if (!/\.(jpg|jpeg|gif|png|bmp)$/gi.test(this.file.name)) {
        this.$message.error('文件格式不对，请重新上传')
        this.filesArr.pop()
        return
      }
      const loading = this.$loading({
        lock: true,
        text: '',
        spinner: '',
        background: 'rgba(255, 255, 255, 0.9)'
      })
      uploadFile(this.file)
        .then(data => {
          this.imgUrl = data.url
          this.updateUser()
        })
        .catch(() => {
          this.filesArr.pop()
        })
        .finally(() => {
          loading.close()
        })
    },
    updateUser() {
      action.Other.updateUser({
        SsoBasicUser: {
          info: {
            avatar: this.imgUrl
          }
        }
      }).then(data => {
        window.G.UserInfo.avatar = this.imgUrl
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.pic-show {
  position: relative;
  display: block;
  margin: 0 auto;
  width: 2rem;
  height: 2rem;
  background: #ffffff url('../../assets/images/person-default.jpg') center center no-repeat;
  background-size: cover;
  border: 1px solid #e6e3e3;
  border-radius: 50%;
  overflow: hidden;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.info {
  margin-top: 0.2rem;
}

.upload-demo {
  display: block;
  margin: 0.2rem 0 0 0;
}

@media (max-width: 767px) {
  .info {
    margin-top: 0.2rem;
    text-align: center;
  }

  .upload-demo {
    text-align: center;
  }
}
</style>
