<template>
  <view class="article_list">
    <view class="search with-button">
      <uni-search-bar 
        v-model="searchText"
        radius="100"
        bgColor="#fff"
        placeholder="搜一搜" 
        clearButton="auto"
        cancelButton="none"
        @confirm="search"
      />
      <u-button type="primary" @click="newData">+ 新增</u-button>
    </view>
    <view class="complex-list-horizontal-1">
      <view 
        class="item" 
        hover-class="pressed"
        v-for="item in listLoader.list.value"
        :key="item.id" 
        @click="goDetail(item.id)"
      >
        <ImageWrapper :src="item.image" width="170rpx" height="190rpx" />
        <view class="info">
          <view class="name ellipsis-2">{{ item.title }}</view>
          <view class="desc">{{ item.date }}</view>
        </view>
      </view>
    </view>
    <SimplePageListLoader :loader="listLoader" :noEmpty="true">
      <template #empty>
        <u-empty mode="list" text="暂无数据，点击按钮新增数据">
          <u-gap height="20"></u-gap>
          <u-button type="primary" @click="newData">+ 新增数据</u-button>
        </u-empty>
      </template>
    </SimplePageListLoader>
  </view>
</template>

<script setup lang="ts">
import SimplePageListLoader from '@/common/components/SimplePageListLoader.vue';
import ImageWrapper from '@/common/components/ImageWrapper.vue';
import { useSimplePageListLoader } from '@/common/composeabe/SimplePageListLoader';
import { ref } from 'vue';
import { DataDateUtils } from '@imengyu/js-request-transform';
import { navTo } from '@imengyu/imengyu-utils/dist/uniapp/PageAction';
import { useLoadQuerys } from '@/common/composeabe/LoadQuerys';
import VillageInfoApi from '@/api/inhert/VillageInfoApi';

const searchText = ref('');
const listLoader = useSimplePageListLoader<{
  id: number,
  image: string,
  title: string,
  date: string
}, {
  villageId: number,  
  villageVolunteerId: number,
  subType: string,
  subId: number,
  subKey: string,
}>(8, async (page, pageSize, params) => {
  if (!params || !params.subType || !params.villageId || !params.villageVolunteerId)
    throw new Error("未传入参数，当前页面需要参数");
  let res = (page == 1 ? await VillageInfoApi.getList(
    params.subType,
    params.subId,
    params.subKey,
    params.villageId,
    params.villageVolunteerId,
  ) : [])
  if (searchText.value)
    res = res.filter((p) => p.title.includes(searchText.value));
  const list = res.map((item) => {
    return {
      id: item.id,
      image: item.image,
      title: item.title,
      date: DataDateUtils.formatDate(item.updatedAt, 'YYYY-MM-dd'),
    }
  })
  return {
    list: list,
    total: list.length,
  };
});

function newData() {
  navTo('common', { 
    id: -1,
    villageId: querys.value.villageId,  
    villageVolunteerId: querys.value.villageVolunteerId,  
    subType: querys.value.subType,  
    subId: querys.value.subId,  
  });
}
function goDetail(id: number) {
  navTo('common', { 
    id,
    villageId: querys.value.villageId,
    villageVolunteerId: querys.value.villageVolunteerId,
    subType: querys.value.subType,
    subKey: querys.value.subKey,
    subId: querys.value.subId,
  });
}
function search() {
  listLoader.loadData(undefined, true);
}


const { querys } = useLoadQuerys({ 
  villageId: 0,  
  villageVolunteerId: 0,
  subType: '',
  subKey: '',
  subId: 0,
}, async (querys) => {
  listLoader.loadData(querys)
});

defineExpose({
  onPageBack(name: string, param: any) {
    if (param && param.needRefresh)
      listLoader.loadData(undefined, true);
  }
})
</script>

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