<template>
  <el-card shadow="hover">
    <template #header>
      <div class="flex items-center gap-xs">
        <el-icon>
          <ElIconLink/>
        </el-icon>
        <span>推荐文章</span>
      </div>
    </template>
    <div class="flex flex-wrap p-2">
      <div v-for="(item,index) in links" class="flex items-center">
        <a :href="item.url" target="_blank">{{ item.name }}</a>
        <el-divider v-if="index + 1 != links.length" direction="vertical" />
      </div>
    </div>
  </el-card>

  <el-card shadow="hover">
    <template #header>
      <div class="flex items-center gap-xs">
        <el-icon>
          <ElIconLink/>
        </el-icon>
        <span>友情链接</span>
      </div>
    </template>
    <div class="flex flex-wrap p-2">
      <div v-for="(item,index) in links" class="flex items-center">
        <a :href="item.url" target="_blank">{{ item.name }}</a>
        <el-divider v-if="index + 1 != links.length" direction="vertical" />
      </div>
    </div>
  </el-card>

</template>

<script setup lang="ts">
import type {ApiResult} from "~/api";
import type {AdItem} from "~/api/cms/ad/model";
import type {Link} from "~/api/cms/link/model";
import {useServerRequest} from "~/composables/useServerRequest";

const banner = ref<any>();
const links = ref<any>();
const movieList = ref<any>();
const screenWidth = window.innerWidth;
const screenHeight = window.innerHeight;

// 获取数据
const reload = async () => {
  await nextTick()
  const getSlide = useServerRequest<ApiResult<AdItem[]>>('/cms/ad/side');
  const getLink = useServerRequest<ApiResult<Link[]>>('/oa/link?linkType=友情链接');
  const [{data: slide}, {data: link}] = await Promise.all([getSlide, getLink]);
  console.log(slide.value)
  banner.value = slide.value?.data;
  links.value = link.value?.data;
}
reload();
</script>
