import { Component } from "react";
import { View, Text, Image } 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 Taro from "@tarojs/taro";
import { AtButton } from "taro-ui";

import { Picker } from "@tarojs/components";
import { AtList, AtListItem } from "taro-ui";
import { AtNavBar } from "taro-ui";

// export default class Index extends Component {
const Meetup = () => {
  const [current, setcurrent] = useState(1);
  const [joinMeetup, setjoinMeetup] = useState(false);

  const [pickData, setpickData] = useState({
    selector: ["美国", "中国", "巴西", "日本"],
    selectorChecked: "美国",
    timeSel: "12:01",
    dateSel: "2018-04-22",
  });
  const handleClick = (value) => {
    console.log("value", value);
    setcurrent(value);
    if (value == 2) {
      // 跳转到目的页面，在当前页面打开
      Taro.navigateTo({
        url: "/pages/my/index",
      });
    } else if (value == 0) {
      Taro.navigateTo({
        url: "/pages/index/index",
      });
    } else {
      Taro.navigateTo({
        url: "/pages/meetup/index",
      });
    }
  };
  const goBack = () => {
    // window.history.back();
    Taro.navigateBack({
      // delta: 2
    });
  };

  useEffect(() => {
    let newjoinMeetup = window.localStorage.getItem("joinMeetup");
    setjoinMeetup(newjoinMeetup);

    // window.localStorage.removeItem("joinMeetup");
    // setjoinMeetup(false)
  }, []);

  return (
    <View className="my">
      {/* <AtNavBar
        // onClickRgIconSt={handleClick}
        // onClickRgIconNd={handleClick}
        // onClickLeftIcon={goBack}
        // leftIconType="chevron-left"
        color="#000"
        title="活动列表"
        // leftText='返回'
        // rightFirstIconType='bullet-list'
        // rightSecondIconType='user'
      /> */}
      {/* <Text>Hello world!</Text> */}

      {/* <View className="page-section">
        <View>
          <Picker mode="selector" range={pickData.selector} onChange={() => {}}>
            <AtList>
              <AtListItem
                title="国家地区"
                extraText={pickData.selectorChecked}
              />
            </AtList>
          </Picker>
        </View>
        <View>
          <Picker mode="selector" range={pickData.selector} onChange={() => {}}>
            <AtList>
              <AtListItem
                title="国家地区"
                extraText={pickData.selectorChecked}
              />
            </AtList>
          </Picker>
        </View>
      </View> */}

      <AtCard
        note=""
        extra=""
        title="[副业交流] 沙龙茶话会"
        thumb="http://www.logoquan.com/upload/list/20180421/logoquan15259400209.PNG"
      >
        <View className="meetupCard">
          {" "}
          <View className="left">
            {" "}
            <Image
              style="width: 150px;height: 100px;background: #fff;"
              src={
                "https://7084298024874.huodongxing.com/file/ue/20211008/115427740E13BBD5BD7B56940467DC03B4/30435083489707317.jpeg"
              }
            />
          </View>
          <View className="right">
            <View className="up">
              <span style={{ color: "green" }}>[已报名]</span> 4/10
            </View>
            <View className="middle">2023/12/06 星期三</View>
            <View className="down">
              <AtButton
                type="primary"
                size="small"
                className="submitBtn"
                disabled={joinMeetup}
                onClick={() => {
                  Taro.navigateTo({
                    url: "/pages/meetup/Detail/index",
                  });
                }}
              >
                {!!joinMeetup ? "已报名" : "立即报名"}
              </AtButton>
            </View>
          </View>
        </View>
      </AtCard>

      <View className="indexTablebar">
        <AtTabBar
          tabList={[
            { title: "首页", text: "" },
            { title: "活动" },
            { title: "我的" },
          ]}
          onClick={(value) => handleClick(value)}
          current={current}
        />
      </View>
    </View>
  );
};

export default Meetup;
