<template>
  <view class="relative flex flex-col h-screen">
    <view
      class="absolute top-0 left-0 w-full z-10"
      :style="{ paddingTop: statusBarHeight + 'px' }"
    >
      <HomeNavBar />
    </view>

    <view class="relative flex-full">
      <view class="relative">
        <image
          class="w-full block"
          src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=800&q=80"
          mode="widthFix"
        />
        <view
          class="absolute bottom-0 left-0 right-0 flex-full px-12 pt-12 pb-4"
        >
          <HomeWelcome />
        </view>
      </view>

      <AiTabSwitch
        v-model="tabIndex"
        :list="['探索发现', 'AI伴游']"
        @change="handleChange"
      />

      <view class="tab-content">
        <Discovery v-if="tabIndex === 0" />
        <ChatMainList v-if="tabIndex === 1" />
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";

import HomeNavBar from "./components/HomeNavBar.vue";
import HomeWelcome from "./components/HomeWelcome.vue";
import AiTabSwitch from "@/components/AiTabSwitch/index.vue";
import ChatMainList from "../ChatMain/ChatMainList/index.vue";
import Discovery from "../Discovery/index.vue";

const tabIndex = ref(0);

const handleChange = (i) => {
  console.log("切换:", i);
};

/// 导航栏相关
const statusBarHeight = ref(20);

/// =============生命周期函数↓================
onLoad(() => {
  uni.getSystemInfo({
    success: (res) => {
      statusBarHeight.value = res.statusBarHeight || 20;
    },
  });
});
</script>

<style scoped>

</style>
