import { RichText, View } from "@tarojs/components";
import react, { useEffect, useState } from "react";
import { Sidebar, SidebarItem } from "@antmjs/vantui";
import "./index.scss";
import { getTable } from "../../utils/index";

const mountainPeak = () => {
  const [dataSource, setdataSource] = useState<any>([]);
  const [currentIndex, setcurrentIndex] = useState(0);

  useEffect(() => {
    // 设置标题
    definePageConfig({
      navigationBarTitleText: "山峰介绍",
    });
  }, []);

  const state: any = {
    nodes: [
      {
        name: "div",
        attrs: {
          class: "div_class",
          style: "line-height: 60px; color: red;",
        },
        children: [
          {
            type: "text",
            text: "Hello World!",
          },
        ],
      },
    ],
  };

  useEffect(() => {
    let objParams = {
      tableName: "mountains",
      // id: "80516fb66370bcf300b8f43c5f4dd52b",
      okFun: (res: any) => {
        console.log("res--", res);
        setdataSource(res?.data ?? []);
      },
    };
    getTable(objParams);
  }, []);

  return (
    <View className={`peakContent`}>
      {/* 边栏 */}
      <Sidebar
        activeKey={0}
        className={`peak_Sidebar`}
        onChange={(e: any) => {
          console.log('e',e)
          setcurrentIndex(e?.detail);
        }}
      >
        {(dataSource ?? []).map((item: any) => {
          return (
            <SidebarItem title={item?.sideTitle} className={`peak_Sidebar`} />
          );
        })}
      </Sidebar>

      {/* 富文本 */}
      <View onClick={() => {}}>
        {/* <View>{dataSource?.[currentIndex]?.actTitle}</View> */}
        <RichText nodes={dataSource?.[currentIndex]?.richText} />
      </View>
    </View>
  );
};

export default mountainPeak;
