import { View, Text, Image } from "@tarojs/components";
import { useLoad } from "@tarojs/taro";
import Taro from "@tarojs/taro";
import { AtAvatar, AtTag, AtIcon, AtTabBar, AtButton } 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 { useEffect, useState } from "react";
// import beijing from "../../images/city/beijing.jpg";

export default function Index() {
  // 用户基本信息
  const [userInfo, setuserInfo] = useState({});

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

  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 CustomTest = () => {
    return <View>自定义组件</View>;
  };

  const HomeCardItem = () => {
    return [
      {
        cityName: "北京",
        imagePath: beijing,
        isCustom: false,
        customCom: "test",
      },
      // 双数插入
      // {
      //   cityName: "上海",
      //   imagePath: shanghai,
      //   isCustom: true,
      //   customCom: <CustomTest />,
      // },
      {
        cityName: "上海",
        imagePath: shanghai,
        isCustom: false,
        customCom: "test",
      },
      // {
      //   cityName: "上海",
      //   imagePath: shanghai,
      //   isCustom: true,
      //   customCom: <CustomTest />,
      // },
      {
        cityName: "广州",
        imagePath: guangzhou,
        isCustom: false,
        customCom: "test",
      },
      // {
      //   cityName: "上海",
      //   imagePath: shanghai,
      //   isCustom: true,
      //   customCom: <CustomTest />,
      // },
      {
        cityName: "深圳",
        imagePath: shenzhen,
        isCustom: false,
        customCom: "test",
      },
    ].map((item, index) => {
      return (
        // 设置自动换行
        <View
          style={{ marginRight: index % 2 != 1 ? "10px" : "0px" }}
          className="homeCardItem"
        >
          {!item.isCustom ? (
            <View className="homeCard">
              {/* 城市封面图片 */}
              <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 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>


          {/* <AtButton
            type="primary"
            onClick={() => {
              Taro.request({
                url: " http://172.19.0.1:8082/test", //仅为示例，并非真实的接口地址
                method: "POST",
                data: {
                  openid: "111",
                  wxid: "22",
                },
                header: {
                  "content-type": "application/json", // 默认值
                },
                success: function (res) {
                  console.log(res.data);
                },
              });
            }}
          >
            发起请求
          </AtButton> */}
        </View>

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

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

        <View className="tabbbarDiv"></View>
      </View>
      {/* 底部tabbar */}
      <View className="tabbbar">
        <AtTabBar
          tabList={[
            { title: "首页", iconType: "home" }, //, text: "new"
            // { title: "活动", iconType: "camera" },
            { title: "我的", iconType: "user" }, //, text: "100", max: 99
          ]}
          onClick={(current)=>{
            if (current !== 0) {
              Taro.redirectTo({
                url: "/pages/my/index",
              });
            }
          }}
          current={0}
        />
      </View>
    </View>
  );
}