<template>
  <div>
    <div class="con-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">学员姓名：<b>{{user.student_name}}</b></div>
          <div class="info">学员学号：{{user.student_no}}</div>
          <div class="info" style="display: none;">学员sid：{{user.student_id}}</div>
          <div class="info" style="display: none;">学员sso_id：{{user.sso_id}}</div>
          <div class="info">支持jpg、gif、png或bmp格式的图片，建议文件小于5M</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">点击上传</el-button>
          </el-upload>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { request } from '@action'

export default {
  components: { },
  data () {
    const Gu = this.$GlobalVariable.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: '',
        avatar: ''
      },
      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.avatar = file.raw
      // try {
      //   /* 这个必然是IE */
      //   let stream = new ActiveXObject('ADODB.Stream') // eslint-disable-line
      //   stream.type = 1
      //   stream.open()
      //   // console.log(this.$refs.upFile.$el.children[0].children[1].files[0])
      //   debugger
      //   // stream.loadFromFile(filename)
      //   // text = stream.readText(adReadAll)
      //   // stream.close()
      // } catch (e) {
      //   let reader = new FileReader() // eslint-disable-line
      //   reader.readAsBinaryString(this.$refs.upFile.$el.children[0].children[1].files[0]) // 这个读法是异步的
      //   reader.onloadend = () => {
      //     // 这个事件在读取结束后，无论成功或者失败都会触发
      //     if (reader.error) {
      //       /* 文件读取失败 */
      //       this.$message.error('文件读取失败，请重试')
      //     } else {
      //       this.file.avatar = reader.result
      //     }
      //   }
      // }
    },
    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)' })
      request({
        component: this,
        actionName: 'loginAction',
        functionName: 'updatePic',
        data: this.file,
        thenCallback: data => {
          this.imgUrl = data.avatar
          this.$GlobalVariable.UserInfo.avatar = data.avatar
          this.filesArr.pop()
        },
        catchCallback: () => { this.filesArr.pop() },
        finallyCallback: () => { loading.close() }
      })
    }
  }
}
</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 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
  }
}
.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>
