<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>更換頭像</span>
    </div>
    <div>
      <!-- 圖片，用來展示用戶選擇的頭像 -->
      <img :src="Avatar" alt="" style="width:350px;"  v-if="Avatar"/>
      <img src="../../../assets/images/avatar.jpg" alt=""  v-else />

      <!-- 按鈕區(qū)域 -->
      <div class="btn-box">
        <input type="file" style="display:none;" ref="refIpt" @change="onIptChange">
        <el-button type="primary" icon="el-icon-plus" @click="chooseImg">選擇圖片</el-button>
        <el-button type="success" icon="el-icon-upload" :disabled="Avatar===''"  @click="upLoadAvatar">上傳頭像</el-button>
      </div>
    </div>
  </el-card>
</template>

<script>
export default {
  name: 'UserAvatar',
  data () {
    return {
      // 聲明一個變量存儲轉(zhuǎn)好的base64進制
      Avatar: ''
    }
  },
  methods: {
    // 點擊button觸發(fā)input點擊事件
    chooseImg () {
      this.$refs.refIpt.click()
    },
    // input內(nèi)容改變事件
    // e拿到事件對象
    onIptChange (e) {
      // e.target.files是個偽數(shù)組/可以通過長度判斷用戶是否選擇了圖片
      if (e.target.files.length === 0) {
        // 點擊了取消了,就恢復默認圖片
        this.Avatar = ''
      } else {
        // FileReader 瀏覽器提供的方法
        const reader = new FileReader()
        // reader里面有個方法readAsDataURL 可以將圖片轉(zhuǎn)base64進制
        reader.readAsDataURL(e.target.files[0])
        // onload可以監(jiān)聽轉(zhuǎn)換完成后
        reader.onload = () => {
        // 給聲明變量賦值
          this.Avatar = reader.result
        }
      }
    },
    // 點擊上傳頭像
    async  upLoadAvatar () {
      // 發(fā)送axios 上傳
      const { data: res } = await this.$http.patch('/my/update/avatar', { avatar: this.Avatar })
      // 判斷業(yè)務狀態(tài)碼是否上傳成功給出提示
      if (res.code !== 0) return this.$message.error(res.message)
      console.log(res)
      this.$message.success(res.message)
      // 上傳成功發(fā)送重新發(fā)送axios獲取最新用戶信息
      this.$store.dispatch('initUserInfo')
    }
  }

}
</script>