<template>
  <div
    class="columns mx-0"
    v-if="picture"
  >
    <div
      class="column is-narrow"
      style="border-right: 2px solid #d3d3d3"
      v-if="viewport > 1"
    >
      <div
        class="pr-2"
        style="max-height: 700px; overflow-y: auto"
      >
        <div
          v-for="(v, i) in picture"
          class="pb-4"
        >
          <figure
            class="image is-clickable"
            style="width: 80px"
            @click="current = i"
          >
            <img :src="v.image" />
          </figure>
        </div>
      </div>
    </div>
    <div class="column">
      <b-carousel
        :autoplay="false"
        :indicator="viewport === 1 ? true : false"
        icon-size="is-medium"
        v-model="current"
      >
        <b-carousel-item
          v-for="(item, i) in picture"
          :key="i"
        >
          <ChipImage
            @remove="check(item, i)"
            v-bind="{
              extend: false,
              image: item.image,
              file: item.file,
              show: ['download', 'delete'],
            }"
          ></ChipImage>
        </b-carousel-item>
      </b-carousel>
    </div>
  </div>
</template>
<script>
export default {
  props: ["row", "image", "pagename", "api"],
  data() {
    return {
      current: 0,
      picture: undefined,
      timer: undefined,
    };
  },
  async created() {
    let arr = [];
    let files = await this.$getdata("file", { file__in: this.image });
    this.image.map((v) => {
      let found = this.$find(files, { file: v });
      arr.push({ image: `${this.$getpath()}download/?name=${v}`, file: found });
    });
    this.picture = arr;
  },
  computed: {
    viewport: {
      get: function () {
        return this.$store.state.viewport;
      },
      set: function (val) {
        this.$store.commit("updateViewPort", { viewport: val });
      },
    },
  },
  methods: {
    check(v, i) {
      if (!this.timer) this.timer = setTimeout(() => this.remove(v, i), 200);
    },
    async remove(v, i) {
      this.$delete(this.picture, i);
      await this.$deleteapi(this.api, v.file.id);
      this.timer = undefined;
      if (this.picture.length === 0) this.$emit("close");
    },
  },
};
</script>
