<template>
  <div>
    <loading-app v-if="loading" />
    <Tabs
      v-else
        v-model="tabActive"
        :value="tabActive"
        :animated="false"
        @on-click="onChangeTab"
      >
        <TabPane
          :label="$t('SHOPEE_PRODUCT')"
          name="shopee-product"
        >
          <shopee-product
            v-if="tabActive === 'shopee-product'"
            :product-id="shopeProduct.productId"
            :shop-id="shopeProduct.shopId"
          />
        </TabPane>

        <TabPane
          :label="$t('SHOPEE_TO_TIKTOK')"
          name="tiktok-upload"
        >
          <tiktok-upload v-if="tabActive === 'tiktok-upload'" />
        </TabPane>
        <TabPane
          :label="$t('SHOPEE_TO_LAZADA')"
          name="lazada-upload"
        >
          <lazada-upload v-if="tabActive === 'lazada-upload'" />
        </TabPane>
        <TabPane
          :label="$t('SHOPEE_SHOP')"
          name="shopee-shop"
        >
          <shopee-shop />
        </TabPane>
        <TabPane
          v-if="getBetaMode "
          :label="$t('SHOPEE_AFFILIATE')"
          name="shopee-affiliate"
        >
          <shopee-affiliate v-if="tabActive === 'shopee-affiliate'" />
        </TabPane>
      </Tabs>
  </div>
</template>
<script>
import { TabPane } from 'view-design';
import ShopeeShop from '@/vue/components/Shopee/Seller/Popup.vue';
import ShopeeProduct from '@/vue/components/Shopee/Product/Clone/Index.vue';
import TiktokUpload from '@/vue/components/Tiktok/Shopee/Upload.vue';
import LazadaUpload from '@/vue/components/Lazada/Shopee/Upload.vue';

export default {
  name: 'ShopeeProductTab',
  components: {
    'tiktok-upload': TiktokUpload,
    'lazada-upload': LazadaUpload,
    'shopee-shop': ShopeeShop,
    'shopee-product': ShopeeProduct,
    TabPane,
  },
  data() {
    return {
      tabActive: '',
      shopeProduct: {
        productId: '',
        shopId: '',
      },
      loading: false,
    };
  },
  methods: {
    onChangeTab(tab) {
      this.SetTabActive(tab);
    },
    async initProduct() {
      const productId = this.$route.query.productId;
      const shopId = this.$route.query.shopId;
      this.shopeProduct.productId = productId;
      this.shopeProduct.shopId = shopId;

      this.loading = true;
      this.$Loading.start();

      await this.ShopeeGetProduct({
        productId,
        shopId,
      });

      this.$Loading.finish();
      this.loading = false;

      this.ShopeeSellerInit().catch(() => {});
    },
  },
  created() {
    this.tabActive = this.getTabActive;

    this.initProduct();
  },
};
</script>
