import { Component } from "react";
import Taro from "@tarojs/taro";
import { View, Text, Image, Button } from "@tarojs/components";
import "./index.scss";
import { 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 { AtButton } from "taro-ui";
import { AtSearchBar } from "taro-ui";
import { Picker } from "@tarojs/components";
import { AtList, AtListItem, AtNavBar, AtTag, AtMessage } from "taro-ui";
import {
  AtModal,
  AtModalHeader,
  AtModalContent,
  AtModalAction,
  AtAvatar,
  AtAccordion,
} from "taro-ui";
import { AtToast } from "taro-ui";
import { AtIcon } from "taro-ui";
import { VIEW } from "@tarojs/runtime";
import "animate.css";
import touxiang from "../../images/touxiang.png";
import cat from "../../images/cat.jpg";
import girl from "../../images/girl.jpg";

import emoji from "../../images/emoji.png";
import phone from "../../images/phone.png";
import robot from "../../images/robot.png";
import nomad from "../../images/nomad.png";
import book from "../../images/book.png";
import qrcode from "../../images/qrcode.png";

import meetup from "../../images/meetup.jpg";
import bookqr from "../../images/bookqr.jpg";
import loft from "../../images/loft.png";
import AIGC from "../../images/AIGC.png";

// export default class Index extends Component {
const Index = () => {
  const [current, setcurrent] = useState(0);
  const [openId, setopenId] = useState(null);
  const [wxid, setwxid] = useState(null);
  const [userInfo, setuserInfo] = useState({});

  const [open, setopen] = useState(false);
  const [referer, setreferer] = useState(window.document.referrer);

  const [isOpened, setisOpened] = useState(false);
  const [meetupQR, setmeetupQR] = useState(false);

  const [bookToast, setbookToast] = useState(false);
  const [meetupToast, setmeetupToast] = useState(false);

  const [joinMeetup, setjoinMeetup] = useState(false);
  const [bookpay, setbookpay] = useState(0);

  const [isWeChat, setisWeChat] = useState(false);

  const getOpenidFromUrl = (url) => {
    const pattern = /[?&]openid=([^&#]+)/;
    const match = url.match(pattern);
    if (match) {
      return match[1];
    }
    return null;
  };

  // 是否在微信客户端
  const isWeChatFun = () => {
    var ua = navigator.userAgent.toLowerCase();
    if (ua.indexOf("micromessenger") != -1) {
      setisWeChat(true);
      return true;
    } else {
      setisWeChat(false);
      return false;
    }
  };

  // 获取openid
  const getOpenid = () => {
    // let newparams = Taro.getCurrentInstance().router.params;
    // let urlopenid = newparams.openid;

    // hash模式
    // http://192.168.31.245:10086/?openid=o7LFAwR32hWGq9XOpd7ZxK1wZxq8#/pages/index/index
    let hashopenid = null;
    if (window.location.href.includes("openid")) {
      hashopenid = getOpenidFromUrl(window.location.href);
    } else {
      // hashopenid = window.localStorage.getItem("openid");
    }
    if (!!hashopenid && hashopenid != "undefined" && hashopenid != "null") {
      // 获取到openid
      window.localStorage.setItem("openid", hashopenid);
      setopenId(hashopenid);

      // window.alert(hashopenid);
      // 查询数据库是否存在openid
      Taro.request({
        method: "GET",
        url: `/api/user/${hashopenid}`, //仅为示例，并非真实的接口地址
        // url: `/api/user/${window.localStorage.getItem("openid")}`, //仅为示例，并非真实的接口地址
        success: function (res) {
          if (res?.data?.userInfo) {
            //  有完整的用户信息userInfo
            setuserInfo(res?.data?.userInfo);
            window.localStorage.setItem("userInfo", userInfo);
          }
        },
        complete: function (finy) {
          // 获取wxid参数
          getWxidFromUrl();
        },
      });
    } else {
      let nowUrl = window.location.href;
      window.localStorage.removeItem("openid");
      let payUrl = `https://payjs.cn/api/openid?mchid=1561724891&callback_url=${nowUrl}`;
      window.location.href = payUrl;
    }
  };

  // 获取更新用户信息
  const getUserinfo = (wxid) => {
    Taro.request({
      method: "GET",
      url: `/api/user/${wxid}`, //仅为示例，并非真实的接口地址
      // url: `/api/user/${window.localStorage.getItem("openid")}`, //仅为示例，并非真实的接口地址
      success: function (res) {
        if (res?.data?.userInfo) {
          //判断wxid是否存在
          if (res?.data?.userInfo?.openid) {
            //  有完整的用户信息userInfo
            setuserInfo(res?.data?.userInfo);
            window.localStorage.setItem("userInfo", userInfo);
          }
        }
      },
      complete: function (finy) {},
    });
  };

  // 获取url中的wxid
  const getWxidFromUrl = () => {
    const urlParams = new URLSearchParams(window.location.search);
    const urlwxid = urlParams.get("wxid");
    if (!!urlwxid) {
      setwxid(urlwxid);
      window.localStorage.setItem("wxid", wxid);
      // 优先查询openid是否存在数据库
      Taro.request({
        method: "GET",
        url: `/api/user/${urlwxid}`, //仅为示例，并非真实的接口地址
        // url: `/api/user/${window.localStorage.getItem("openid")}`, //仅为示例，并非真实的接口地址
        success: function (res) {
          if (res?.data?.userInfo) {
            //判断wxid是否存在
            if (res?.data?.userInfo?.openid) {
              // window.alert(res?.data?.userInfo?.openid);
              // window.alert(window.localStorage.getItem("openid"));

              if (
                res?.data?.userInfo?.openid !==
                window.localStorage.getItem("openid")
              ) {
                // 删除其他用户的wxid
                window.localStorage.removeItem("userInfo");
                window.localStorage.removeItem("openid");
                window.localStorage.removeItem("wxid");
                window.location.href = "http://nomad.hackrobot.cn";
              } else {
                //  有完整的用户信息userInfo
                setuserInfo(res?.data?.userInfo);
                window.localStorage.setItem("userInfo", userInfo);
              }
            } else {
              // 绑定wxid与openid到数据库
              wxidTapopenid(urlwxid);
            }
          } else {
            // 新增wxid用户
          }
        },
        complete: function (finy) {
          // tg消息通知
          tgMessage();
        },
      });
    } else {
      // tg消息通知
      tgMessage();
    }
    return wxid;
  };

  // 绑定wxid与openid
  const wxidTapopenid = (newWxid) => {
    const userUpdateData = {
      openid: window.localStorage.getItem("openid"), // 只更新 openid 字段
    };
    Taro.request({
      method: "PUT",
      // url: `/api/user/${urlwxid}`, //仅为示例，并非真实的接口地址
      url: `/api/user/${newWxid}`, //仅为示例，并非真实的接口地址
      data: userUpdateData,
      header: {
        "Content-Type": "application/json",
      },
      success: function (res) {},
      fail: function (err) {},
      complete: function (finy) {},
    });
  };

  // 新增openid用户
  const addopenidUser = () => {
    const userUpdateData = {
      openid: window.localStorage.getItem("openid"), // 只更新 openid 字段
    };
    Taro.request({
      method: "GET",
      // url: `/api/user/${urlwxid}`, //仅为示例，并非真实的接口地址
      url: `/api/user/${window.localStorage.getItem("openid")}`, //仅为示例，并非真实的接口地址
      data: userUpdateData,
      header: {
        "Content-Type": "application/json",
      },
      success: function (res) {},
      fail: function (err) {},
      complete: function (finy) {},
    });
  };

  // 网页查看通知
  const tgMessage = () => {
    Taro.request({
      method: "GET",
      url: `/api/tgMessage?openid=${window.localStorage.getItem("openid")}`, //仅为示例，并非真实的接口地址
      // url: "https://pay.hackrobot.cn/api/payh5", //仅为示例，并非真实的接口地址
      success: function (res) {
        console.log("访问提醒发送成功");
      },
    });
  };

  // 入群申请

  useEffect(() => {
    let inwechat = isWeChatFun();
    if (inwechat) {
      // 获取openId
      getOpenid();
    } else {
      // window.alert('不在微信')
    }
  }, []);

  useEffect(() => {
    // alert(window.localStorage.getItem("bookpay"))
    setbookpay(window.localStorage.getItem("bookpay"));
  }, []);

  const goBack = () => {
    Taro.navigateBack({});
  };

  const handleClick = (value) => {
    // window.alert(value)
    setopen(value);
  };

  const payh5 = (type, total_fee = 1000) => {
    // console.log("111");
    Taro.request({
      method: "POST",
      url: "/api/payh5", //仅为示例，并非真实的接口地址
      // url: "https://pay.hackrobot.cn/api/payh5", //仅为示例，并非真实的接口地址

      data: {
        callback_url: window.location.href,
        openid: window.localStorage.getItem("openid"),
        total_fee: total_fee, // 金额,单位:分
        type: type, //订单类型 book/meetup/video/vip
      },
      header: {
        "content-type": "application/json", // 默认值
      },
      success: function (res) {
        console.log(res.data);
        // window.alert(res.data.jsapi);
        WeixinJSBridge.invoke(
          "getBrandWCPayRequest",
          {
            // 以下6个支付参数通过payjs的jsapi接口获取
            // appId: "wxc5205a653b0259bf",
            // timeStamp: "1701401644",
            // nonceStr: "KhOYB0wFV6j9qyQK",
            // package: "prepay_id=wx01113404850024729b35f4d69b73500000",
            // signType: "MD5",
            // paySign: "2A823C8D47CCF871C6C65A56DC228CF8",
            ...(res?.data?.jsapi ?? {}),
          },
          function (res) {
            // 支付成功
            if (res.err_msg == "get_brand_wcpay_request:ok") {
              window.localStorage.setItem(type, 1); //订单类型 book/meetup/video/vip
              WeixinJSBridge.call("closeWindow");
            }
          }
        );
      },
    });
  };

  return (
    <View className="index">
      {/* <Button
        onClick={() => {
          // 跳转到目的页面，在当前页面打开
          Taro.navigateTo({
            url: "/pages/group/index",
          });
        }}
      >
        111
      </Button> */}

      {/* 公众号 */}
      <View
        className="index-title"
        onClick={() => {
          // window.location.href=""
        }}
      >
        <AtAvatar
          size="small"
          circle
          // image="https://www.hackrobot.cn/wp-content/uploads/2023/05/cropped-cropped-Screenshot-2023-05-22-at-17.26.38.png"
          image={touxiang}
        ></AtAvatar>
        <View className="yidooplanet">异度世界</View>
      </View>

      {/* 标签 */}
      <View className="index-tags animate__animated animate__pulse">
        <AtTag className="index-AtTag" type="primary" AtNavBar={true} circle>
          独立开发者
        </AtTag>
        <AtTag className="index-AtTag" type="primary" AtNavBar={true} circle>
          跨境电商
        </AtTag>
        <AtTag className="index-AtTag" type="primary" AtNavBar={true} circle>
          树莓派
        </AtTag>
      </View>

      <View className="index-article">
        {/* className="at-article__p" */}
        <View>
          普通的独立开发者,平时喜欢折腾树莓派
          <br />
          副业是做跨境电商
          <br />
          做一个<span className="spanText">数字游民</span>ing😎
        </View>
      </View>

      {/* 付费合集 */}
      <View className="index-list">
        <AtList>
          <AtListItem
            title="云手机"
            arrow="right"
            // hasBorder={false}
            thumb={phone}
            onClick={() => {
              window.location.href =
                // "https://mp.weixin.qq.com/mp/appmsgalbum?__biz=MzU4NTgyNDUxNw==&action=getalbum&album_id=3403853254399082501#wechat_redirect";
                "https://mp.weixin.qq.com/mp/appmsgalbum?__biz=MzU4NTgyNDUxNw==&action=getalbum&album_id=3555705062712901639#wechat_redirect";
            }}
          />
          <AtListItem
            title="微信机器人"
            arrow="right"
            // hasBorder={false}
            thumb={robot}
            onClick={() => {
              window.location.href =
                // "https://mp.weixin.qq.com/mp/appmsgalbum?__biz=MzU4NTgyNDUxNw==&action=getalbum&album_id=3545545030499270661#wechat_redirect";
                "https://mp.weixin.qq.com/mp/appmsgalbum?__biz=MzU4NTgyNDUxNw==&action=getalbum&album_id=3629790245010128902#wechat_redirect";
            }}
          />
          <AtListItem
            title="AIGC"
            arrow="right"
            // hasBorder={false}
            thumb={AIGC}
            onClick={() => {
              window.location.href =
                // "https://mp.weixin.qq.com/mp/appmsgalbum?__biz=MzU4NTgyNDUxNw==&action=getalbum&album_id=3545545030499270661#wechat_redirect";
                "https://mp.weixin.qq.com/mp/appmsgalbum?__biz=MzU4NTgyNDUxNw==&action=getalbum&album_id=3635342254190739460#wechat_redirect";
            }}
          />
          {/* <AtListItem
            title="数字游民"
            arrow="right"
            // hasBorder={false}
            thumb={nomad}
            onClick={() => {
              window.location.href =
                "https://mp.weixin.qq.com/mp/appmsgalbum?__biz=MzU4NTgyNDUxNw==&action=getalbum&album_id=3545541605766168582#wechat_redirect";
            }}
          /> */}
        </AtList>
      </View>

      {/* 在线图书 */}
      {/* 参考资料https://readmake.com/ */}
      <View className="index-book">
        <View className="bookImg">
          <Image
            style="width: 40%px;height:100%;background: #fff;"
            src={book}
          />
        </View>
        <View className="book-middle"></View>
        <View className="nomad-right">
          <View className="nomad-title">
            <Image
              style="width: 30px;height:30px;background: #fff;"
              src={nomad}
            />
            <View className="bookNmae">一人公司方法论</View>
          </View>
          <View className="subtitle">多元自动化收入</View>
          <View className="bookText">
            {/* 两个核心主题: <br /> */}
            1. 云手机+微信机器人+AIGC
            <br />
            2. youtube获利 <br />
            3. 跨境电商
            <br />
            4. 独立开发者
            <br />
            5. 旅行与远程办公
            <br />
          </View>
          <View
            className="bookPrice"
            onClick={() => {
              // 19元解锁书籍
              // payh5("bookpay", 10);
              Taro.navigateTo({
                url: "/pages/book/index",
              });

              return false;
              if (!!userInfo?.ebook) {
                // 已预约
                Taro.atMessage({
                  message: "已预约成功",
                  type: "warning",
                });
              } else {
                if (!!wxid) {
                  // 发起预约
                  const userUpdateData = {
                    ebook: 1, // 只更新 openid 字段
                  };
                  Taro.request({
                    method: "PUT",
                    // url: `/api/user/${urlwxid}`, //仅为示例，并非真实的接口地址
                    url: `/api/user/${wxid}`, //仅为示例，并非真实的接口地址
                    data: userUpdateData,
                    header: {
                      "Content-Type": "application/json",
                    },
                    success: function (res) {
                      // 预约成功
                      // Taro.atMessage({
                      //   message: "预约成功",
                      //   type: "success",
                      // });

                      if (res.data.code == "200") {
                        setbookToast(true);
                      }
                    },
                    fail: function (err) {},
                    complete: function (finy) {
                      // setTimeout(() => {
                      //   window.location.reload();
                      // }, 2000);
                      // getUserinfo()
                    },
                  });
                } else {
                  setmeetupQR(true);
                }
              }
            }}
          >
            <View
              className="join"
              // style={{ backgroundColor: !!userInfo?.ebook ? "#1890ff" : null }}
              style={{
                backgroundColor: !!userInfo?.ebook ? "#1890ff" : "#1890ff",
              }}
            >
              {/* {!!userInfo?.ebook ? "已预约" : "预约"} */}
              {/* {!!userInfo?.ebook ? "未完结" : "未完结"} */}
              {bookpay == 1 ? "查看" : "阅读"}
            </View>
          </View>
        </View>
      </View>

      {/* 已付费的用户才展示活动 */}
      <View className="index-meetup animate__animated animate__pulse">
        <AtCard
          // note="提示文字"
          // extra="2024/09/18"
          extra="已加入:200+"
          title="交流群"
          thumb="http://img12.360buyimg.com/jdphoto/s72x72_jfs/t10660/330/203667368/1672/801735d7/59c85643N31e68303.png"
        >
          <View className="meetup-card">
            {/* 左边 */}
            <View className="meetup-left">
              <Image
                style="width: 100%;height: 100px;background: #fff;"
                // src={meetup}
                src={loft}
              />
            </View>

            {/* 右边 */}
            <View className="meetup-right">
              <View className="title"> 技术交流:云手机/机器人/AI </View>
              <View className="address">
                <AtIcon value="map-pin" size="30" color="#F00"></AtIcon>
                <span>异度世界</span>
              </View>
              <View className="meetBtn">
                {/* <View>
                  <AtIcon value="clock" size="30" color="#F00"></AtIcon>
                  19:00--21:00
                </View> */}
                <View className="meetupSrcItem">
                  {[touxiang, girl, cat].map((item, index) => {
                    return (
                      <View className="meetupSrc">
                        <Image
                          style="width: 20px;height: 20px;background: #fff;"
                          src={item}
                        />
                      </View>
                    );
                  })}
                </View>
                <View
                  className="join"
                  style={{
                    backgroundColor: !!userInfo?.activity_status
                      ? "#1890ff"
                      : // : null,
                        "#1890ff",
                    //
                  }}
                  onClick={() => {
                    Taro.navigateTo({
                      url: "/pages/salon/index",
                    });
                    return false;
                    if (userInfo?.activity_status == "1") {
                      // 已预约
                      Taro.atMessage({
                        message: "已预约成功",
                        type: "warning",
                      });
                    } else if (userInfo?.activity_status == "2") {
                      // 已预约
                      Taro.atMessage({
                        message: "审核中",
                        type: "warning",
                      });
                    } else {
                      if (!!wxid) {
                        // 发起预约
                        const userUpdateData = {
                          activity_status: "2", // 审核中
                        };
                        Taro.request({
                          method: "PUT",
                          // url: `/api/user/${urlwxid}`, //仅为示例，并非真实的接口地址
                          url: `/api/user/${wxid}`, //仅为示例，并非真实的接口地址
                          data: userUpdateData,
                          header: {
                            "Content-Type": "application/json",
                          },
                          success: function (res) {
                            // 预约成功
                            // Taro.atMessage({
                            //   message: "预约成功",
                            //   type: "success",
                            // });
                            if (res.data.code == "200") {
                              setmeetupToast(true);
                            }
                          },
                          fail: function (err) {},
                          complete: function (finy) {
                            window.location.reload();
                          },
                        });
                      } else {
                        setmeetupQR(true);
                      }
                    }
                  }}
                >
                  {/* {userInfo?.activity_status == "2"
                    ? "审核中"
                    : userInfo?.activity_status == "1"
                    ? "已报名"
                    : // : "立即报名"}
                      "已满"} */}
                  {`查看`}
                </View>
              </View>
            </View>
          </View>
        </AtCard>
      </View>

      {/* 软件下载 */}
      <View className="software">
        <View className="emojiTitle">
          <span style={{ color: "green" }}>|</span> 我写的软件工具
        </View>
        <View className="emojitext">
          <View>
            <AtIcon value="file-generic" size="30" color="#F00"></AtIcon>{" "}
            markdown转emoji编辑器
          </View>
          <AtIcon
            value="download-cloud"
            size="30"
            color="#F00"
            onClick={() => {
              setisOpened(true);
            }}
          ></AtIcon>
        </View>

        {/* <View className="software-emoji">
          <Image
            style="width: 80%;height: 240px;background: #fff;"
            src={emoji}
          />
        </View> */}
      </View>

      {/* 付费入群 */}
      {/* <View>付费入群</View> */}

      {/* 联系我 */}
      {/* {!wxid && !Object.keys(userInfo)?.length > 0 ? (
        <View className="contack">
          <View className="wechatNum">微信号: hackrobot</View>
          <Image
            style="width: 185px;height: 200px;background: #fff;"
            src={qrcode}
          />
        </View>
      ) : null} */}

      {/* <View className="payBtn">
        <AtButton type="primary">立即购买 -- 29.8元</AtButton>
      </View> */}

      <View className="emojiModel">
        {/* 软件下载模态窗 */}
        <AtModal isOpened={isOpened}>
          <AtModalHeader>emoji编辑器</AtModalHeader>
          <AtModalContent>
            <View className="modelText">
              emoji编辑器是将markdown转换成标准的emoji格式
              <br />
              适用于各种图文场景
              <br />
              - 平台:小红书/微博/微信"小绿书"朋友圈
              <br />- 评论区
            </View>
            {/* 软件图片展示 */}
            <View className="model-emoji">
              <Image
                style="width: 100%;height: 240px;background: #fff;"
                src={emoji}
              />
            </View>
            {/* <View>
              百度网盘链接：https://pan.baidu.com/s/1XXVnMimjUD8qVdmaVhb6rg?pwd=hqyo
              <br />
              提取码：hqyo
            </View> */}
          </AtModalContent>
          <AtModalAction>
            <Button
              onClick={() => {
                setisOpened(false);
              }}
            >
              取消
            </Button>
            <Button
              onClick={() => {
                window.location.href =
                  "https://pan.baidu.com/s/1XXVnMimjUD8qVdmaVhb6rg?pwd=hqyo";
              }}
            >
              下载
            </Button>
          </AtModalAction>
        </AtModal>
      </View>

      <View className="meetupQR">
        {/* 软件下载模态窗 */}
        <AtModal isOpened={meetupQR}>
          <AtModalHeader>咨询沙龙</AtModalHeader>
          <AtModalContent>
            {/* <View className="modelText">
              1.加微信好友
              <br />
              2.发送关键词: 数字游民
            </View> */}
            {/* 软件图片展示 */}
            <View className="model-emoji">
              <Image
                // style="width: 100%;height: 240px;background: #fff;"
                src={qrcode}
              />
            </View>
          </AtModalContent>
          <AtModalAction>
            <Button
              onClick={() => {
                setmeetupQR(false);
              }}
            >
              知道了
            </Button>
          </AtModalAction>
        </AtModal>
      </View>

      {/* 腾讯云推广: https://curl.qcloud.com/8bJ1d9U0 */}
      {/* <View></View> */}

      <AtMessage />
      <AtToast
        isOpened={bookToast}
        hasMask={true}
        text={"预约成功"}
        icon={"check"}
        onClose={() => {
          window.location.reload();
        }}
      ></AtToast>
      <AtToast
        isOpened={meetupToast}
        text={"报名成功"}
        icon={"check"}
        hasMask={true}
        onClose={() => {
          window.location.reload();
        }}
      ></AtToast>
    </View>
  );
};

export default Index;
