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, AtNavBar, AtTag, AtMessage } from "taro-ui";
import {
  AtModal,
  AtModalHeader,
  AtModalContent,
  AtModalAction,
  AtAvatar,
  AtAccordion,
} from "taro-ui";
import { AtToast } from "taro-ui";
import { AtIcon } from "taro-ui";
import { VIEW } from "@tarojs/runtime";
import "animate.css";
import beijing from "../../images/beijing.jpg";
import shanghai from "../../images/shanghai.jpg";
import shenzhen from "../../images/shenzhen.jpg";

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

  const custDom = () => {
    return <View className="custDom">custDom</View>;
  };

  return (
    <View className="Index">
      <View className="up"></View>
      <View className="items">
        {/* 数组尽量是4的倍数 */}
        {[
          { img: beijing, type: "item", dom: "" },
          { img: shanghai, type: "item", dom: "" },
          { img: shenzhen, type: "custom", dom: custDom() },
          { img: shenzhen, type: "item", dom: "" },
        ].map((item, index) => {
          if (item.type === "custom") {
            return <View className="item"> {item.dom}</View>;
          } else {
            return (
              <View className="item">
                <View className="itemUp"> itemUp</View>
                <View className="itemiddle"> itemiddle</View>
                <View className="itemDown">itemDown </View>
                <Image
                  style="width: 100%;height: 100%;background: #fff;border-radius: 5%;z-index:0"
                  // mode="heightFix"
                  src={item.img}
                />
              </View>
            );
          }
        })}
      </View>
      {/* <View className="right">22</View> */}
    </View>
  );
};

export default Index;