<template>
  <div class="row justify-content-center pt-6 pb-6">
    <div class="col-lg-3 order-lg-2">
      <div class="card-profile-image">
        <a href="javascript:void(0)">
          <img
            v-bind:src="imagePreview"
            class="rounded-circle"
            onclick="$('#simg').click()"
            style="width: 140px; height: 140px"
          />
        </a>
        <input
          type="file"
          id="simg"
          name="file"
          style="display: none"
          @change="onSelected"
          accept="image/*"
        />
      </div>
    </div>
    <div
      class=""
      style="position: absolute; top: 10px; right: 10px"
      v-if="imagesBack.images"
    >
      <button
        type="button"
        class="btn btn-icon-only rounded-circle btn-warning"
        @click="removeimg"
      >
        <i class="fas fa-trash-alt"></i>
      </button>
    </div>
  </div>
  <div class="text-center">
    <div class="progress-wrapper" v-if="images.shupload">
      <div class="progress-info">
        <div class="progress-label">
          <span>ກຳລັງອັບໂຫຼດ</span>
        </div>
        <div class="progress-percentage">
          <span>{{ images.percenUp }}%</span>
        </div>
      </div>
      <div class="progress">
        <div
          class="progress-bar bg-primary"
          role="progressbar"
          aria-valuenow="0"
          aria-valuemin="0"
          aria-valuemax="100"
          v-bind:style="{ width: images.percenUp + '%' }"
        ></div>
      </div>
    </div>
    <span class="text-red" v-if="images.upmax"
      >ໄຟລ໌ທີ່ທ່ານອັບໂຫຼດມີຂະໜາດເກີນ 1 Mb</span
    >
  </div>
</template>

<script>
export default {
  name: "UloadimageOne",
  props: {
    imagesBack: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      images: {
        file: null,
        max_size: 1000 * 1204,
        upmax: false,
        percenUp: 0,
        shupload: false,
      },
      imagePreview: window.location.origin + "/images/add_img_bt.png",
    };
  },

  mounted() {},
  watch: {
    'imagesBack.images'() {
      this.checkImg();
    },
  },
  methods: {
    checkImg() {
      if (this.imagesBack.images != null && this.imagesBack.images != "") {
        this.imagePreview = "/images/product/" + this.imagesBack.images;
      } else {
        this.imagePreview = window.location.origin + "/images/add_img_bt.png";
      }
    },
    removeimg() {
      this.$swal
        .fire({
          title: "ທ່ານແນ່ໃຈບໍ່?",
          text: "ທີ່ຈະລຶບຮູບນີ້!",
          icon: "warning",
          showCancelButton: true,
          confirmButtonColor: "#3085d6",
          cancelButtonColor: "#d33",
          confirmButtonText: "ລຶບເລີຍ!",
          cancelButtonText: "ຍົກເລີກ",
        })
        .then((result) => {
          if (result.isConfirmed) {
            this.$Progress.start();
            this.$axios.get("/sanctum/csrf-cookie").then((response) => {
              axios
                .post("/api/img/del_img_product", {
                  image_del: this.imagesBack.images,
                })
                .then((response) => {
                  if (response.data.success) {
                    this.$Progress.finish();
                    this.$notify(
                      {
                        group: "sucess",
                        title: "ສຳເລັດ!",
                        text: " ຮູບໄດ້ຖຶກລຶບແລ້ວ! ",
                      },
                      2000
                    );
                    this.imagesBack.images = "";
                    this.imagePreview =
                      window.location.origin + "/images/add_img_bt.png";
                  } else {
                    this.error = response.data.message;
                    console.error(error);
                    this.$Progress.fail();
                  }
                })
                .catch((error) => {
                  this.$notify(
                    {
                      group: "error",
                      title: "ບໍ່ສຳເລັດ!",
                      text: "ຜິດຜາດ: " + error.message,
                    },
                    4000
                  );
                });
            });
          }
        });
    },
    onSelected(event) {
      this.images.file = event.target.files[0];
      let reader = new FileReader();
      reader.addEventListener(
        "load",
        function () {
          this.imagePreview = reader.result;
        }.bind(this),
        false
      );
      if (this.images.file) {
        if (/\.(jpe?g|png|gif)$/i.test(this.images.file.name)) {
          if (this.images.file.size > this.images.max_size) {
            this.images.upmax = true;
          } else {
            this.UploadImg();
            this.images.upmax = false;
            reader.readAsDataURL(this.images.file);
          }
        }
      }
    },
    UploadImg() {
      this.images.shupload = true;
      let formData = new FormData();
      formData.append("file", this.images.file);
      this.$axios.get("/sanctum/csrf-cookie").then((response) => {
        axios
          .post("/api/img/upload_img_product", formData, {
            headers: { "Content-Type": "multipart/form-data" },
            onUploadProgress: (progressEvent) => {
              this.images.percenUp = Math.round(
                (progressEvent.loaded / progressEvent.total) * 100
              );
              if (this.images.percenUp == 100) {
                this.images.shupload = false;
                this.images.percenUp = 0;
              }
            },
          })
          .then((response) => {
            this.imagesBack.images = response.data.images;
          })
          .catch((error) => {
            this.$notify(
              {
                group: "error",
                title: "ບໍ່ສຳເລັດ!",
                text: "ຜິດຜາດ: " + error.message,
              },
              4000
            );
          });
      });
    },
  },
  created() {
    this.checkImg();
  },
};
</script>

<style lang="scss" scoped>
</style>