<template>
  <div>
    <div v-if="listImage.length">
      <Collapse v-model="imageCollapse">
        <Panel
          v-for="(listImageItem, key) in listGroupImage"
          :key="key"
          :name="key"
        >
          <b>{{ getLabelImage(key) }} ({{ listImageItem.length }})</b>
          <div slot="content">
            <div class="row-end mb-5">
              <Button
                type="warning"
                size="default"
                @click="downloadImageType(key)"
              >
                <span> {{ $t('DOWNLOAD_ALL_IMAGE_PRODUCT') }}</span>
                ({{ listImageItem.length }})
              </Button>
            </div>
            <div>
              <Row :gutter="16">
                <Col
                  v-for="item in listImageItem"
                  :key="item.url"
                  :span="6"
                  class="mb-5"
                >
                  <div
                    style="text-align: center"
                    class="hand-hover"
                    @click="downloadImageUrl(item)"
                  >
                    <img
                      class="img-fluid"
                      :src="item.url"
                    >
                    <span> {{ item.fileName }}</span>
                  </div>
                </Col>
              </Row>
            </div>
          </div>
        </Panel>
      </Collapse>
    </div>
    <div v-else>
      {{ $t('IMAGE_LIST_EMPTY') }}
    </div>
  </div>
</template>

<script>
import groupArray from 'group-array';
import { saveAs } from '@/lib/utils/save';

export default {
  name: 'ShopeeProductImage',
  props: {
    listImage: {
      type: Array,
    },
  },
  data() {
    return {
      imageCollapse: ['main', 'description', 'variation'],
    };
  },
  methods: {
    getLabelImage(label) {
      return this.$t(`IMAGE_LABEL_TYPE.${label}`);
    },
    downloadImageType(type) {
      this.listImage
        .filter((image) => image.type === type)
        .forEach((item) => this.downloadImageUrl(item));
    },
    downloadImageUrl({ url, fileName }) {
      saveAs(url, fileName);
    },
  },
  computed: {
    listGroupImage() {
      return groupArray(this.listImage, 'type');
    },
  },
};
</script>
