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

<script>
import { getTiktokCategoryHome } from '@/api/tiktok/client/category';
import CategorySearch from '@/vue/components/Tiktok/Spy/Search/Category.vue';

export default {
  name: 'TiktokSpyCategory',
  components: {
    'category-search': CategorySearch,
  },
  data() {
    return {
      categoryId: this.$route.params.id,
      categoryName: '',
      categoryImage: '',
    };
  },
  created() {
    const categoryData = getTiktokCategoryHome().find(
      (item) => item.id === String(this.categoryId),
    );

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