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 } from "taro-ui";
import { AtNavBar } from "taro-ui";
import { AtModal, AtModalHeader, AtModalContent, AtModalAction } from "taro-ui";
import { AtToast } from "taro-ui";
import { AtIcon } from "taro-ui";
import see from "../../images/see.png";
import group from "../../images/group.png";

// export default class Index extends Component {
const Index = () => {
  const [current, setcurrent] = useState(0);
  const [openId, setopenId] = useState(null);
  const [h5openid, seth5openid] = useState(null);

  const [wxid, setwxid] = useState(null);

  const [isOpened, setisOpened] = useState(false);
  const [joinMeetup, setjoinMeetup] = useState(false);

  const [id, setid] = useState(null);
  const [userInfo, setuserInfo] = useState({
    wxid: null,
    openId: null,
    h5openid: null,
    bighead: null,
    city: null,
    country: null,
    generator: null,
    id: null,
    labels: null,
    nickname: null,
    province: null,
    remark: null,
    sex: null, //男
    smallhead: null,
    source: null,
    sourceStr: null,
    usertype: null,
    v1: null,
    wxaccount: null,
  });

  

  // // 获取用户标识符
  // useEffect(() => {
  //   // 获取路由参数
  //   const params = Taro.getCurrentInstance().router.params;
  //   console.log("params", params);
  //   let localwxid = window.localStorage.getItem("wxid");
  //   let localh5openid = window.localStorage.getItem("h5openid");

  //   if (
  //     params?.wxid &&
  //     (!localh5openid ||
  //       localh5openid == "undefined" ||
  //       localh5openid == "null")
  //   ) {
  //     // 本地存储
  //     window.localStorage.setItem("wxid", params?.wxid ?? "");
  //     // alert(params?.wxid);
  //     setwxid(params?.wxid);
  //     getopenId();
  //   }
  // }, []);

  const onBridgeReady = () => {
    WeixinJSBridge.call("hideOptionMenu");
  };

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

  const h5openidUser = () => {
    try {
      const params = Taro.getCurrentInstance().router.params;
      let hashopenid = window.localStorage.getItem("h5openid");
      let localwxid = window.localStorage.getItem("wxid");
      // window.alert("hashopenid1", hashopenid);
      // window.alert("localwxid2", localwxid);

      //发起网络请求
      Taro.request({
        // url: "/api/addH5openid",
        url: "https://kunpeng.hackrobot.cn/addH5openid",
        data: {
          h5openid: hashopenid ?? null,
          wxid: localwxid ?? null, //debug eric 的wxid
        },
        success: function (resUser) {
          console.log(resUser);
          console.log(resUser.data);
          setuserInfo({ ...resUser.data });
        },
      });
    } catch (e) {
      // alert(e);
    } finally {
    }
  };

  useEffect(() => {
    let $instance = Taro.getCurrentInstance();
    console.log($instance.router.params);
  }, []);

  // 获取openid
  const getopenId = () => {
    let hashopenid = null;
    if (window.location.href.includes("openid")) {
      hashopenid = window.location.href
        .split("#")[0]
        .split("?")[1]
        .split("=")[1];
      // alert("1111==>" + hashopenid);
    } else {
      hashopenid = window.localStorage.getItem("h5openid");
      // alert("222==>" + hashopenid);
    }
    if (!!hashopenid && hashopenid != "undefined" && hashopenid != "null") {
      window.localStorage.setItem("h5openid", hashopenid);
      let localwxid = window.localStorage.getItem("wxid");
      seth5openid(hashopenid);
      // 查询用户信息
      h5openidUser();
    } else {
      // 获取路由参数
      const params = Taro.getCurrentInstance().router.params;
      console.log("params", params);

      if (params?.wxid) {
        // 本地存储
        window.localStorage.setItem("wxid", params?.wxid ?? "");
        // alert(params?.wxid);
        setwxid(params?.wxid);
        let nowUrl = window.location.href;
        // alert(nowUrl);
        let payUrl = `https://payjs.cn/api/openid?mchid=1561724891&callback_url=${nowUrl}`;
        window.location.href = payUrl;
      }else{
        // alert('没有wxid')
      }

 
    }
  };

  // useEffect(() => {
  //   let nowUrl = window.location.href;
  //   let localh5openid = window.localStorage.getItem("h5openid");
  //   let localwxid = window.localStorage.getItem("wxid");
  //   alert("localh5openid==>" + localh5openid);
  //   alert("localwxid==>" + localwxid);
  //   alert(nowUrl);
  // });

  const joinmeet = () => {
    // alert(window.localStorage.getItem("openid"));
    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"),
      },
      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") {
              // 邀请加入微信群
              joinWechat();
              WeixinJSBridge.call("closeWindow");
            }
          }
        );
      },
    });
  };

  // 通过wxid加群微信群
  const joinWechat = () => {
    Taro.request({
      url: "/api/joinwechat",
      // url: "https://kunpeng.hackrobot.cn/joingroup",
      data: {
        // wxid: "wxid_haqoszjheyuz22",
        wxid: wxid ?? null, //debug eric 的wxid
      },
      method: "POST",
      header: {
        "content-type": "application/json", // 默认值
      },
      success: function (resUser) {
        console.log("resUser--", resUser);
        // alert(resUser?.data?.success);
        console.log("加入微信群成功");
        if (resUser?.data?.success == "fail") {
          //已经在群聊中
          handleClick("已经在群聊中", "warning");
          setbtntext("已经在群聊中");
        } else if (resUser?.data?.success == "ok") {
          // 发送群聊邀请
          handleClick("已发送群聊邀请", "warning");
          setbtntext("已发送群聊邀请");
        }
        setdisabled(true);
      },
    });
  };

  return (
    <View className="index">
      <View className="at-article">
        <View className="at-article__h1">微信群加入规则,请知悉</View>
        <View className="at-article__info">
          2024-04-10&nbsp;&nbsp;&nbsp;hackrobot
        </View>
        <View className="at-article__content">
          <View className="at-article__section">
            <View className="at-article__h2">免费入群</View>
            {/* <View className="at-article__h3">请给公众号文章点击:"在看"</View> */}

            <View className="at-article__p">
              为了防止营销广告,以及给订阅号增加曝光度,
            </View>
            <View className="at-article__p">
              1. 请点击下方蓝色文字,跳转到公众号文章
            </View>
            <View className="at-article__p">2. 阅读到最底部,点击"在看"</View>
            <View className="at-article__p">如图所示:</View>
            <Image className="at-article__img" src={see} mode="widthFix" />
            <View className="at-article__p">
              <span>点击跳转</span>
              <AtIcon value="arrow-right" size="30" color="#F00"></AtIcon>
              <a href="https://mp.weixin.qq.com/s/MttWjccHsMbLD0pMv1LfYQ">
                云手机6:内网穿透-frp
              </a>
            </View>
            <View className="at-article__p">
              稍等几分钟.机器人检测后,会自动发送群聊邀请
            </View>
            <Image className="at-article__img" src={group} mode="widthFix" />

            {/* <View className="at-article__p">
              如果不想点击"在看",也可以选择点击
             <AtIcon value="arrow-right" size="30" color="#F00"></AtIcon>
              <Button
                onClick={() => {
                  joinmeet();
                }}
                size="mini"
                type="primary"
                className="payBtn"
              >
                付费入群
              </Button>
            </View> */}
            <br />

            <View className="at-article__p lastWord">
              声明:
              <br />
              本群是交流平台,请不要发送广告以及敏感内容
              <br />
              仅聊天,不承诺其他服务和支持
            </View>
          </View>
        </View>
      </View>
    </View>
  );
};

export default Index;