<template>
  <div>
    <div class="mb-20">
      <category-search
        :category-id="categoryId"
        :category-name="categoryName"
      />
    </div>
    <div>
      <shop-mall :category-id="categoryId" />
    </div>
  </div>
</template>

<script>
import CategoryShopMall from '@/vue/components/Shopee/Spy/Category/ShopMall.vue';
import CategorySearch from '@/vue/components/Shopee/Spy/Search/Category.vue';
import { getShopeeCategoryId } from '@/api/shopee/client/category';
import { imageUrl } from '@/adapter/shopee/render';

export default {
  name: 'ShopeeSpyCategory',
  components: {
    'shop-mall': CategoryShopMall,
    'category-search': CategorySearch,
  },
  data() {
    return {
      categoryId: this.$route.params.id,
      categoryName: '',
      categoryImage: '',
    };
  },
  created() {
    const categoryData = getShopeeCategoryId(this.categoryId);

    if (categoryData) {
      this.categoryName = categoryData.display_name || categoryData.title || categoryData.name;
      this.categoryImage = imageUrl(categoryData.image, true);
      this.SetAppTitle(this.categoryName);
    }
  },
};
</script>
