<template>
  <div class="survey-search">
    <!-- <van-search
      v-model="searchValue"
      placeholder="请输入关键词"
      class="theme-background"
      :border="false"
      background="#fff"
      @search="blurs"
    ></van-search> -->
    <nav-search v-model:value="searchValue" @search="blurs" />
  </div>
  <div class="new-survey-container">
    <div style="margin-bottom: 80px">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div v-for="item in survey" v-if="survey.length > 0" :key="item" class="new-survey_item">
          <survey-item :survey="item" />
        </div>
        <empty-container v-else />
      </van-list>
    </div>
    <NewSurvey v-if="survey.length > 0" />
  </div>
</template>

<script setup>
import { onMounted } from 'vue';
import NavSearch from '@/components/Search/Index.vue';
import NewSurvey from '@/views/Home/components/NewSurvey/index.vue';
import EmptyContainer from '@/views/Survey/components/EmptyContainer.vue';
import SurveyItem from '@/views/Survey/components/SurveyItem.vue';
import {
  form,
  fetchSurveys,
  loading,
  finished,
  survey,
  searchValue
} from '@/views/Survey/hooks/useSurveyData';

const blurs = () => {
  form.value.page = 1;
  form.value.project_name = searchValue.value;
  survey.value = [];
  fetchSurveys();
};
const onLoad = () => {
  // 异步更新数据
  setTimeout(() => {
    form.value.page = form.value.page + 1;
    fetchSurveys();
  }, 500);
};

onMounted(() => {
  // fetchSurveys();
});
</script>

<style scoped lang="scss">
@use '@/assets/css/theme';
@import '@/assets/css/base';
@import '@/assets/css/main';

.el-dropdown-menu__item:not(.is-disabled):focus,
.el-dropdown-menu__item:not(.is-disabled):hover {
  background-color: #000;
}

.survey-search {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  padding: 0;
  background-color: theme.$nav-header-color;
}

.new-survey-container {
  margin-top: 10px;

  .new-survey_item {
    margin: 0 10px 10px;
    padding: 10px 0 8px 7px;
    border-radius: 8px;
    background-color: white;
  }

  .new-survey_item + .new-survey_item {
    margin: 0 10px 10px;
  }
}
</style>
