<template>
  <div
    v-if="productData"
    class="sp-product"
  >
    <div class="sp-product__toolbar">
      <Button
        type="primary"
        class="sp-product__track"
        :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>
      <router-link
        class="sp-product__link"
        to="/shopee/spy/dashboard"
        target="_blank"
      >
        {{ $t('OPEN_SPY_LIST') }}
      </router-link>
    </div>
    <h2 class="sp-product__title">
      {{ productData.name }}
    </h2>
    <div class="sp-product__section">
      <Table
        :columns="tableVariation.columns"
        :data="tableVariation.data"
      >
        <template
          slot="image"
          slot-scope="{ row }"
        >
          <img
            v-if="row.image"
            class="sp-product__thumb"
            :src="row.image"
          >
        </template>
      </Table>
    </div>
    <div class="sp-product__section sp-product__tags">
      <Tag
        v-for="(tag, index) in renderProduct.listTag"
        :key="index"
        color="primary"
      >
        {{ tag }}
      </Tag>
    </div>
    <div class="sp-product__section">
      <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>
@import '@/vue/styles/tokens.scss';

.sp-product {
  display: flex;
  flex-direction: column;
  gap: 20px;

  &__toolbar {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
  }

  &__link {
    font-size: 13px;
    color: $c-link;
    transition: color $motion-fast;

    &:hover {
      color: $c-link-hover;
    }
  }

  &__title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: $c-text-strong;
    @include line-clamp(2);
  }

  &__thumb {
    width: 50px;
    border-radius: $radius-sm;
    display: block;
  }

  &__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
}
</style>
