<template>
  <div :class="[prefixCls, 'flex full']">
    <div :class="`${prefixCls}-content`">
      <el-skeleton class="flex flex-wrap justify-between" :loading="loading" animated :count="6">
        <template #template>
          <div style="width: 32%;">
            <el-skeleton-item
              variant="image"
              style="width: 400px; height: 267px;"
            />
            <div style="padding: 14px;">
              <el-skeleton-item variant="h3"
                                style="width: 100%; height: 30px;margin-bottom: 15px;"/>
              <div>
                <el-skeleton-item variant="text"
                                  style="width: 30%;height: 40px; border-radius: 25px"/>
              </div>
            </div>
          </div>
        </template>
        <template #default>
          <el-row :gutter="24" v-if="content.data && content.data.length">
            <el-col
              v-for="(item, index) in content.data"
              :key="index"
              :span="8"
              class="mb-6"
            >
              <el-card :body-style="{ padding: '0px' }">
                <el-image style="width: 100%; height: 200px" :src="item.image" :fit="'cover'"/>
                <div style="padding: 14px">
                  <h4 class="text-2xl mb-6 text-ellipsis overflow-hidden"
                      style=" line-height:30px;height: 30px;display:inline-block">{{
                      item.title
                    }}</h4>
                  <div class="bottom">
                    <el-button round
                               style="font-size: 18px; color: #022950; border-color: #022950;"><nuxt-link :to="`/case/${item.id}`">查看详情</nuxt-link>
                    </el-button>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
          <div v-else>
            <el-empty description="暂无数据"/>
          </div>
        </template>
      </el-skeleton>

      <div class="mt-32">
        <Pagination
          :current="current"
          :limit="limit"
          :pages="pagesRef"
          :total="total"
          @change="onChangePage"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {useThrottleFn} from "@vueuse/core";

definePageMeta({
  name: '案例列表',
  headerHost: true,
  order: 6,
})
useHead({
  title:'案例列表'
})
const {prefixCls} = useDesign('mai-wrap');
const {commonApi} = useApi();
const pagination = reactive({
  current: 1,
  limit: 6,
  keyword: '',
  total: 0
})
const content = ref([]);
const loading = ref(true);


const {setTotal, current, total, setCurrentPage, limit, pagesRef} = usePagination(1, 6, 0)

async function getData() {
  loading.value = true;
  console.log('limit: >>>>>', limit)
  const {data} = await commonApi.getCaseList({page: current.value, limit: limit});
  content.value = data;
  setTotal(data.total);
  if (data) {
    loading.value = false;
  }
}

function onChangePage(val: number) {
  setCurrentPage(val)
  useThrottleFn(getData, 1000)()
}

getData()

</script>

<style scoped lang="scss">
:deep(.el-pagination) {
  .el-pager {
    .number {
      margin: 0 5px;
    }

    .number.is-active {
      background-color: #022950;
      @apply text-base;
    }
  }
}
</style>
