<template lang="pug">
  .flex.flex-col.items-center.justify-center(
    :style="{padding: '153px 370px'}"
  )
    .avatar-wrapper.flex.relative
      base-input(
        circle,
        type="file",
        id="image-upload",
        accept="image/.jpg,.jpeg,.png, .jpg",
        @change="(e)=>previewImage(e)",
      )
      .avatar.flex.absolute.items-center.gap-x-6
        img.avatar.object-cover(for="image-upload", :src="image")
        q-btn(
          round,
          color="primary",
          @click="confirm",
          icon="app:icon-ok"
        )
</template>

<script>
import BaseInput from "./BaseInput.vue";
import addImageIcon from "@/assets/icons/photo.svg";
import { v_model } from "@/shared/mixins/v-model";

export default {
  name: "BaseModalUploadPhoto",
  components: { BaseInput, addImageIcon },
  data() {
    return {
      image: addImageIcon,
    };
  },
  mixins: [v_model],
  props: {
    confirmUpload: {
      type: Function,
      default: () => {},
    },
  },
  methods: {
    previewImage(event) {
      let picture = event.target.files;
      let reader = new FileReader();
      reader.onload = (e) => {
        this.image = e.target.result;
      };
      reader.readAsDataURL(picture[0]);
      this.imageData = [...event.target.files];
    },
    confirm() {
      this.value.file = this.imageData;
      this.value.photo = this.image;
      this.confirmUpload();
    },
  },
  created() {
    if (this.value.photo) {
      this.image = this.value.photo;
    }
  },
};
</script>

<style lang="sass" scoped>
.avatar-wrapper
  width: 400px
  height: 400px
  border-radius: 50%
.avatar
  height: 100%
  border-radius: 50%
</style>
