<template>
  <div class="temporary">
    <!-- <div class="slebar"> -->
      <!-- <ui-select :options="ages" :placeholder="'请选择'" v-model="currentAge">
        <template v-slot:option="{ raw }">
          <div>{{ raw.label }}</div>
        </template>
      </ui-select> -->

      <ui-search v-model="searchKey" :placeholder="'请输入展览名称'"></ui-search>
    <!-- </div> -->
    <div class="searchNone" v-if="list.length === 0">
      <img src="@/assets/images/resource/searchNone.svg" alt="" />
      <p>暂时没有数据</p>
    </div>
    <ul v-else v-infinite-scroll="getData" infinite-scroll-disabled="busy" :infinite-scroll-immediate-check="true"
      infinite-scroll-distance="30" :key="ran">
      <li v-for="(item,i) in list" :key="i">
        <exItem :exData="item" />
      </li>
    </ul>
  </div>
</template>

<script setup>
import { defineProps, onMounted, watch, nextTick, ref } from "vue";

import exItem from "@/components/exItem";
import { getExhibitionList, getAge } from "@/config/api";

const searchKey = ref("");
const currentAge = ref("");

const props = defineProps()

const busy = ref(false)

const list = ref([]);

const ages = ref([]);


let paging = ref({
  pageSize: 10,
  pageNum: 1,
  showSize: 4,
  current: 1,
});

watch(searchKey, () => {
  getData(true)
});

watch(currentAge, () => {
  getData(true)
});


const getData = (reset = null) => {
  if (reset) {
    list.value = []
    busy.value = false
  }
  if (busy.value) {
    return
  }
  getExhibitionList({
    "cityId": 1,
    "pageNum": paging.value.pageNum,
    "pageSize": paging.value.pageSize,
    "searchKey": searchKey.value,
    "type": "end"
  }, data => {
    if (data.data.total <= list.value.length) {
      busy.value = true
      return
    }
    list.value = list.value.concat(data.data.records)
    paging.value.pageNum += 1
  })
}

onMounted(() => {

  getAge(data => {
    ages.value = data.data.data.map(item => {
      return {
        ...item,
        label: item.name,
        value: item.id
      }
    })
  })

  getData()
})
</script>
  
<style lang="scss" scoped>
.temporary {
  width: 1400px;
  margin: 62px auto;

  .slebar {
    display: flex;

    >div {
      margin-left: 20px;
    }
  }

  >ul {
    width: 100%;

    >li {
      width: 100%;
      position: relative;

      &::after {
        content: "";
        display: inline-block;
        background: #d9c791;
        height: 1px;
        width: 110%;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
}
</style>
