<template>
  <div class="temporary">
    <div class="slebar">
      <ui-select
        :options="museumList"
        :placeholder="'请选择'"
        v-model="currentMuseum"
      >
        <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, defineEmits, onMounted, watch, nextTick, ref } from "vue";

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

const searchKey = ref("");

const currentMuseum = ref("");

const props = defineProps({
  currentMuseumItem: {
    type: Object,
    default: () => {
      return {};
    },
  },
});

const emit = defineEmits(["updateMuseum"]);

const busy = ref(false);

const list = ref([]);

const museumList = ref([]);

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

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

watch(currentMuseum, () => {
  getData(true);
  emit(
    "updateMuseum",
    museumList.value.find((item) => item.id == currentMuseum.value)
  );
});

const getData = (reset = null) => {
  if (reset) {
    list.value = [];
    busy.value = false;
  }

  if (busy.value) {
    return;
  }

  getExhibitionList(
    {
      pageNum: paging.value.pageNum,
      pageSize: paging.value.pageSize,
      museumId: currentMuseum.value,
      searchKey: searchKey.value,
      type: "",
    },
    (data) => {
      if (data.data.total <= list.value.length) {
        busy.value = true;
        return;
      }
      list.value = list.value.concat(data.data.records);
      paging.value.pageNum += 1;
    }
  );
};

const getMuseumListOrInfoFu = async () => {
  let res = await getMuseumListOrInfoAPI("exhibition");
  museumList.value = res.data
    .map((item) => {
      return {
        ...item,
        label: item.name,
        value: item.id,
      };
    })
    .filter((item) => {
      return item.name !== "广东省博物馆";
    });
  if (!props.currentMuseumItem) {
    currentMuseum.value = museumList.value[0].value;
  } else {
    currentMuseum.value = props.currentMuseumItem.id;
  }
};

onMounted(() => {
  getMuseumListOrInfoFu();

  // getMuseumList(
  //   {
  //     cityId: "",
  //     pageNum: 1,
  //     pageSize: 1000,
  //   },
  //   (data) => {
  //     museumList.value = data.data.records
  //       .map((item) => {
  //         return {
  //           ...item,
  //           label: item.name,
  //           value: item.id,
  //         };
  //       })
  //       .filter((item) => {
  //         return item.name !== "广东省博物馆";
  //       });
  //     if (!props.currentMuseumItem) {
  //       currentMuseum.value = museumList.value[0].value;
  //     } else {
  //       currentMuseum.value = props.currentMuseumItem.id;
  //     }
  //   }
  // );
});
</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>
