<template>
  <view class="container">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <u-icon
        bold
        color="#000"
        size="40"
        name="arrow-left"
        class="back-icon"
        @click="back"
      ></u-icon>
      <view class="search-input-container">
        <image
          src="https://static.hshuishang.com/property-img-file/com_communitySearchIcon.png"
          class="search-icon"
        ></image>
        <input
          type="text"
          class="search-input"
          placeholder="请输入内容"
          v-model="searchText"
          @confirm="handleSearch"
        />
      </view>
    </view>

    <!-- 搜索指定内容 -->
    <!-- <view
      class="specifiedContent"
      v-if="!isLoading && specifiedContent.length > 0 && !hasResult"
    >
      <view class="specifiedContent-title">搜索指定内容</view>
      <view class="specifiedContent-list">
        <view
          class="specifiedContent-item"
          v-for="(item, index) in specifiedContent"
          :key="index"
          @click="handleHistoryClick(item.name)"
        >
          <image class="specifiedContent-img" :src="item.icon"></image>
          <view>{{ item.name }}</view>
        </view>
      </view>
    </view> -->

    <!-- 搜索历史 -->
    <view
      class="search-history"
      v-if="!isLoading && searchHistory.length > 0 && !hasResult"
    >
      <view class="history-header">
        <view class="history-title">搜索历史</view>
        <u-icon
          name="trash"
          color="#999999"
          size="28"
          class="history-trash"
          @click="deleteHistory"
        ></u-icon>
      </view>
      <view class="history-list">
        <view
          class="history-item"
          v-for="(item, index) in searchHistory"
          :key="index"
          @click="handleHistoryClick(item)"
        >
          {{ item }}
        </view>
      </view>
    </view>

    <!-- 搜索结果 -->
    <view class="search-result" v-if="!isLoading && hasResult">
      <view class="tabs">
        <view
          v-for="(item, index) in categoryList"
          :key="index"
          :class="['tabItem', selectedTab === index ? 'active2' : '']"
          @click="selectTab(index, item)"
        >
          {{ item.category_name }}
        </view>
      </view>

      <!-- 全部 -->
      <searchAll v-if="selectedTab === 0" class="searchAll" />

      <!-- 店铺 -->
      <searchShop v-if="selectedTab === 1" class="searchShop" />

      <!-- 服务 -->
      <view class="hot-services" v-if="selectedTab === 2">
        <view class="service-list">
          <view
            class="service-card"
            v-for="(service, index) in hotServiceList"
            :key="index"
            @click="navigateToReservation(service)"
          >
            <image
              src="https://static.hshuishang.com/property-img-file/ceshi.png"
              class="service-image"
            />
            <view class="service-info">
              <view class="service-info-left">
                <view class="service-info-left-top">
                  <text class="service-name">{{ service.name }}</text>
                  <image
                    src="https://static.hshuishang.com/property-img-file/index_bottom2.png"
                    class="service-image2"
                  ></image>
                  <text class="service-tag">{{ service.tag }}</text>
                </view>
                <br />
                <text class="service-desc">{{ service.description }}</text>
              </view>
              <view class="service-info-right">
                <view class="service-footer">
                  <!-- <view
                    class="service-button"
                    @click="navigateToReservation(service)"
                  >
                    <text class="button-text" @click="goSubscribe">去预约</text>
                  </view> -->
                  <text class="service-count">{{ service.count }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 加载状态 -->
    <view class="loading-container" v-if="isLoading">
      <view class="loading-spinner"></view>
      <text class="loading-text">加载中...</text>
    </view>

    <!-- 回到顶部 -->
    <u-back-top :scroll-top="scrollTop"></u-back-top>
    <!-- <div
      class="toUp"
      v-show="isShowToTop"
      @click="scrollToTop"
    >
      <u-badge
        numberType="limit"
        type="error"
        max="99"
        :value="value"
      ></u-badge>
      <image
        src="https://static.hshuishang.com/property-img-file/toUp.png"
      ></image>
    </div> -->
  </view>
</template>

<script>
import { request, NavgateTo } from "../../../utils/index";
import SearchAll from "../searchAll/index.vue";
import SearchShop from "../searchShop/index.vue";

export default {
  components: {
    SearchAll,
    SearchShop,
  },
  data() {
    return {
      isShowToTop: false,
      searchText: "",
      isLoading: false,
      specifiedContent: [
        {
          name: "服务",
          icon: "https://static.hshuishang.com/property-img-file/com_communitySearchIcon.png",
        },
        {
          name: "阿石",
          icon: "https://static.hshuishang.com/property-img-file/com_communitySearchIcon.png",
        },
        {
          name: "阿榴",
          icon: "https://static.hshuishang.com/property-img-file/com_communitySearchIcon.png",
        },
      ],
      searchHistory: [],
      hasResult: false,
      hotServiceList: [
        {
          id: 1,
          name: "空调清洗",
          image: "",
          badge: "推荐",
          tag: "平台保障",
          description: "专业保洁团队，全屋深度清洁，去除顽固污渍，还您清新居所",
          count: "已预约100+",
        },
        {
          id: 1,
          name: "空调清洗",
          image: "",
          badge: "推荐",
          tag: "平台保障",
          description: "专业保洁团队，全屋深度清洁，去除顽固污渍，还您清新居所",
          count: "已预约100+",
        },
        {
          id: 1,
          name: "空调清洗",
          image: "",
          badge: "推荐",
          tag: "平台保障",
          description: "专业保洁团队，全屋深度清洁，去除顽固污渍，还您清新居所",
          count: "已预约100+",
        },
        {
          id: 1,
          name: "空调清洗",
          image: "",
          badge: "推荐",
          tag: "平台保障",
          description: "专业保洁团队，全屋深度清洁，去除顽固污渍，还您清新居所",
          count: "已预约100+",
        },
        {
          id: 1,
          name: "空调清洗",
          image: "",
          badge: "推荐",
          tag: "平台保障",
          description: "专业保洁团队，全屋深度清洁，去除顽固污渍，还您清新居所",
          count: "已预约100+",
        },
      ],

      categoryList: [
        { category_name: "全部" },
        { category_name: "店铺" },
        { category_name: "服务" },
      ],
      selectedTab: 0,
      scrollTop: 0
    };
  },

  onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},

  created() {
    const history = uni.getStorageSync("searchHistory") || [];
    this.searchHistory = history;
    window.addEventListener("scroll", this.handleScroll);
  },

  beforeUnmount() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  methods: {
    handleScroll(e) {
      this.isShowToTop = e.detail.scrollTop > 0;
    },
    scrollToTop() {
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 300,
      });
    },
    back() {
      NavgateTo("1");
    },
    selectTab(index, item) {
      this.selectedTab = index;
    },
    // 处理搜索
    handleSearch() {
      const keyword = this.searchText.trim();
      if (!keyword) return;

      // 添加到搜索历史
      if (!this.searchHistory.includes(keyword)) {
        this.searchHistory.unshift(keyword);
        uni.setStorageSync("searchHistory", this.searchHistory);
      }

      // 显示加载状态
      this.isLoading = true;
      this.hasResult = false;

      // 模拟搜索请求
      setTimeout(() => {
        this.isLoading = false;
        this.hasResult = true; // 假设搜索到结果
      }, 1500);
    },

    // 点击历史记录搜索
    handleHistoryClick(keyword) {
      this.searchText = keyword;
      this.handleSearch();
    },

    // 取消搜索
    handleCancel() {
      uni.navigateBack();
    },

    // 删除搜索历史
    deleteHistory() {
      uni.showModal({
        // title: "提示",
        content: "删除所有搜素历史？",
        success: (res) => {
          if (res.confirm) {
            console.log("用户点击确定");
            uni.removeStorageSync("searchHistory");
            this.getSearchHistory();
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    // 获取搜索历史数据
    getSearchHistory() {
      this.searchHistory = uni.getStorageSync("searchHistory") || [];
    },

    // 去预约
    goSubscribe() {
      NavgateTo("/packages/homeServer/searchInfo/index");
    },

    navigateToReservation(item) {
      uni.navigateTo({
        url: `/packages/homeServer/serverInfo/index?service=${encodeURIComponent(
          JSON.stringify(item)
        )}`,
      });
    },
  },
};
</script>

<style>
@import url("./index.css");
</style>
