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";
import guangzhou from "../../images/guangzhou.jpg";
import wuhan from "../../images/wuhan.jpg";
import hangzhou from "../../images/hangzhou.jpg";
import dali from "../../images/dali.jpg";
import chongqing from "../../images/chongqing.jpg";

import changsha from "../../images/changsha.jpg";
import jingzhou from "../../images/jingzhou.jpg";
import chengdu from "../../images/chengdu.jpg";
import nanjing from "../../images/nanjing.jpg";
import xian from "../../images/xian.jpg";
import kunming from "../../images/kunming.jpg";
import fuzhou from "../../images/fuzhou.jpg";
import zhengzhou from "../../images/zhengzhou.jpg";
import haikou from "../../images/haikou.jpg";
import hegang from "../../images/hegang.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的倍数 */}
        {[
          { cityName: "大理", img: dali, type: "item", dom: "" },
          { cityName: "鹤岗", img: hegang, type: "item", dom: "" },
          { cityName: "北京", img: beijing, type: "item", dom: "" },
          { cityName: "上海", img: shanghai, type: "item", dom: "" },
          {
            cityName: "custDom",
            img: shenzhen,
            type: "custom",
            dom: custDom(),
          },

          { cityName: "深圳", img: shenzhen, type: "item", dom: "" },
          { cityName: "广州", img: guangzhou, type: "item", dom: "" },
          { cityName: "武汉", img: wuhan, type: "item", dom: "" },
          { cityName: "杭州", img: hangzhou, type: "item", dom: "" },

          { cityName: "成都", img: chengdu, type: "item", dom: "" },
          { cityName: "南京", img: nanjing, type: "item", dom: "" },
          { cityName: "西安", img: xian, type: "item", dom: "" },

          { cityName: "重庆", img: chongqing, type: "item", dom: "" },
          { cityName: "长沙", img: changsha, type: "item", dom: "" },

          { cityName: "昆明", img: kunming, type: "item", dom: "" },
          { cityName: "福州", img: fuzhou, type: "item", dom: "" },
          { cityName: "郑州", img: zhengzhou, type: "item", dom: "" },
          { cityName: "海口", img: haikou, type: "item", dom: "" },


          { cityName: "荆州", img: jingzhou, 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">
                  {/* 序列号 */}
                  <View className="itemUpleft">{index + 1}</View>
                  {/* 网速 */}
                  <View className="itemUpright">70mps</View>
                </View>
                {/* 城市名 */}
                <View className="itemiddle"> {item.cityName}</View>
                <View className="itemDown">
                  {/* 温度 */}
                  <View className="itemDownleft">29度</View>
                  {/* 消费 */}
                  <View className="itemDownright">¥1545/月</View>
                </View>
                <Image
                  style="width: 100%;height: 100%;background: #fff;border-radius: 5%;z-index:0;opacity: 0.93"
                  // mode="heightFix"
                  src={item.img}
                />
              </View>
            );
          }
        })}
      </View>
      {/* <View className="right">22</View> */}
    </View>
  );
};

export default Index;
