// @ts-nocheck
import { Component } from "react";
import { View, Text, Image } from "@tarojs/components";
import "./index.scss";
import { AtButton, AtInput, AtTabBar } from "taro-ui";
import React, { useCallback, useEffect, useState } from "react";
import { AtGrid } from "taro-ui";
import { Swiper, SwiperItem } from "@tarojs/components";
import { AtCard } from "taro-ui";
import { AtImagePicker } from "taro-ui";
import Taro from "@tarojs/taro";
import { AtAvatar } from "taro-ui";
import { AtTag } from "taro-ui";
import { AtList, AtListItem } from "taro-ui";
import { AtForm, AtMessage } from "taro-ui";
import { marked } from "marked";
import markdownText from "./text.md";
// import Nav from "@/pages/components/Nav/index.tsx";
// import Nav from "../componments/Nav/index";
// import Nav from "@/pages/componments/Nav/index";
// import elevenImage from "@/images/book/11.jpg";
// import elevenImage2 from "@/images/book/22.jpg";
// import vps from "@/images/book/vpsbook.png";
// import ro from "@/images/book/robook.png";
// import yt from "@/images/book/ytbook.png";
// import company from "@/images/book/company.png";
// import ytGpt from "@/images/book/ytGpt.png";
// import nomadro from "@/images/book/nomadro.png";

const Book = () => {
  const [markText, setmarkText] = useState();

  useEffect(() => {}, []);

  const handleClick = (value) => {
    // 跳转到目的页面，在当前页面打开
    Taro.navigateTo({
      url: "/pages/index/index",
    });
  };

  return (
    <View className="Book">
      {/* 导航 */}
      <Nav></Nav>
      <View className="BookItems">
        {[
          {
            imagePath: nomadro,
            text: "数字游民",
            title: "从零开始,做数字游民",
            content:
              "创业行创业行创业行创业行创业行创业行创业行创业行创业行创业行创业行",
            url: "https://nomadro.com",
          },
          {
            imagePath: ytGpt,
            text: "youtube运营笔记",
            title: "youtube运营笔记",
            content:
              "创业行创业行创业行创业行创业行创业行创业行创业行创业行创业行创业行",
            url: "https://nomadyt.com",
          },
          {
            imagePath: company,
            text: "一人公司",
            title: "一人公司",
            content:
              "创业行创业行创业行创业行创业行创业行创业行创业行创业行创业行创业行",
            url: "https://nomadvps.com",
          },
          {
            imagePath: elevenImage,
            text: "作者",
            title: "认知跃迁",
            content:
              "认知跃迁认知跃迁认知跃迁认知跃迁认知认知跃迁认知跃迁认知跃知跃迁认知认知跃迁知跃迁认知认知跃迁知跃迁认知认知跃迁知跃迁认知认知跃迁迁认知跃迁认知跃迁跃迁认知跃迁认知跃迁认知跃迁",
            url: "https://weread.qq.com/web/reader/b8b321d0811e4eaffg011598",
          },
          {
            imagePath: elevenImage2,
            text: "创业行",
            title: "创业行",
            content:
              "创业行创业行创业行创业行创业行创业行创业行创业行创业行创业行创业行",
            url: "https://weread.qq.com/web/reader/b8b321d0811e4eaffg011598",
          },
        ].map((item, index) => {
          return (
            <View
              className="BookItem"
              key={index}
              onClick={() => {
                // window.open(item?.url, '_blank');
                setTimeout(() => {
                  window.location.href = item?.url;
                }, 0); // ⏱️ 解耦浏览器的调试器
              }}
            >
              <View className="BookItem_img">
                <Image
                  src={item?.imagePath}
                  style={{ width: "100%", height: "100%", objectFit: "cover" }}
                />
              </View>
              <View className="BookItem_right">
                <View className="BookItem_right_title">{item.title}</View>
                <View className="BookItem_right_content">
                  {item.content.length > 5
                    ? `${item.content.slice(0, 50)}...`
                    : item.content}
                </View>
                {/* <View className="BookItem_right_text">{item?.text}</View> */}
                <View className="BookItem_right_text"></View>
              </View>
            </View>
          );
        })}
      </View>
    </View>
  );
};

export default Book;