<template>
  <view class="container">
    <!-- 位置和搜索 -->
    <view class="location-search">
      <view class="location" @click="chooseLocation">
        <image
          id="local"
          src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_localIcon.png"
          mode="aspectFill"
        ></image>

        <text class="location-text">{{ currentLocation }}</text>
        <u-icon name="arrow-down" color="#999999" size="28"></u-icon>
      </view>
      <view class="search-box">
        <image
          src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
          class="search-icon"
        ></image>
        <input class="search-placeholder" placeholder="请输入您要找的服务" />
      </view>
    </view>

    <view class="main">
      <view class="left-menu">
        <scroll-view class="menu-scroll" scroll-y>
          <view
            v-for="(item, index) in categories"
            :key="index"
            class="menu-item"
            :class="{ active: currentIndex === index }"
            @click="scrollToSection(item.id, index)"
          >
            {{ item.name }}
          </view>
        </scroll-view>
      </view>
      <view class="right-content">
        <scroll-view
          class="content-scroll"
          :scroll-into-view="currentSection"
          scroll-y
          scroll-with-animation
        >
          <view id="top" style="height: 1px; opacity: 0"></view>
          <image
            src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/guanggao2.png"
            class="content-img"
          ></image>
          <view
            v-for="(item, index) in categories"
            :key="index"
            :id="item.id"
            class="content-section"
          >
            <view class="section-title">
              <text class="section-text">|</text>
              {{ item.name }}
            </view>
            <!-- 这里添加每个分类对应的内容 -->
            <view class="section-content">
              <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>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

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

export default {
  data() {
    return {
      top: "",
      localHeight: "",
      currentLocation: "衡水市桃城区",
      categories: [
        { id: "category1", name: "家电维修" },
        { id: "category2", name: "数码维修" },
        { id: "category3", name: "家电清洗" },
        { id: "category4", name: "洗衣洗鞋" },
        { id: "category5", name: "精细擦窗" },
        { id: "category6", name: "家庭保姆" },
        { id: "category7", name: "管道疏通" },
        { id: "category8", name: "家庭保洁" },
        { id: "category9", name: "整理收纳" },
        { id: "category10", name: "母婴服务" },
      ],
      serviceCategories: [
        {
          name: "家电维修",
          icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/index_top3.png",
        },
        {
          name: "数码维修",
          icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/index_top3.png",
        },
        {
          name: "电器清洗",
          icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/index_top3.png",
        },
        {
          name: "洗衣洗鞋",
          icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/index_top3.png",
        },
        {
          name: "精细擦窗",
          icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/index_top3.png",
        },
      ],
      currentIndex: 0,
      currentSection: "top",
    };
  },
  methods: {
    scrollToSection(id, index) {
      this.currentIndex = index;
      this.$nextTick(() => {
        this.currentSection = index === 0 ? "top" : id;
      });
    },

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

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