<template>
  <div>

    <div class="header-height"></div>
    <div class="w-1200 py-8 nav">
      <NBreadcrumb>
        <NBreadcrumbItem>
          <NuxtLink :to="localePath('/')">{{ $t('homePage') }}</NuxtLink>
        </NBreadcrumbItem>
        <NBreadcrumbItem>
          {{ $t('africanVideo') }}
        </NBreadcrumbItem>
      </NBreadcrumb>
    </div>
    <!--   视频列表-->
    <div class="africen-list w-1200  mt-6 py-6">
      <NuxtLink v-for="(item, index) in videoDataList" :to="localePath('/video-detail/' + item.id)" class="africen inline-block cursor-pointer ">
        <div class="africen-img-box" @mouseleave="item.play = false" @mouseover="item.play = true" >
          <video v-if="item.play" autoplay muted class="africen-img-cover" :src="item.videoUrl"/>
          <video v-if="!item.picUrl" v-show="!item.play" muted class="africen-img" :src="item.videoUrl"/>
          <img v-if="item.picUrl" v-show="!item.play" muted class="africen-img" :src="item.picUrl"/>
          <div class="africen-video-desc">
            <div class="view-num pl-2">
              <p class="flex items-center"> <NIcon :component="VideocamOutline" size="25"></NIcon> <span class="ml-1">{{item.viewsCount}}</span></p>
            </div>
          </div>
        </div>
        <p class="africen-title py-2">{{locale =='zh'?item.title:item.titleEn}}</p>
        <div class="africen-desc">
          <div class="africen-time">{{dayjs(item.createTime).format('YYYY-MM-DD')}}</div>
        </div>
      </NuxtLink>

    </div>

    <!-- 分页-->
    <div class="flex justify-center py-8">
      <NPagination
          :item-count="videoItemCount"
          @update-page="videoPageChange"
      />
    </div>
  </div>
</template>
<script setup lang="ts">

import {NBreadcrumb, NBreadcrumbItem, NIcon, NPagination} from "naive-ui";
import {getVideoList} from "~/api/video";
import {VideocamOutline} from "@vicons/ionicons5";
const dayjs = useDayjs()
const {locale} = useI18n()
const localePath = useLocalePath()
//获取视频
const videoPageParams = {
  pageNo: 1,
  pageSize: 10
}

const videoItemCount = ref(0)
const videoDataList = ref<any[]>([])
const videoPageChange = (pageNo: number) => {
  getVideoList(videoPageParams).then( (res: any) => {
    videoDataList.value = res.list
    videoItemCount.value = res.total
  })

}
videoPageChange(1)
</script>
<style scoped>
.africen-list{
  background-color: #FFFFFF;

}
.africen {
  width: 280px;
  margin: 0 10px 30px;
}
.africen-title{
  height: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 20px;
}
.africen-img-box {
  width: 100%;
  height: 175px;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}

.africen-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.africen-img-cover{
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
}

.africen-video-desc {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 25px;
  line-height: 20px;
  background-image: linear-gradient(to top, rgba(0, 0, 0, .5), transparent);
  color: #FFFFFF;
  z-index: 10;

}



.africen-time {
  color: #9A9A9A;
}

</style>
