<template>
  <v-row justify="center" align="center">
    <v-col>
      <v-card
        class="mx-auto"
        outlined
      >
        <v-row justify="center">
          <v-col cols="10">
            <h2>头像修改</h2>
          </v-col>
        </v-row>
        <v-row justify="center">
          <v-col cols="10">
            <v-avatar size="100">
              <v-img :src="userInfo.avatarUrl" />
            </v-avatar>
          </v-col>
        </v-row>
        <v-row justify="center">
          <v-col cols="10">
            <v-file-input
              :rules="rules"
              accept="image/png, image/jpeg, image/bmp"
              placeholder="选择头像"
              prepend-icon="mdi-camera"
              label="头像"
              @change="setFile"
            />
            <v-btn color="primary" @click="uploadFile">
              上传
            </v-btn>
          </v-col>
        </v-row>
        <v-row justify="center">
          <v-col cols="10">
            <v-btn color="primary" @click="save">
              保存
            </v-btn>
          </v-col>
        </v-row>
      </v-card>
    </v-col>
    <v-snackbar
      v-model="showMessage"
      :top="true"
      :timeout="3000"
    >
      {{ message }}

      <template v-slot:action="{ attrs }">
        <v-btn
          color="pink"
          text
          v-bind="attrs"
          @click="showMessage = false"
        >
          关闭
        </v-btn>
      </template>
    </v-snackbar>
  </v-row>
</template>

<script>

export default {
  name: 'UserSetting',
  data() {
    return {
      userInfo: {
        username: ''
      },
      avatarFile: null,
      files: [],
      rules: [
        value => !value || value.size < 2000000 || '头像大小必须在2MB以内！'
      ],
      showMessage: false,
      message: ''
    }
  },
  created() {
    this.userInfo = this.$store.state.user.userInfo
  },
  methods: {
    setFile(value) {
      this.avatarFile = value
      this.files = []
      this.files.push(value)
    },
    uploadFile() {
      if (this.files.length === 0) {
        this.message = '请先选择图片，然后上传！'
        this.showMessage = true
        return
      }
      const formData = new FormData()
      formData.append('videoFileId', 'test')
      formData.append('file', this.avatarFile)
      fetch(`//api.reghao.cn/api/file/upload/image`, {
        headers: {
          'X-XSRF-TOKEN': this.$cookies.get('XSRF-TOKEN')
        },
        method: 'POST',
        credentials: 'include',
        body: formData
      }).then(response => response.json())
        .then(json => {
          if (json.code === 0) {
            this.userInfo.avatarUrl = json.data.imageUrl
            this.message = '上传成功，请点击保存，保存头像设置！'
            this.showMessage = true
          } else {
            this.message = '上传失败，请重试！' + json.message
            this.showMessage = true
          }
        })
        .catch(e => {
          return null
        })
    },
    save() {
      fetch(`/api/user/update/avatar`, {
        headers: {
          'Content-Type': 'application/json; charset=UTF-8',
          'X-XSRF-TOKEN': this.$cookies.get('XSRF-TOKEN')
        },
        method: 'POST',
        credentials: 'include',
        body: JSON.stringify(this.userInfo)
      }).then(response => response.json())
        .then(json => {
          if (json.status === 200) {
            this.$store.commit('user/SET_USER_INFO', this.userInfo)
            this.message = '保存成功！'
            this.showMessage = true
          } else {
            //
            this.message = '保存失败！' + json.message
            this.showMessage = true
          }
        })
        .catch(e => {
          return null
        })
    }
  }
}
</script>

<style>

</style>
