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";

// export default class Index extends Component {
const Index = () => {
  const [current, setcurrent] = useState(0);
  const [isOpened, setisOpened] = useState(false);

  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
    });
  };
  return (
    <View className="index">
      <AtToast isOpened={isOpened} text="活动暂未开始" icon="blocked"></AtToast>
      {/* <Text>Hello world!</Text> */}
      {/* <AtNavBar
        // onClickRgIconSt={handleClick}
        // onClickRgIconNd={handleClick}
        // onClickLeftIcon={goBack}
        // leftIconType="chevron-left"
        color="#000"
        title="异度星球"
        // leftText='返回'
        // rightFirstIconType='bullet-list'
        // rightSecondIconType='user'
      /> */}

      <View>
        <AtSearchBar
          showActionButton
          value={""}
          onChange={() => {}}
          onActionClick={() => {}}
        />
      </View>
      <View className="indexSwiper">
        {" "}
        <Swiper
          indicatorColor="#999"
          indicatorActiveColor="#333"
          // vertical
          circular
          indicatorDots
          autoplay
        >
          <SwiperItem>
            <View className="demo-text">
              {" "}
              <Image
                // style="width: 300px;height: 100px;background: #fff;"
                src={
                  "http://cdn.huodongxing.com/file/ue/20211008/115427740E13BBD5BD7B56940467DC03B4/30775083495267465.jpg"
                }
              />
            </View>
          </SwiperItem>
          <SwiperItem>
            <View className="demo-text">
              {" "}
              <Image
                // style="width: 300px;height: 100px;background: #fff;"
                src={
                  "https://7084298024874.huodongxing.com/file/ue/20211008/115427740E13BBD5BD7B56940467DC03B4/30435083489707317.jpeg"
                }
              />
            </View>
          </SwiperItem>
          <SwiperItem>
            <View className="demo-text">
              {" "}
              <Image
                // style="width: 300px;height: 100px;background: #fff;"
                src={
                  "https://7084298024874.huodongxing.com/file/ue/20211008/115427740E13BBD5BD7B56940467DC03B4/30435083489707317.jpeg"
                }
              />
            </View>
          </SwiperItem>
        </Swiper>
      </View>

      <AtGrid
        data={[
          {
            image:
              "https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png",
            value: "签到",
          },
          {
            image:
              "https://img20.360buyimg.com/jdphoto/s72x72_jfs/t15151/308/1012305375/2300/536ee6ef/5a411466N040a074b.png",
            value: "活动",
          },
          {
            image:
              "https://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png",
            value: "视频",
          },
        ]}
        onClick={(item, index) => {
          console.log("item", item);
          console.log("index", index);
          if (index == 0) {
            setisOpened(true);
            setTimeout(() => {
              setisOpened(false);
            }, 3500);
          }
          if (index == 1) {
            Taro.navigateTo({
              url: "/pages/meetup/index",
            });
          }
          if (index == 2) {
            setisOpened(true);
            setTimeout(() => {
              setisOpened(false);
            }, 3500);
          }
        }}
      />

      <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"
                onClick={() => {
                  Taro.navigateTo({
                    url: "/pages/meetup/Detail/index",
                  });
                }}
              >
                立即报名
              </AtButton>
            </View>
          </View>
        </View>
      </AtCard>

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

export default Index;
