<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>