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 _ from "lodash";

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";

import yintian from "../../images/cloud/yintian.png";
import taiyang from "../../images/cloud/taiyang.png";
import xiayu from "../../images/cloud/xiayu.png";
import wifi from "../../images/cloud/wifi.png";
// import nomadcna from "../../images/cloud/nomadcna.jpg";
import nomadcna from "../../images/cloud/nomadcna.png";
import nomadcna192 from "../../images/cloud/nomadcna192.png";

import nomadBook from "../../images/nomadBook.jpg";
import wechatGroup from "../../images/wechatGroup.jpg";

import IndexDetail from "./componments/IndexDetail/index";

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

  // 自定义组件模版
  const custDom = () => {
    return <View className="custDom">custDom</View>;
  };

  // 微信群
  const weGroup = () => {
    return (
      <View className="weGroup">
        {" "}
        <Image
          style="width: 100%;height: 100%;"
          // mode="heightFix"
          src={wechatGroup}
        />
      </View>
    );
  };

  // 微信读书
  const weBook = () => {
    return (
      <View className="weBook">
        <Image
          style="width: 100%;height: 100%;"
          // mode="heightFix"
          src={nomadBook}
        />
      </View>
    );
  };

  // 定义初始数据数组
  const [cityList, setCityList] = useState([
    { 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: weGroup(),
    },

    { cityName: "深圳", img: shenzhen, type: "item", dom: "" },
    {
      cityName: "custDom",
      img: shenzhen,
      type: "custom",
      dom: weBook(),
    },
    { 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: "" },
  ]);

  const [oldcityList, setoldCityList] = useState(cityList);

  // 定义屏幕宽度
  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
  // 监听屏幕宽度变化
  useEffect(() => {
    const handleResize = () => {
      setWindowWidth(window.innerWidth);
    };
    window.addEventListener("resize", handleResize);

    // 清除监听器
    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []);

  // 当屏幕宽度小于某个值时，改变 custDom 的位置
  useEffect(() => {
    if (windowWidth < 768) {
      // 比如，宽度小于768时，将 custDom 移到第一位
      // const newCityList = [...cityList];
      const newCityList = _.cloneDeep(cityList);

      const custDomIndex = newCityList.findIndex(
        (item) => item.cityName === "custDom"
      );

      if (custDomIndex !== -1) {
        const [custDomItem] = newCityList.splice(custDomIndex, 1);
        newCityList.unshift(custDomItem); // 将 custDomItem 移动到数组开头
      }
      setCityList(newCityList);
    } else {
      // 屏幕宽度大于 768 时，恢复默认顺序
      setCityList(oldcityList);
    }
  }, [windowWidth]);

  return (
    <View className="Index">
      <View className="up">
        <View className="upText">
          {" "}
          📣数字游民CNA,是针对中国用户的城市数据统计
        </View>
      </View>
      <View className="items">
        {/* 数组尽量是4的倍数 */}
        {/* 随着屏幕变化,改变自定义数组的索引/顺序 */}
        {cityList.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">
                    <View>{index + 1}</View>
                    {/* <View>_</View> */}
                  </View>
                  {/* 网速 */}
                  <View className="itemUpright">
                    <Image
                      style="width: 20px;height: 20px;"
                      mode="heightFix"
                      src={wifi}
                    />
                    <View className="itemUprightWifi">70mps</View>
                  </View>
                </View>
                {/* 城市名 */}
                <View className="itemiddle"> {item.cityName}</View>
                <View className="itemDown">
                  {/* 温度 */}
                  <View className="itemDownleft">
                    <Image
                      style="width: 30px;height: 30px;"
                      mode="heightFix"
                      src={taiyang}
                    />
                    <span> 29度</span>
                  </View>
                  {/* 消费 */}
                  <View className="itemDownright">¥1545/月</View>
                </View>
                {/* 0;opacity: 0.93; */}
                <Image
                  style="width: 100%;height: 100%;background: #fff;border-radius: 5%;z-index:0;filter: contrast(0.9);"
                  // mode="heightFix"
                  src={item.img}
                />
              </View>
            );
          }
        })}
      </View>

      <IndexDetail></IndexDetail>
      {/* <View className="right">22</View> */}
    </View>
  );
};

export default Index;
