<template>
  <view class="container">
    <!-- 头部标题 -->
    <!-- <view class="header">
      <text class="title">榴园到家 服务至上</text>
    </view> -->

    <!-- 位置和搜索 -->
    <view class="location-search">
      <view class="location" @click="chooseLocation">
        <text class="location-text">{{ currentLocation }}</text>
        <!-- <image src="" class="arrow-down"></image> -->
        <u-icon name="arrow-down" color="#999999" size="28"></u-icon>
      </view>
      <view class="search-box" @click="searchService">
        <image src="https://static.hshuishang.com/property-img-file/com_communitySearchIcon.png"
          class="search-icon" mode="aspectFit"></image>
        <text class="search-placeholder">请输入您要找的服务</text>
      </view>
    </view>

    <!-- 服务分类 - 修改为 swiper 形式 -->
    <view class="swiperBox">
      <swiper class="swiper" @change="swiperChange" :current="currentIndex">
        <swiper-item v-for="(page, pageIndex) in swiperList" :key="pageIndex">
          <view class="navList">
            <view class="navItem" v-for="(item, itemIndex) in page" :key="itemIndex" @click="changeNav(item)">
              <view class="navItemImg">
                <image :src="picUrl + item.cate_image" mode="widthFix"></image>
              </view>
              <view class="navName">{{ item.cate_name }}</view>
            </view>
          </view>
        </swiper-item>
      </swiper>

      <view class="dot">
        <view class="dotItem" v-for="(page, index) in swiperList" :key="index"
          :class="currentIndex == index ? 'actives' : ''"></view>
      </view>
    </view>

    <!-- 到家公告 -->
    <view class="announcement">
      <view class="announcement-flex">
        到家
        <text class="announcement-title"> 公告</text>
        <image src="https://static.hshuishang.com/property-img-file/index_notice1.png"
          class="announcement-img" mode="aspectFit"></image>
      </view>
      <view class="hrStyle">|</view>
      <text class="announcement-content">公告内容公告内容公告内容公告内容...</text>
      <image src="https://static.hshuishang.com/property-img-file/index_notice2.png"
        class="arrow-right" @click="lookNotice" mode="aspectFit"></image>
    </view>

    <!-- 广告横幅 -->
    <view class="serverList">
      <view class="serverList_left">
        <!-- <view> -->
        <image src="https://static.hshuishang.com/property-img-file/guanggao1.png"
          mode="aspectFit" />
        <!-- <swiper-item v-for="(item, index) in homeLeftList" :key="index">
            <image :src="item.pic_src" alt="" mode="aspectFit" />
          </swiper-item> -->
        <!-- </view> -->
      </view>
      <view class="serverList_right">
        <view :class="['serverItem', `serverItem${index + 1}`]" @tap="headerServerClick(item)"
          v-for="(item, index) in homeRightList" :key="index">
          <image :src="item.pic_src" mode="" />
        </view>
      </view>
    </view>

    <!-- 立即联系 -->
    <view class="contact-section" @click="contactService">
      <image src="https://static.hshuishang.com/property-img-file/index_kefu1.png"
        class="contact-icon"></image>
      <view class="contact-text">
        <text class="contact-title">立即联系</text>
        <br />
        <text class="contact-subtitle">未找到您需要的服务？</text>
      </view>
      <image src="https://static.hshuishang.com/property-img-file/index_kefu2.png"
        class="contact-icon2"></image>
    </view>
    <view class="interval"></view>

    <!-- 推荐热门服务 -->
    <view class="hot-services">
      <view class="section-header">
        <image src="https://static.hshuishang.com/property-img-file/index_bottom1.png"
          class="section-arrow"></image>
        <text class="section-title">推荐热门服务</text>
      </view>
      <view class="service-list">
        <view class="service-card" v-for="(service, index) in hotServiceList" :key="index">
          <image src="https://static.hshuishang.com/property-img-file/ceshi.png"
            class="service-image"></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">去预约</text>
                </view>
                <text class="service-count">{{ service.count }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- <nav-footer :current="4" /> -->

    <!-- 回到顶部 -->
    <div class="toUp" @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,
  picUrl,
  NavgateTo,
  menuButtonInfo,
} from "../../../utils/index";
import { apiArr } from "../../../api/v2local";
import nav from "../../../components/nav/nav";

export default {
  components: {
    nav,
  },
  data() {
    return {
      picUrl,
      // 当前位置
      currentLocation: "衡水市桃城区",
      // 服务分类数据
      serviceCategories: [],
      swiperList: [],
      currentIndex: 0,
      homeLeftList: [
        {
          title: "",
          pic_src: "https://static.hshuishang.com/property-img-file/guanggao1.png",
        },
      ],
      homeRightList: [
        {
          title: "",
          pic_src: "https://static.hshuishang.com/property-img-file/guanggao2.png",
        },
        {
          title: "",
          pic_src: "https://static.hshuishang.com/property-img-file/guanggao3.png",
        },
      ],
      // 热门服务数据
      hotServiceList: [
        {
          id: 1,
          name: "空调清洗",
          badge: "推荐",
          tag: "平台保障",
          description: "专业保洁团队，全屋深度清洁，去除顽固污渍，还您清新居所",
          count: "已预约100+",
        },
      ],
    };
  },
  methods: {
    // 获取服务分类
    async getServiceCategories() {
      const that = this;
      const params = {
        isShop: 2
      }
      const res = await request(apiArr.getMerChantCateList, "POST", params, { silent: true });
      // 过滤出可见的分类
      res.rows = res.rows.filter((item) => item.is_visible == 1);
      // 将数据分成每10个一组
      const chunkSize = 10;
      that.swiperList = [];
      for (let i = 0; i < res.rows.length; i += chunkSize) {
        that.swiperList.push(res.rows.slice(i, i + chunkSize));
      }
    },
    // swiper 切换事件
    swiperChange(e) {
      this.currentIndex = e.detail.current;
    },
    // 导航到分类页面
    changeNav(item) {
      NavgateTo(`/packages/localLife/classify/index?item=${JSON.stringify(item)}`);
    },
    // 选择位置
    chooseLocation() {
      // uni.navigateTo({
      //   url: "/packages/areaPopup/index",
      // });
    },
    // 搜索服务
    searchService() {
      // uni.navigateTo({
      //   url: "/packages/homeServer/search/index",
      // });
    },
    // 导航到服务详情（保留原方法但修改为与changeNav一致）
    navigateToService(item) {
      // uni.navigateTo({
      //   url: "/packages/homeServer/classify/index",
      // });
      // uni.navigateTo({
      //   url: `/packages/homeServer/serverInfo/index?service=${encodeURIComponent(
      //     JSON.stringify(item)
      //   )}`,
      // });
    },
    // 导航到预约页面
    navigateToReservation(service) {
      // uni.navigateTo({
      //   url: `/packages/homeServer/reservation/index?id=${service.id}&name=${service.name}`,
      // });
      // NavgateTo("/packages/homeServer/searchInfo/index");
    },
    // 联系客服
    contactService() {
      uni.makePhoneCall({
        phoneNumber: "400-123-4567",
      });
    },
    // 获取当前位置
    getCurrentLocation() {
      // 实际项目中应该调用定位API获取真实位置
      console.log("获取当前位置信息");
    },

    // 回到顶部
    scrollToTop() {
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 300,
      });
    },

    // 查看公告
    lookNotice() {
      // NavgateTo("/packages/homeServer/noticeManage/index");
    },
  },
  onLoad() {
    this.getCurrentLocation();
    this.getServiceCategories();
  },
};
</script>

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