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

const BizCardTpl02 = React.lazy(() =>
  import("@/components/business").then((module) => ({
    default: module.BizCardTpl_02,
  })),
);

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}
      >
        <Suspense fallback={<View className="space-y-4 p-3">加载中</View>}>
          <View className="space-y-4 p-3">
            <BizCardTpl02 />
          </View>
        </Suspense>
      </Layout.Container>
      <Layout.Footer>测试页脚</Layout.Footer>
    </Layout>
  );
}