<template>
  <div>
    <div class="px-15">
      <van-swipe
        :autoplay="3000"
        :show-indicators="false"
        class="h-150 rounded-lg overflow-hidden"
      >
        <van-swipe-item
          class="h-full w-full"
          v-for="item in bannerList"
          :key="item.id"
        >
          <van-image
            class="object-cover w-full h-full"
            fit="cover"
            :src="item.imgUrlsAfterConvert[0]"
          />
        </van-swipe-item>
      </van-swipe>
      <div class="pt-15 flex justify-between items-center">
        <van-search
          v-model="searchQuery.searchString"
          placeholder="请输入搜索关键词"
          shape="round"
          @search="onSearch"
          class="flex-1"
        >
        </van-search>
        <div
          class="w-40 flex items-center justify-center"
          @click="handleFilter"
        >
          <van-icon name="filter-o" color="#fe8e2c" size="25" />
        </div>
      </div>

      <van-list
        v-if="dataList.length"
        v-model:loading="loading"
        :immediate-check="false"
        :finished="finished"
        finished-text=""
        @load="loadMore"
      >
        <LabourJobItem
          v-for="item in dataList"
          :key="item.id"
          :item-data="item"
        />
      </van-list>
      <Empty v-else-if="!dataList.length && !loading" />
    </div>
    <Tabbar />

    <van-popup
      v-model:show="showFilter"
      position="right"
      :style="{ width: '80%', height: '100%' }"
    >
      <div class="flex flex-col justify-between h-full">
        <div class="flex-1 pt-40 px-15">
          <div>选择区域</div>
          <div class="grid grid-cols-2 gap-15 pt-20">
            <div
              v-for="item in areaList"
              :key="item.id"
              @click="handleClick(item)"
              class="h-36 flex items-center rounded-sm justify-center text-sm transition-all"
              :class="[
                currentArea.id === item.id
                  ? 'bg-primary text-white'
                  : 'bg-[#f2f4f8] text-[#72809F]',
              ]"
            >
              {{ item.menuName }}
            </div>
          </div>
        </div>
        <div>
          <div
            class="h-60 flex items-center bg-white justify-center border-t space-x-10 px-20"
          >
            <van-button
              class="w-full"
              type="primary"
              plain
              color="#BFC8DB"
              @click="handleReset"
              >重置</van-button
            >
            <van-button
              class="w-full"
              type="primary"
              color="#FD9A00"
              @click="handleConfirm"
              >确定</van-button
            >
          </div>
          <div class="van-safe-area-bottom"></div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
const { data } = await useMyFetch(
  () => `website/basic/bannerList?belongTab=10`
);

const bannerList = computed(() => data.value?.dataList);

const defaultFirstArea = {
  id: 16,
  menuName: "全部",
};

const searchQuery = reactive({
  belongTab: defaultFirstArea.id,
  searchString: "",
  pageNum: 1,
  pageSize: 10,
});

const dataList = ref([]);
const loading = ref(true);
const finished = ref(false);
async function getProjects() {
  const { data } = await request(`website/basic/jobProject/list`, {
    query: searchQuery,
  });
  dataList.value = dataList.value.concat(data.dataList);
  loading.value = false;
  if (dataList.value.length >= data.totalCount) {
    finished.value = true;
  }
}

function loadMore() {
  searchQuery.pageNum++;
  getProjects();
}

function onSearch() {
  searchQuery.pageNum = 1;
  dataList.value = [];
  finished.value = false;
  getProjects();
}

onMounted(() => {
  getProjects();
  getAreaList();
});

// 侧边过滤逻辑
const showFilter = ref(false);
function handleFilter() {
  showFilter.value = !showFilter.value;
}
const areaList = ref([]);
const currentArea = ref(defaultFirstArea);
async function getAreaList() {
  const res = await request(`website/basic/directoryList?parentId=16`);
  areaList.value = [defaultFirstArea, ...res.data.dataList];
}

function handleClick(item) {
  currentArea.value = item;
}

function handleReset() {
  currentArea.value = defaultFirstArea;
}
function handleConfirm() {
  searchQuery.belongTab = currentArea.value.id;
  showFilter.value = false;
  reSearch();
}

function reSearch() {
  searchQuery.pageNum = 1;
  dataList.value = [];
  finished.value = false;
  getProjects();
}
</script>

<style lang="scss" scoped></style>
