<template>
  <div>
    <div v-if="!fetchReview.started">
      <div class="mt-50">
        <div style="width: 40%; margin: auto">
          <div>
            <Select
              v-model="filterSelect"
              multiple
            >
              <Option
                v-for="item in listFilter"
                :key="item.key"
                :value="item.key"
              >
                {{ item.label }}
              </Option>
            </Select>
          </div>
          <div class="mt-10">
            <Button
              type="primary"
              :loading="fetchReview.loading"
              long
              @click="fetchReviewHandler"
            >
              <span v-if="fetchReview.process">{{ fetchReview.process }}</span>
              <span v-else>{{ $t('REVIEW_FETCH_BTN') }}</span>
            </Button>
          </div>
        </div>
      </div>
    </div>
    <div v-else>
      <h1 class="mb-10">
        {{ productName }}
      </h1>
      <Row class="mb-10">
        <Col :span="12">
          <Button
            type="primary"
            :loading="downloader.loading"
            :disabled="downloader.loading"
            @click.native="downloadHandler"
          >
            <span>{{ $t('REVIEW_DOWNLOAD_SELECTED') }}</span>
            <span class="ml-5">{{ downloadProcess }}</span>
          </Button>
        </Col>
        <Col
          class="text-right"
          :span="12"
        >
          <excel-download
            :data="exportExcel.data"
            :fields="exportExcel.column"
            :worksheet="exportExcel.sheet"
            :name="exportExcel.file"
          >
            <Button type="success">
              {{ $t('EXPORT_EXCEL_RESULT') }}
            </Button>
          </excel-download>
          <div class="mt-10">
            <Page
              v-model="pagging.current"
              :total="pagging.total"
              :page-size="pagging.limit"
              :model-value="pagging.current"
              show-sizer
              show-total
              :page-size-opts="pagging.size"
              @on-change="onPaggingChange"
              @on-page-size-change="onPaggingSize"
            />
          </div>
        </Col>
      </Row>
      <Row>
        <Col :span="24">
          <Table
            ref="TableReview"
            :columns="tableColumn"
            :data="listReviewShow"
            border
            highlight-row
            size="small"
            height="700"
          >
            <template
              slot="image"
              slot-scope="{ row }"
            >
              <span
                v-for="(image, index) in row.listImage"
                :key="index"
              >
                <img
                  v-lazy="imageZip(image)"
                  style="width: 50px; padding: 5px"
                  class="hand-hover"
                  @click="openExternalUrl(image)"
                >
                <Icon
                  class="hand-hover"
                  type="md-download"
                  @click="saveAsUrl(image, '.jpg')"
                />
              </span>
            </template>
            <template
              slot="video"
              slot-scope="{ row }"
            >
              <span
                v-for="(video, index) in row.listVideo"
                :key="index"
              >
                <img
                  v-lazy="imageZip(video.image)"
                  style="width: 50px; padding: 5px"
                  class="hand-hover"
                  @click="openExternalUrl(video.url)"
                >
                <Icon
                  class="hand-hover"
                  type="md-download"
                  @click="saveAsUrl(video.url, '.mp4')"
                />
              </span>
            </template>
          </Table>
        </Col>
      </Row>
    </div>
  </div>
</template>

<script>
import mixin from './mixin/Get';
import ExcelDownload from 'vue-json-excel';

export default {
  name: 'ShopeeReviewGet',
  components: {
    'excel-download': ExcelDownload,
  },
  mixins: [mixin],
};
</script>
