<template>
  <div
    style="background: #b2c573"
    class="mt-5 d-flex justify-center parent-container py-10"
  >
    <!-- <input
      type="file"
      @change="onFileChanged($event)"
      accept="image/*"
      capture
    />
    <button @click="uploadImage()">Upload</button> -->
    <v-row align="center" justify="center">
      <v-col cols="12" md="8">
        <v-card color="#4C884C" class="pa-5 text-center h-100" elevated>
          <div class="text-sub text-left">
            <v-icon icon="mdi-plus-box-multiple"></v-icon>
            เพิ่มรูปภาพ
          </div>
          <!-- {{url}} -->
          <v-avatar size="200" color="grey" class="elevation-3">
            <v-img :src="url" v-if="url"></v-img>
            <v-icon dark v-else size="80"> mdi-account </v-icon>
          </v-avatar>

          <v-file-input
            label="แนบรูปภาพ"
            accept="image/png, image/jpeg, image/bmp"
            placeholder="แนบรูปภาพไฟล์ png/jpeg/jpg"
            prepend-inner-icon="mdi-camera"
            prepend-icon=""
            variant="solo-filled"
            class="mt-5"
            v-model="image"
            @change="onFileChanged($event)"
          ></v-file-input>
          <v-btn
            color="#DD6C31"
            class="mt-4"
            height="40"
            @click="uploadImage()"
            :disabled="image == null"
          >
            <span class="text-sub2">upload</span>
          </v-btn>
        </v-card>
      </v-col>
    </v-row>
  </div>
</template>
<script>
import { client } from "@/utils/trpc";
import { createFormData } from "@/utils/fileUpload";
export default {
  watch: {
    image(val) {
      console.log(val);
      if (val == undefined) {
        this.url = null;
        this.image = null;
      }
    },
  },
  data: () => ({
    file: null,
    url: null,
    image: null,
  }),
  methods: {
    Preview_image() {
      // console.log('this.image', this.image)
      if (this.image && this.image !== null) {
        const reader = new FileReader();
        reader.onload = (event) => {
          console.log(event.target.result);
          this.url = event.target.result;
        };
        reader.readAsDataURL(this.image);
        console.log();
      } else {
        this.url = null;
      }
    },
    onFileChanged(event) {
      const file = event.target.files[0];
      this.file = file;
      if (this.file && this.file !== null) {
        const reader = new FileReader();
        reader.onload = (event) => {
          console.log(event.target.result);
          this.url = event.target.result;
        };
        reader.readAsDataURL(this.file);
        console.log();
      } else {
        this.url = null;
      }
    },

    async uploadImage() {
      if (!this.file) {
        return;
      }
      let request = await client.user.requestChangeImage.mutate({
        imageName: this.file.name,
        contentType: this.file.type,
      });
      let formData = createFormData(request, this.file);
      await fetch(request.postURL, {
        method: "POST",
        body: formData,
      }).then(() => {
        client.user.confirmChangeImage.mutate();
      });
      console.log("done");
    },
  },
};
</script>
<style></style>
