<template>
  <section>
    <!-- survey container -->
    <div class="survey-search">
      <nav-search
        v-model:value="searchValue"
        @search="handleSearchClick"
        @cancel="handleCancelClick"
      />
      <!-- <nav-search
      placeholder="请输入关键词"
      v-model:value="searchValue"
      @click="() => $router.push({ name: 'search' })"
    /> -->
    </div>
    <div v-loading="requestLoading" class="new-survey-container">
      <div style="margin-bottom: 80px">
        <van-list v-model:loading="loading" :finished="finished" @load="handleLoadSurveys">
          <template #finished>
            <!-- 如果存在搜索文字的话，显示没有更多了 -->
            <span v-if="searchValue">
              <el-text>无符合要求的结果</el-text>
            </span>
          </template>

          <template v-if="survey.length > 0">
            <div v-for="item in survey" :key="item" class="new-survey_item">
              <survey-item :survey="item" :is-analysis="true" :disable-action-button="false" />
            </div>
          </template>
          <!-- 如果问卷等于0的话，显示空容器  -->
          <empty-container
            v-if="survey.length === 0 && !searchValue"
            :img-src="emptyImg"
            :show-button="true"
            @handle-click="handleEmptyClick"
          />
          <NewSurvey v-model:show="showModel" />
        </van-list>
      </div>
    </div>
  </section>
</template>

<script setup>
import { onMounted, onUnmounted, ref, watch, nextTick } 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 {
  fetchSurveys,
  loading,
  finished,
  survey,
  requestLoading,
  searchValue,
  clearSurveys
} from '@/views/Survey/hooks/useSurveyData';
import emptyImg from '@/assets/img/emptyImg.png';

const showModel = ref(false);
// 初始化 From 内容
const form = {
  page: 1,
  pageSize: 10,
  key_word: ''
};

watch(searchValue, () => {
  // 当搜索框内容发生变化的时候，重置 finished 状态
  finished.value = true;
  // 重置搜索form 数据
  form.page = 1;

  // 如果搜索框内容为空，清空 survey 数据，重新请求
  if (!searchValue.value.length) {
    clearSurveys();
    form.key_word = '';
    fetchSurveys(form);
  }
});

const handleSearchClick = () => {
  // 点击搜索的时候重置 form 数据
  form.page = 1;
  form.key_word = searchValue.value;
  // 重置 survey 数据
  clearSurveys();
  // 重置 finished 状态
  finished.value = false;

  fetchSurveys(form);
};

function handleCancelClick() {
  searchValue.value = '';
  fetchSurveys(form);
}

onUnmounted(() => {
  // 当组件卸载的时候，清空 survey 数据
  clearSurveys();
  // 清空搜索的字符
  searchValue.value = '';
});

onMounted(() => {
  // 解决当没有问卷的时候，里面的内容不更新的问题
  fetchSurveys(form);
});

async function handleLoadSurveys() {
  await fetchSurveys(form);
  form.page = form.page + 1;
}

function handleEmptyClick() {
  showModel.value = true;
}
</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 {
  @extend %search-gradient;
  padding: 10px 10px;
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: theme.$nav-header-color;
}

.new-survey-container {
  // margin: 0px 3px;
  overflow: hidden;
  .new-survey_item {
    margin: 0 10px 10px;
    padding: 10px;
    border-radius: 16px;
    background-color: white;
  }

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