import Layout from "@/components/layout/Layout";
import { View, Text } from "@tarojs/components";
import { useDidShow } from "@tarojs/taro";
import { useRefresherConfig } from "@/components/layout";
import { usePageContent } from "./hooks";

export default function Index() {
  const { pageLoading, pageContent, loadPageContent } = usePageContent();

  // 下拉刷新
  const refresherConfig = useRefresherConfig({
    refresherEnabled: true,
    refresherBackground: "#000",
    refresherDefaultStyle: "white",
    refresherThreshold: 50,
    onRefresherRefresh: (event) => {
      console.log("触发下拉刷新", event);
    },
  });

  useDidShow(async () => {
    await loadPageContent("测试身份编码");
    console.log("Page shown.");
  });

  return (
    <Layout loadding={pageLoading}>
      <Layout.Header hideBack={false}>测试导航栏</Layout.Header>
      <Layout.Container
        className="bg-red-400"
        refresherConfig={refresherConfig}
      >
        <View className="space-y-4">
          {Array.from({ length: 10 }).map((_, index) => (
            <View
              key={index}
              className="h-[200px] text-center leading-[200px] bg-red-500 text-white text-2xl"
            >
              <Text className="">{pageContent}</Text>
            </View>
          ))}
        </View>
      </Layout.Container>
      <Layout.Footer>测试页脚</Layout.Footer>
    </Layout>
  );
}