<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://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
          class="search-icon"
        ></image>
        <text class="search-placeholder">请输入您要找的服务</text>
      </view>
    </view>

    <!-- 服务分类 -->
    <view class="service-category">
      <view
        class="category-item"
        v-for="(item, index) in serviceCategories"
        :key="index"
        @click="navigateToService(item)"
      >
        <image :src="item.icon" class="category-icon"></image>
        <text class="category-name">{{ item.name }}</text>
      </view>
    </view>

    <!-- 到家公告 -->
    <view class="announcement">
      <view class="announcement-flex">
        到家
        <text class="announcement-title"> 公告</text>
        <image
          src="http://localhost:8080/index_notice1.png"
          class="announcement-img"
        ></image>
      </view>
      <view class="hrStyle">|</view>
      <text class="announcement-content"
        >公告内容公告内容公告内容公告内容...</text
      >
      <image
        src="http://localhost:8080/index_notice2.png"
        class="arrow-right"
        @click="lookNotice"
      ></image>
    </view>

    <!-- 广告横幅 -->
    <view class="serverList">
      <view class="serverList_left">
        <!-- <view> -->
        <image src="http://localhost:8080/guanggao1.png" mode="" />
        <!-- <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="http://localhost:8080/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="http://localhost:8080/index_kefu2.png"
        class="contact-icon2"
      ></image>
    </view>
    <view class="interval"></view>

    <!-- 推荐热门服务 -->
    <view class="hot-services">
      <view class="section-header">
        <image
          src="http://localhost:8080/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="http://localhost:8080/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="http://localhost:8080/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="3" />

    <!-- 回到顶部 -->
    <div class="toUp" @click="scrollToTop">
      <u-badge
        numberType="limit"
        type="error"
        max="99"
        :value="value"
      ></u-badge>
      <image src="http://localhost:8080/toUp.png"></image>
    </div>
  </view>
</template>

<script>
import {
  request,
  picUrl,
  NavgateTo,
  menuButtonInfo,
} from "../../../utils/index";
import { apiArr } from "../../../api/reservation";
import nav from "../../../components/nav/nav";

export default {
  components: {
    nav,
  },
  data() {
    return {
      // 当前位置
      currentLocation: "衡水市桃城区",
      // 服务分类数据
      serviceCategories: [
        {
          name: "家电维修",
          icon: "http://localhost:8080/index_top1.png",
        },
        {
          name: "数码维修",
          icon: "http://localhost:8080/index_top2.png",
        },
        {
          name: "电器清洗",
          icon: "http://localhost:8080/index_top3.png",
        },
        {
          name: "洗衣洗鞋",
          icon: "http://localhost:8080/index_top4.png",
        },
        {
          name: "精细擦窗",
          icon: "http://localhost:8080/index_top5.png",
        },
        {
          name: "整理收纳",
          icon: "http://localhost:8080/index_top6.png",
        },
        {
          name: "家庭保姆",
          icon: "http://localhost:8080/index_top7.png",
        },
        {
          name: "母婴服务",
          icon: "http://localhost:8080/index_top8.png",
        },
        {
          name: "管道疏通",
          icon: "http://localhost:8080/index_top9.png",
        },
        {
          name: "家庭保洁",
          icon: "http://localhost:8080/index_top10.png",
        },
      ],
      homeLeftList: [
        {
          title: "",
          pic_src: "http://localhost:8080/guanggao1.png",
        },
      ],
      homeRightList: [
        {
          title: "",
          pic_src: "http://localhost:8080/guanggao2.png",
        },
        {
          title: "",
          pic_src: "http://localhost:8080/guanggao3.png",
        },
      ],
      // 热门服务数据
      hotServiceList: [
        {
          id: 1,
          name: "空调清洗",
          badge: "推荐",
          tag: "平台保障",
          description: "专业保洁团队，全屋深度清洁，去除顽固污渍，还您清新居所",
          count: "已预约100+",
        },
      ],
    };
  },
  methods: {
    // 选择位置
    chooseLocation() {
      uni.navigateTo({
        url: "/packages/areaPopup/index",
      });
    },
    // 搜索服务
    searchService() {
      uni.navigateTo({
        url: "/packages/homeServer/search/index",
      });
    },
    // 导航到服务详情
    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/noticeDetials/index");
    },
  },
  onLoad() {
    this.getCurrentLocation();
  },
};
</script>

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