// @ts-nocheck
import { Component } from "react";
import { View, Text, Image, Button } 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 { AtTag } from "taro-ui";
import { AtList, AtListItem } from "taro-ui";
import { AtForm, AtMessage } from "taro-ui";
import loft from "../../images/loft.png";
import nomadvloglife from "../../images/nomadvloglife.png";

import {
  AtModal,
  AtModalHeader,
  AtModalContent,
  AtModalAction,
  AtAvatar,
  AtAccordion,
} from "taro-ui";

import qrcode from "../../images/qrcode.png";
import joinGroup from "../../images/joinGroup.png";

// export default class Index extends Component {
const Salon = () => {
  const [meetupQR, setmeetupQR] = useState(false);
  const [isWeChat, setisWeChat] = useState(false);
  const [meetup, setmeetup] = useState(window.localStorage.getItem("meetup"));

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

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

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

  const payh5 = (type, total_fee = 1000) => {
    // console.log("111");
    Taro.request({
      method: "POST",
      url: `${process.env.TARO_API_API}/payh5`, //仅为示例，并非真实的接口地址
      // url: "https://pay.hackrobot.cn${process.env.TARO_API_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="Model">
      <View className="meetup-left">
        <Image style="width: 100%;height: 100px;background: #fff;" src={loft} />
      </View>

      {meetup != 1 ? (
        <View className="at-article">
          <View className="at-article__h1">异度星球</View>
          <View className="at-article__info">
            {/* 2017-05-07&nbsp;&nbsp;&nbsp; */}
            异度星球
          </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">
                {/* 微信群是一个交流技术的平台,不限软件/硬件 */}
                交流灌水
                <br />
                践行『长期价值』和『杠杆主义』
                <br />
                折腾开源软件和开源硬件
                {/* <br />
                长期更新 */}
              </View>
              <br />
              <View className="at-article__h3">| 📋核心主题</View>
              <View className="at-article__p">
                {/* 微信群只是一个沟通平台,与其他伙伴搭桥
                <br /> */}
                包括但不限于:
                <br />
                1️⃣云手机
                <br />
                2️⃣微信机器人
                <br />
                3️⃣AIGC /边缘计算
              </View>
              <br />
              <View className="at-article__h3">| 🟩微信群</View>
              <View className="at-article__p">
                {/* 『微信群』是一个沟通平台,
                <br />
                加入后,会显示『入群口令』
                <br /> */}
                机器人会自动邀请加群
              </View>
              <br />
              <View className="at-article__h3">| 🔊声明</View>
              <View className="at-article__p">
                🚫禁止营销推广
                <br />
                {/* 🚫恶意捣乱
                <br />
                <br /> */}
                ❗请勿随意@群主
              </View>

              <br />
            </View>
          </View>
        </View>
      ) : (
        <View>
          <View>
            <View className="at-article__h3">| ☕微信自动入群口令:<span style={{color:"red"}}>3399</span></View>
            <View className="at-article__p">
              {`ID:${window.localStorage.getItem("openid")}`}
            </View>

            <View className="model-emoji">
              <Image
                // style="width: 100%;height: 240px;background: #fff;"
                src={qrcode}
              />
            </View>
            <View className="model-emoji">
              <Image
                style="width: 240px;height: 240px;background: #fff;"
                // src={qrcode}
                src={joinGroup}
              />
            </View>
          </View>
          {/* webview=社区 */}
          {/* <iframe
            className="no-border"
            src="https://memos.nomadcna.com/"
          ></iframe> */}
        </View>
      )}

      <View className="bottomDiv"></View>
      {/* 判断有没有wxid,是否女性 */}
      {meetup != 1 ? (
        <AtButton
          type="primary"
          size="normal"
          className="joinSalon"
          onClick={() => {
            if (meetup == 1) {
              return false;
            } else {
              if (!!isWeChat) {
                // 1元
                payh5("meetup", 100);
              } else {
                setmeetupQR(true);
              }
            }
          }}
        >
          {/* {meetup == 1 ? "已加入" : `立即加入`} */}
          {`立即加入 ¥1`}
        </AtButton>
      ) : null}

      <View className="meetupQR">
        {/* 软件下载模态窗 */}
        <AtModal isOpened={meetupQR}>
          <AtModalHeader>添加好友</AtModalHeader>
          <AtModalContent>
            <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>
    </View>
  );
};

export default Salon;