<template>
  <view class="video_list">
    <view class="search">
      <uni-search-bar 
        v-model="searchText"
        radius="100"
        bgColor="#fff"
        placeholder="搜一搜" 
        clearButton="auto"
        cancelButton="none"
        @confirm="search"
      />
    </view>
    <view class="post-list">
      <view class="item" 
        v-for="item in listLoader.list.value" 
        :key="item.id"
        @click="goDetail(item.id)"
      >
        <view class="image-wrap" :style="{backgroundImage:'url('+(item.thumbnail || item.image)+')'}">
          <view class="like">
            <text class="iconfont icon-liked" v-if="item.isLike"></text>
            <text class="iconfont icon-like" v-else></text>
            <text>{{ item.likes }}</text>
          </view>
          <view class="mask">
            <text class="iconfont icon-play"></text>
          </view>
        </view>
        <view class="desc ellipsis-2">{{ item.title }}</view>
      </view>
    </view>
    <SimplePageListLoader :loader="listLoader" />
  </view>
</template>


<script setup lang="ts">
import { GetContentListItem, GetContentListParams } from '@/api/CommonContent';
import { useSimplePageListLoader } from '@/common/composeabe/SimplePageListLoader';
import { ref } from 'vue';
import { navTo } from '@/common/utils/PageAction';
import { onLoad } from '@dcloudio/uni-app';
import NewsIndexContent from '@/api/news/NewsIndexContent';
import SimplePageListLoader from '@/common/components/SimplePageListLoader.vue';

const searchText = ref('');
const listLoader = useSimplePageListLoader<
  GetContentListItem, 
  {
    modelId: number|undefined, 
    mainBodyColumnId: number|undefined,
  }
>(8, async (page, pageSize, params) => {
  if (!params || !params.modelId || !params.mainBodyColumnId)
    throw new Error("未传入参数，当前页面需要参数");
  const res = await NewsIndexContent.getContentList(new GetContentListParams().setSelfValues({
    keywords: searchText.value,
    type: GetContentListParams.TYPE_VIDEO,
    modelId: params.modelId, 
    mainBodyColumnId: params.mainBodyColumnId ,
  }), page, pageSize);
  return res.list;
});

function goDetail(id: number) {
  navTo('/pages/video/details', { id, page: listLoader.page.value });
}
function search() {
  listLoader.loadData(undefined, true);
}

onLoad((query) => {
  if (query?.title) {
    uni.setNavigationBarTitle({
      title: query.title,
    });
  }
  listLoader.loadData({
    modelId: query?.modelId ? Number(query.modelId) : undefined, 
    mainBodyColumnId: query?.mainBodyColumnId? Number(query.mainBodyColumnId) : undefined ,
  })
})

</script>

<style lang="scss">
.video_list {
  padding: 20rpx;
}
</style>
