<template>
  <!-- PC -->
  <el-affix class="hidden-sm-and-down" v-if="form" :offset="offset" @change="onAffix">
    <el-button type="text" color="gray">
      <div class="text-xl text-gray-600 ">你可能还喜欢</div>
      <el-icon class="el-icon--right text-gray-600" color="#999999">
        <ArrowRightBold/>
      </el-icon>
    </el-button>
    <template v-for="(item,index) in list" :key="index">
      <el-card shadow="hover" :body-style="{ padding: '0px' }" class="hover:bg-gray-50 cursor-pointer mt-3"
               @click="openSpmUrl(`/detail`,item,item.articleId,true)">
        <el-image :src="item.image" fit="fill" :lazy="true" class="w-full md:h-[150px] h-[199px] cursor-pointer"/>
        <div class="flex-1 px-4 py-5 sm:p-6 !p-4">
          <p class="text-gray-700 dark:text-white text-base font-semibold  flex items-center gap-1.5">
            <span class="flex-1 text-xl cursor-pointer max-h-[57px] overflow-hidden">{{ item.title }}</span>
          </p>
          <p class="flex items-center gap-1.5 py-2 text-gray-500">
            <el-avatar :src="item.avatar" :size="20"/>
            <span>{{ item.nickname }} · {{ dayjs(item.createTime).format('MM-DD hh:mm') }}</span>
          </p>
        </div>
      </el-card>
    </template>
  </el-affix>
  <!-- H5 -->
  <div class="hidden-xs-and-up p-3">
    <el-button type="text" color="gray">
      <div class="text-xl text-gray-600 ">你可能还喜欢</div>
      <el-icon class="el-icon--right text-gray-600" color="#999999">
        <ArrowRightBold/>
      </el-icon>
    </el-button>
    <template v-for="(item,index) in list" :key="index">
      <el-card shadow="hover" :body-style="{ padding: '0px' }" class="hover:bg-gray-50 cursor-pointer mt-3"
               @click="openSpmUrl(`/detail`,item,item.articleId,true)">
        <el-image :src="item.image" fit="fill" :lazy="true" class="w-full md:h-[150px] h-[199px] cursor-pointer"/>
        <div class="flex-1 px-4 py-5 sm:p-6 !p-4">
          <p class="text-gray-700 dark:text-white text-base font-semibold  flex items-center gap-1.5">
            <span class="flex-1 text-xl cursor-pointer max-h-[57px] overflow-hidden">{{ item.title }}</span>
          </p>
          <p class="flex items-center gap-1.5 py-2 text-gray-500">
            <el-avatar :src="item.avatar" :size="20"/>
            <span>{{ item.nickname }} · {{ dayjs(item.createTime).format('MM-DD hh:mm') }}</span>
          </p>
        </div>
      </el-card>
    </template>
  </div>
</template>
<script setup lang="ts">
import { ArrowRightBold } from '@element-plus/icons-vue'
import {getIdBySpm, openSpmUrl} from "~/utils/common";
import dayjs from "dayjs";
import type {Article} from "~/api/cms/article/model";
import {useServerRequest} from "~/composables/useServerRequest";
import type {ApiResult, PageResult} from "~/api";

const props = withDefaults(
    defineProps<{
      title?: string;
      form?: Article;
    }>(),
    {}
);

const list = ref<Article[]>([]);
const isAffix = ref<any>();
const offset = ref(70)

const onAffix = (e: any) => {
  isAffix.value = e;
}

const {data: response} = await useServerRequest<ApiResult<PageResult<Article>>>('/cms/cms-article/page', {
  params: {
    categoryId: getIdBySpm(4),
    limit: 3
  }
})
if (response.value?.data) {
  list.value = response.value.data.list;
}

</script>

<style scoped lang="less">

</style>
