<template>
  <div class="box-border w-100% border border-[#EEEEEE] rounded-12px border-solid bg-[#FFFFFF] px-26px py-30px">
    <div class="flex items-center">
      <div class="text-28px text-[#333333] font-normal">精选专题</div>
      <div class="ml-50px text-21px text-[#999999] font-normal">了解最新趋势发展</div>
    </div>
    <div class="mt-36px flex justify-between">
      <div v-for="item in 4" :key="item" class="flex flex-col items-center">
        <img :src="`https://picsum.photos/320/190?_t${new Date().getTime()}`" alt="" srcset="" class="h-190px w320 rounded-4px" />
        <div class="mt-10px text-18px text-[#333333] font-normal">机器人</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { PropType, ref, watch } from 'vue'
  import { recommendTop } from '@/api/upnew/index'
  import { recommendTopRes } from '@/api/upnew/types'
  const props = defineProps({
    type: {
      type: Number as PropType<1 | 2 | 3>,
      default: 1,
    },
  })

  /**
   * 这个接口调用错了 后续修改
   */
  const list = ref<recommendTopRes[]>([])
  watch(
    () => props.type,
    (newVal) => {
      if (newVal) {
        recommendTop({
          type: newVal,
          projectType: 0,
          isDomestic: 1,
        }).then((res) => {
          list.value = res.data
        })
      }
    },
    {
      immediate: true,
    }
  )
</script>
