<template>
  <div style="width: 100%;height: 100%;">
    <van-search v-model="name" placeholder="请输入搜索关键词" @search="onSearch"/>
    <div class="tac-obj-pblmstb-list-wrapper">
      <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <card01 v-for="item in list" :key="item.id" :description="item.class1Name" :title="item.pblmsDesc + ''"
                icon="file"
                @click="handleClick(item)"/>
      </van-list>
    </div>
  </div>
</template>
<script setup>
import {defineEmits, defineProps, ref} from 'vue';
import card01 from '@/components/card01.vue';
import {getIllegalActList} from '@/api/questions';

const emits = defineEmits(['change']);

const props = defineProps({
  listType: {
    type: String,
    default: '1',
  },
})

const list = ref([]);
const name = ref("");
const pageNum = ref(0);
const total = ref(0);
const loading = ref(false);
const finished = ref(false);

const onSearch = () => {
  pageNum.value = 0;
  total.value = 0;
  finished.value = false;
  list.value = [];
  onLoad()
}

const onLoad = () => {
  loading.value = true;
  pageNum.value++;
  const params = {
    "class1Name": name.value,
    "pageNum": pageNum.value,
    "pageSize": 20,
    "pblmType": props.listType,
    "realPageNum": 0
  }

  getIllegalActList(params).then(res => {
    list.value = [...list.value, ...res.data.list];
    total.value = res.data.total;

    // 加载状态结束
    loading.value = false;

    // 数据全部加载完成
    if (total.value !== 0 && list.value.length >= total.value) {
      finished.value = true;
    }
  })
};

function handleClick(item) {
  emits('change', item);
}
</script>
<style lang="scss" scoped>
.tac-obj-pblmstb-list-wrapper {
  height: calc(100% - 59px);
  background-color: #ebecf0;
  padding-top: 10px;
  overflow: auto;

  .card-01-wrapper:first-child {
    margin-top: 0;
  }

}
</style>
