import {
  Button,
  Card,
  Col,
  Divider,
  Grid,
  GridItem,
  Row,
  Tag,
  Toast,
} from "@antmjs/vantui";
import { Input, View } from "@tarojs/components";
import React, { useCallback, useEffect } from "react";
import { Swiper, SwiperItem, Image } from "@antmjs/vantui";
import react from "react";
import { NoticeBar } from "@antmjs/vantui";
import Taro from "@tarojs/taro";
import { Tabbar, TabbarItem } from "@antmjs/vantui";
import TabbarCom from "../components/TabbarCom";
import { getTable, getTableid } from "../../utils/index";
import { Icon } from "@antmjs/vantui";
import "./index.scss";
import { Search } from "@antmjs/vantui";
import ActiveCard from "../components/ActiveCard";
import { Dialog } from "@antmjs/vantui";

const Home = () => {
  // const { images } = COMMON
  const [initPage1, setInitPage1] = react.useState(0);
  const [active, setActive] = react.useState(0);

  const [show, setShow] = react.useState(false);
  const [value, setValue] = react.useState("");

  const onChange = (e) => {};
  const images = [
    "cloud://cloud1-5g5xrgza12a0dd6d.636c-cloud1-5g5xrgza12a0dd6d-1253665791/download.jpg",
    "cloud://cloud1-5g5xrgza12a0dd6d.636c-cloud1-5g5xrgza12a0dd6d-1253665791/images.jpg",
  ];

  useEffect(() => {
    // 设置标题
    definePageConfig({
      navigationBarTitleText: "首页",
    });
    // 设置允许分享
    Taro.showShareMenu({
      withShareTicket: true,
    });
    // 其他分享
    Taro.updateShareMenu({
      withShareTicket: true,
      success() {},
    });
    // let objParams = {
    //   tableName: "test",
    //   id: "80516fb66370bcf300b8f43c5f4dd52b",
    //   okFun: (res) => {
    //     console.log("res", res);
    //   },
    // };

    // getTableid(objParams);
  }, []);

  return (
    <View className="homeContent">
      <View>
        <Dialog
          id="vanDialog3"
          // title="标题"
          // showCancelButton
          // confirmButtonOpenType="getUserInfo"
          showConfirmButton={false}
          showCancelButton={false}
          show={show}
          onClose={() => setShow(false)}
        >
          <View className="tagArr">
            {[
              { city: "深圳", color: "" },
              { city: "北京", color: "#8c8c8c" },
              { city: "上海", color: "#8c8c8c" },
              { city: "广州", color: "#8c8c8c" },
              { city: "武汉", color: "#8c8c8c" },
              { city: "杭州", color: "#8c8c8c" },
              { city: "成都", color: "#8c8c8c" },
              // { city: "武汉" },
            ].map((item: any) => {
              return (
                <Tag
                  plain={true}
                  type="primary"
                  color={item?.color}
                  size="large"
                  style={{ marginRight: `30px`, marginBottom: "10px" }}
                >
                  {item?.city}
                </Tag>
              );
            })}
          </View>
        </Dialog>
      </View>

      {/* 通知条 */}
      <NoticeBar leftIcon="volume-o" text="疫情期间,请留意各个景区的开放时间" />
      {/* 顶部 */}
      {/* <View>
        <Row>
          <Col span="4" className="dark">
            深圳
          </Col>
        </Row>
      </View> */}
      <View className="topHome">
        {/* <Tag type="primary">深圳</Tag> */}
        <View onClick={() => setShow(true)}>
          <Tag plain={true} type="primary" size="large">
            深圳
          </Tag>
        </View>
        <View>
          <Search placeholder="请输入搜索关键词" style={{ width: "320px" }} />
        </View>
      </View>

      {/* 轮播图 */}
      <View className="demo-box">
        <Swiper
          height={180}
          paginationColor="#426543"
          autoPlay="3000"
          initPage={initPage1}
          paginationVisible
          onChange={onChange}
        >
          {images.map((item, index) => (
            <SwiperItem key={`swiper#demo1${index}`}>
              <Image src={item} fit="cover" width="100%" height="200px" />
            </SwiperItem>
          ))}
        </Swiper>
      </View>

      {/* 模块 */}
      <Grid>
        <GridItem
          icon="star"
          text="打卡"
          className="iconStyle"
          onClick={() => {
            // 相机拍照
            Taro.chooseImage({
              count: 1, // 默认9
              // , 'compressed'
              sizeType: ["original"], // 可以指定是原图还是压缩图，默认二者都有
              // 'album',
              sourceType: ["camera"], // 可以指定来源是相册还是相机，默认二者都有，在H5浏览器端支持使用 `user` 和 `environment`分别指定为前后摄像头
              success: function (res: any) {
                // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
                let tempFilePaths = res.tempFilePaths;
                console.log("tempFilePaths===", tempFilePaths);

                // 云开发存储文件 [/自动创建文件路径]
                Taro.cloud.uploadFile({
                  cloudPath: `images/dev/${new Date()?.getTime()}.png`,
                  filePath: tempFilePaths?.[0], // 文件路径
                  success: (res: any) => {
                    // get resource ID
                    console.log("res", res.fileID);

                    //  跳转到目的页面，打开新页面
                    Taro.navigateTo({
                      url: `/pages/home/components/CheckIn/index?fileID=${res?.fileID}`,
                    });

                    // Toast.success({
                    //   message: "打卡成功",
                    //   selector: "#vanToast-demo2",
                    // });
                  },
                  fail: (err: any) => {
                    // handle error
                    console.log("err", err);
                  },
                });
              },
            });
          }}
        />
        <GridItem
          icon="like"
          className="iconStyle"
          text="深圳十峰"
          onClick={() => {
            // 跳转到目的页面，打开新页面
            Taro.navigateTo({
              url: "/pages/mountainPeak/index",
            });
          }}
        />
        <GridItem
          icon="eye"
          className="iconStyle"
          text="活动"
          onClick={() => {
            // 跳转到目的页面，打开新页面
            Taro.navigateTo({
              url: "/pages/activityList/index",
            });
          }}
        />

        <GridItem
          icon="manager"
          className="iconStyle"
          text="组队"
          onClick={() => {
            // 跳转到目的页面，打开新页面
            Taro.navigateTo({
              url: "/pages/formSubmit/index",
            });
          }}
        />
      </Grid>

      {/* 分割线 */}
      {/* <View>
        <Divider />
      </View> */}

      {/* 截取数组2个活动 */}
      {[1, 2, 3, 4].splice(0, 2).map((item: any) => {
        return (
          <View
            onClick={() => {
              console.log("Card");
              Taro.navigateTo({
                url: "/pages/activityList/components/details/index",
              });
            }}
          >
            {/* 活动卡片 */}
            <ActiveCard />

            {/* <Card
              num=""
              price=""
              desc="报名中"
              title="周末爬山"
              thumb="cloud://cloud1-5g5xrgza12a0dd6d.636c-cloud1-5g5xrgza12a0dd6d-1253665791/images.jpg"
            /> */}
          </View>
        );
      })}

      {/* <Tabbar
        active={active}
        safeAreaInsetBottom={false}


      >
        <TabbarItem icon="home-o">首页</TabbarItem>
        <TabbarItem icon="friends-o">活动</TabbarItem>
        <TabbarItem icon="setting-o">我的</TabbarItem>
      </Tabbar> */}

      <Toast id="vanToast-demo2" />

      <TabbarCom active={0} />
    </View>
  );
};

export default Home;