import { defineComponent, onMounted, reactive, ref } from 'vue';
import HomeSwiper from './components/HomeSwiper/swiper.vue';
import './index.less';
import ModuleCard from '@/components/modulecard.vue';
import { getScenariosRecommend } from '@/utils/api/scenes';
import CustomLoading from '@/components/custom/loading2.vue';
import { JumpDetailPage } from '@/constants/router';
export default defineComponent({
  setup() {
    const loading = ref(false);
    const CardList = reactive({
      list: [] as any,
    });
    const getRecommend = async () => {
      try {
        loading.value = true;
        const res: any = await getScenariosRecommend();
        if (res.code == 0) {
          CardList.list = res.data;
        }
        loading.value = false;
        console.log(res.data);
      } catch (e) {
        loading.value = false;
        console.log(e);
      }
    };
    const onChange = (item: any) => {
      // 详情页跳转
      JumpDetailPage(item);
    };
    onMounted(() => {
      // 获取推荐数据
      getRecommend();
    });
    return () => (
      <div class="swiper-box">
        <HomeSwiper></HomeSwiper>
        <div class="recommend-parent">
          <ModuleCard
            label="推荐工具"
            list={CardList.list}
            onChange={onChange}
          ></ModuleCard>
          <CustomLoading v-show={loading.value}></CustomLoading>
        </div>
      </div>
    );
  },
});
