<template>
  <div v-if="productData">
    <div class="text-right">
      <Button
        type="primary"
        :disabled="isAddedSpy"
        @click.native="addTracker"
      >
        <span v-if="isAddedSpy">{{ $t('PRODUCT_ADD_TRACKED_BTN') }}</span>
        <span v-else>{{ $t('PRODUCT_ADD_TRACKER_BTN') }}</span>
      </Button>
      <div class="mt-5">
        <router-link
          to="/shopee/spy/dashboard"
          target="_blank"
        >
          {{ $t('OPEN_SPY_LIST') }}
        </router-link>
      </div>
    </div>
    <h2 class="mb-20">
      {{ productData.name }}
    </h2>
    <div class="mb-20">
      <Table
        :columns="tableVariation.columns"
        :data="tableVariation.data"
      >
        <template
          slot="image"
          slot-scope="{ row }"
        >
          <img
            v-if="row.image"
            :src="row.image"
            style="width: 50px"
          >
        </template>
      </Table>
    </div>
    <div class="mb-20">
      <Tag
        v-for="(tag, index) in renderProduct.listTag"
        :key="index"
        color="primary"
      >
        {{ tag }}
      </Tag>
    </div>
    <div class="mb-20">
      <image-gallery :list-image="renderProduct.listImage" />
    </div>
  </div>
</template>

<script>
import mixin from '../mixin/Product';
import ImageGallery from '@/vue/components/Shopee/Product/Image/Gallery.vue';

export default {
  name: 'ShopeeSpyProduct',
  mixins: [mixin],
  components: {
    'image-gallery': ImageGallery,
  },
};
</script>

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