<template>
  <view class="bg">
    <headerVue
      @change="changeAddress"
      :address="addressInfo"
      fixed
      isLocation
    ></headerVue>

    <!-- 灵动岛组件 -->
    <!-- 灵动岛组件 - 自包含，无需传递参数 -->
    <DynamicIsland
      ref="dynamicIsland"
      :page-id="'index_page'"
      @toggle="handleIslandToggle"
      @action="handleIslandAction"
    />

    <view class="content" @click="handleContentClick">
      <!-- 权益商品区域 -->
      <ProductSection
        v-show="productList.length"
        title="权益商品"
        :productList="productList"
        moreUrl="/subPackages/equityGoods/index"
        detailUrlPrefix="/subPackages/equityGoods/detail"
        @like-toggle="handleLikeToggle"
      />

      <ProductSection
        titleBgColor="#92FF8F"
        aiTagTextColor="#08FB05"
        aiTagBorderColor="#6EAA3D"
        title="有感商品"
        :productList="productListFeeling"
        moreUrl="/pages/index/sensoryStore"
        detailUrlPrefix="/subPackages/techan/detail"
        @like-toggle="handleLikeToggle"
        isFeel
      />
      <view class="tab-bar-placeholder"></view>
    </view>

    <CustomTabBar :currentTab="0" />
    <MusicControl />
  </view>
</template>

<script>
import MusicControl from "@/components/MusicControl.vue";
import headerVue from "@/components/header.vue";
import CustomTabBar from "@/components/CustomTabBar.vue";
import DynamicIsland from "@/components/DynamicIsland.vue";
import ProductSection from "@/components/ProductSection.vue";
export default {
  components: {
    CustomTabBar,
    headerVue,
    MusicControl,
    DynamicIsland,
    ProductSection,
  },
  computed: {
    // 其他计算属性可以在这里添加
  },
  data() {
    return {
      topBanner: [],
      productList: [
        // {
        //   id: 1,
        //   image:
        //     "https://epic.js-dyyj.com/uploads/20250728/58aed304917c9d60761f833c4f8dceb8.png",
        //   avatar:
        //     "https://epic.js-dyyj.com/uploads/20250728/d27ef6e6c26877da7775664fed376c6f.png",
        //   aiName: "文徵明",
        //   title: "世界花园 | 研学之旅",
        //   price: "588.00",
        //   isLiked: true,
        // },
        // {
        //   id: 2,
        //   image:
        //     "https://epic.js-dyyj.com/uploads/20250728/00e8704b23a0c9fd57023527146211b9.png",
        //   avatar:
        //     "https://epic.js-dyyj.com/uploads/20250728/d7bf0dd2f3f272afba687b525a7c575c.png",
        //   aiName: "苏青壳",
        //   title: "生命的扶持 | 风景之旅",
        //   price: "398.00",
        //   isLiked: false,
        // },
      ],
      productListFeeling: [
        {
          id: 34,
          image:
            "https://epic.js-dyyj.com/uploads/20250728/22e319f3feb1b63fbb539d425c51fe70.png",
          title: "OUT OF SPACE 东方线香",
          price: "138.00",
          isLiked: true,
          isShop: true,
        },
        {
          id: 32,
          image:
            "https://epic.js-dyyj.com/uploads/20250728/cc9907153c887a6428283a407928db9a.png",
          title: "AI-Agent智能玩具",
          price: "398.00",
          isLiked: false,
        },
      ],
      selectedText: "",
      addressInfo: null,
      isLoading: true, // 添加加载状态
    };
  },
  onLoad() {},
  async onReady() {
    let res = await this.$main.getLocationInfo();
    console.log(res);
    this.addressInfo = res;
    this.selectedText = res && res.city;
    uni.setStorageSync("SYS_ADDRESS_INFO", JSON.stringify(res));
    this.getList();
    this.geBenefitPackaget();
  },
  onShow() {
    this.browse_record({
      type: "page",
      title: "首页",
    });
    this.$nextTick(() => {
      this.$refs.dynamicIsland.getUserInfo();
    });
  },
  onPageScroll(e) {
    // 只触发带页面ID的事件，避免不同页面间的状态冲突
    uni.$emit("pageScroll_index_page", e.scrollTop);
  },
  onReachBottom() {},
  methods: {
    changeAddress(res) {
      this.addressInfo = res;
      uni.setStorageSync("SYS_ADDRESS_INFO", JSON.stringify(res));
      this.geBenefitPackaget();
    },
    gotoUrlNew(item, index) {
      if (index == 0) {
        uni.switchTab({
          url: "/pages/index/readingBody",
        });
      } else if (index == 1) {
        uni.switchTab({
          url: "/pages/index/intelligentAgent",
        });
      }
    },
    viewDetail(item) {
      if (item.url) {
        uni.navigateTo({
          url:
            "/subPackages/webPage/webPage?url=" + encodeURIComponent(item.url),
        });
        return;
      }
      uni.navigateTo({
        url: "/subPackages/letter/detail?id=" + item.id,
      });
    },
    getList() {
      // 大轮播
      this.Post(
        {
          type_id: 3,
          position: 17,
        },
        "/api/adv/getAdv"
      ).then((res) => {
        if (res.data) {
          this.topBanner = res.data;
        }
      });
    },
    geBenefitPackaget() {
      this.Post(
        {
          cityId: this.addressInfo.cityId,
        },
        "/framework/index/benefitPackage/list",
        "DES"
      ).then((res) => {
        if (res.data) {
          this.productList = res.data.map((item) => {
            return {
              ...item,
              image: item.mainUrl,
              id: item.benefitPackageId,
              avatar:
                "https://epic.js-dyyj.com/uploads/20250728/d27ef6e6c26877da7775664fed376c6f.png",
              aiName: "文徵明",
            };
          });
        }
      });
    },
    gotoVideo(item) {
      uni.navigateTo({
        url:
          "/subPackages/video/video?item=" +
          encodeURIComponent(JSON.stringify(item)),
      });
    },

    // 处理收藏状态切换
    handleLikeToggle({ item, index }) {
      this.productList[index] = item;
    },

    // 处理灵动岛点击切换
    handleIslandToggle(isExpanded) {
      console.log("灵动岛状态切换:", isExpanded ? "展开模式" : "紧凑模式");
    },

    // 处理灵动岛操作按钮
    handleIslandAction() {
      uni.showToast({
        title: "执行操作",
        icon: "none",
      });
      console.log("执行操作");
    },

    // 处理内容区域点击
    handleContentClick() {
      // 点击内容区域时收缩灵动岛
      if (this.$refs.dynamicIsland) {
        this.$refs.dynamicIsland.collapseIsland();
      }
    },
  },
};
</script>
<style>
page {
}
</style>
<style lang="scss" scoped>
.bg {
  min-height: 100vh;
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
}

/* 页面样式 */

.content {
  height: 100%;
  width: 100%;
  padding: 0 20rpx;
  box-sizing: border-box;
  margin-top: 20rpx;
}

.tab-bar-placeholder {
  height: 143rpx;
  width: 100%;
}
</style>
