<script setup lang="ts">
import Search from '@/components/Search/Index.vue';
import TemplateMarket from '@/views/HomeSearch/components/TemplateMarket/Index.vue';
import MineSurvey from '@/views/HomeSearch/components/MineSurvey/Index.vue';
import { updateKeyword, keyword, loading } from '@/views/HomeSearch/Hooks/useSurveySearch';
import Layout from '@/components/Layout/CommonLayout.vue';
import RecommendTag from '@/views/HomeSearch/components/Recommend/Index.vue';
import { computed, onMounted, onUnmounted, ref, type Ref } from 'vue';
import ImageSlider from '../Home/components/ImageSlider/Index.vue';
import { banners } from '@/views/HomeSearch/Hooks/useSurveySearch';
import { surveys, templates } from '@/views/HomeSearch/Hooks/useSurveySearch';

const searchKeyword = keyword as Ref<string>;

type Visible = {
  mineSurvey: boolean;
  templateMarket: boolean;
  banner: boolean;
};

const visible = computed<Visible>(() => {
  const mineSurvey = surveys.value.length > 0;
  const templateMarket = templates.value.length > 0;
  const banner = banners.value.length > 0;
  return {
    mineSurvey,
    templateMarket,
    banner
  };
});

function handleSearchCancel() {
  loading.value = false;
}

onMounted(() => {
  // 当页面取消挂载时，重置页面展示的状态
  loading.value = false;
});
onUnmounted(() => {
  // 当页面取消挂载时，重置搜索框的值
  searchKeyword.value = '';
  banners.value = [];
});
</script>

<template>
  <section class="search-container">
    <div class="search">
      <search
        @cancel="handleSearchCancel"
        :focus="true"
        v-model:value="searchKeyword"
        :search="updateKeyword"
      />
    </div>
    <!--  广告区域  -->
    <div class="banner">
      <layout title="推送内容" v-if="visible.banner">
        <template #title>
          <span class="title">推送内容</span>
        </template>
        <image-slider :stack="false" :banners="banners" :limit="3" />
      </layout>
    </div>

    <section class="result" v-if="loading && searchKeyword">
      <!--  我的任务区域  -->
      <layout v-if="visible.mineSurvey" title="我的任务">
        <template #title>
          <span class="title">我的任务</span>
        </template>
        <mine-survey :limit="3" />
      </layout>
      <!--  更多模板区域  -->
      <layout v-if="visible.templateMarket" title="问卷模板">
        <template #title>
          <span class="title">问卷模板</span>
        </template>
        <template-market :limit="3" />
      </layout>

      <div
        v-if="!visible.mineSurvey && !visible.templateMarket && !visible.banner"
        style="text-align: center"
      >
        无符合要求的结果
      </div>
    </section>

    <section v-else>
      <recommend-tag />
    </section>
  </section>
</template>

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

.title {
  color: rgba(0, 0, 0, 1);
  font-size: 14px;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 20px;
  margin: 28px 0 0 0;
}

.search-container {
  .search {
    padding: 10px;
    padding-bottom: 20px;
    // background: linear-gradient(to bottom, #f8fef5, #f3f3f3);
    @extend %search-gradient;
  }

  .banner {
    padding: 0 theme.$gap;
  }

  // 搜索结果外部布局
  .result {
    padding: theme.$gap;

    :deep(.van-cell) {
      border-radius: theme.$card-radius;
      overflow: hidden;
    }
  }
}

.search-result {
  padding: 16px;

  &-item {
    padding: 12px;
    margin-bottom: 8px;
    background-color: #f5f7fa;
    border-radius: 4px;
    font-size: 14px;
  }
}
</style>
