import { View, Text, Image } from "@tarojs/components";
import { useLoad } from "@tarojs/taro";
import Taro from "@tarojs/taro";
import {
  AtAvatar,
  AtTag,
  AtIcon,
  AtTabBar,
  AtButton,
  AtMessage,
} from "taro-ui";
import "./index.scss";
import beijing from "@/images/city/beijing.jpg";
import guangzhou from "@/images/city/guangzhou.jpg";
import shanghai from "@/images/city/shanghai.jpg";
import shenzhen from "@/images/city/shenzhen.jpg";
import touxiang from "@/images/index/touxiang.jpg";

import a1 from "@/images/meetup/a1.jpg";
import a2 from "@/images/meetup/a2.jpg";
import a3 from "@/images/meetup/a3.jpg";
import a4 from "@/images/meetup/a4.png";
import a5 from "@/images/meetup/a5.jpg";
import a6 from "@/images/meetup/a6.jpg";

import TabbarCom from "@/componments/TabbarCom";
import QrCode from "@/componments/QrCode";
import Nomadbook from "@/pages/index/componments/Nomadbook";
import JoinWechat from "@/pages/index/componments/JoinWechat";



import { useEffect, useState } from "react";
// import beijing from "../../images/city/beijing.jpg";

export default function Index() {
  // 用户基本信息
  const [userInfo, setuserInfo] = useState({
    wxid: null,
    openId: null,
  });
  const [isOpened, setisOpened] = useState(false);

  useLoad(() => {
    console.log("Page loaded.");
  });

  // 获取用户标识符
  useEffect(() => {
    // 获取路由参数
    const params = Taro.getCurrentInstance().router.params;
    console.log("params", params);
    // const [wxid, openId] = params;

    if (params.wxid) {
      setuserInfo({
        wxid: params?.wxid, //个人号wxid
        // openId: params?.openId, //小程序openid
      });
      // 本地存储

      try {
        Taro.setStorageSync("wxid", params?.wxid ?? "");
      } catch (e) {}
    }
  }, []);

  useEffect(() => {
    // 更新分享-minipro
    Taro.updateShareMenu({
      withShareTicket: true,
      success() {},
    });

    // 显示分享按钮-minipro
    Taro.showShareMenu({
      withShareTicket: true,
      // showShareItems:true,
    });

    // 打开分享图片弹窗，可以将图片发送给朋友、收藏或下载
    // Taro.downloadFile({
    //   url: "https://res.wx.qq.com/wxdoc/dist/assets/img/demo.ef5c5bef.jpg",
    //   success: (res) => {
    //     Taro.showShareImageMenu({
    //       path: res.tempFilePath,
    //     });
    //   },
    // });
  }, []);



  const HomeCardItem = () => {
    return [
      {
        cityName: "北京",
        imagePath: beijing,
        isCustom: false,
        customCom: "test",
      },
      // 双数插入
   
      {
        cityName: "nomad书籍",
        imagePath: shanghai,
        isCustom: true,
        customCom: <Nomadbook/>,
      },
      {
        cityName: "上海",
        imagePath: shanghai,
        isCustom: false,
        customCom: "test",
      },
      {
        cityName: "加入微信群",
        imagePath: shanghai,
        isCustom: true,
        customCom: <JoinWechat />,
      },
      {
        cityName: "广州",
        imagePath: guangzhou,
        isCustom: false,
        customCom: "test",
      },
      // {
      //   cityName: "上海",
      //   imagePath: shanghai,
      //   isCustom: true,
      //   customCom: <JoinWechat />,
      // },
      {
        cityName: "深圳",
        imagePath: shenzhen,
        isCustom: false,
        customCom: "test",
      },
      // {
      //   cityName: "腾讯云推广",
      //   imagePath: shanghai,
      //   isCustom: true,
      //   customCom: <JoinWechat />,
      // },
    ].map((item, index) => {
      return (
        // 设置自动换行
        <View
          style={{ marginRight: index % 2 != 1 ? "10px" : "0px" }}
          className="homeCardItem"
        >
          {!item.isCustom ? (
            <View className="homeCard">
              <View className="CityName"> {item.cityName}</View>
              {/* 城市封面图片 */}
              <Image
                style={{
                  width: "100%",
                  height: "100%",
                  background: " #fff",
                  borderRadius: "10px",
                }}
                mode="scaleToFill"
                src={item.imagePath}
              />
            </View>
          ) : (
            item.customCom
          )}
        </View>
      );
    });
  };

  const ProvinceTag = () => {
    return ["北京", "上海", "广东", "浙江", "湖北"].map((item, index) => {
      return (
        <View>
          <AtTag
            onClick={() => {
              Taro.redirectTo({
                url: "/pages/index/index?wxid=1111111",
              });
            }}
            type="primary"
            circle
          >
            {item}
          </AtTag>
        </View>
      );
    });
  };

  return (
    <View className="index">
      <View className="indexHome">
        {/* 顶部 */}
        <View className="indexHeader">
          {/* 头像 */}
          <AtAvatar circle image={touxiang}></AtAvatar>
          {/* color="#F00" */}
          <AtIcon value="chevron-down" size="30"></AtIcon>
        </View>

        {/* 省份标签 */}
        <View className="provinceTag">
          <ProvinceTag />
        </View>

        {/* 城市列表 */}
        <View className="homeCards">
          <HomeCardItem />
        </View>

        <View className="tabbbarDiv"></View>
      </View>
      {/* 底部tabbar */}

      <TabbarCom active={0} />
      <QrCode isOpened={isOpened} setisOpened={setisOpened} />
      <AtMessage />
    </View>
  );
}
