import React, { useState, useEffect, useRef, useMemo } from 'react';
import { Switch } from 'antd';
import style from './index.less';
import PinyinMatch from 'pinyin-match';
import { useRequest, useModel } from 'umi';
import { getProjectList } from '@/Project/services/project';
import Swiper from 'react-id-swiper';
import 'swiper/css/swiper.css';

const nodata = require('@/Project/assets/projectSelect/nodata.png');

function ProjectSelect(props) {
  const { setProject } = useModel('project');
  const {
    params: { subModule = 1, selectProject },
  } = props;
  const [swiper, updateSwiper] = useState(null);
  const [value, setValue] = useState('');
  // const [curProjectList, SetCurProjectList] = useState([]);
  const { data: projectRes } = useRequest(() => {
    return getProjectList();
  });
  const projectList = projectRes?.list || [];
  // const inputRef = useRef();

  const handleClickProject = (item) => {
    setProject(item);
  };
  const onChangeInput = (e) => {
    setValue(e.target.value);
  };
  const getPageList = (data) => {
    let list = [];
    var pageCount = 8;
    let tempArr = [];
    let curIndex = 0;
    data.forEach((item) => {
      if (curIndex < pageCount) {
        tempArr.push(item);
        curIndex += 1;
      } else {
        list.push(tempArr);
        tempArr = [];
        tempArr.push(item);
        curIndex = 1;
      }
    });
    if (tempArr.length > 0) list.push(tempArr);
    return list;
  };

  const onChange = (value) => {
    let check = value ? 0 : 1;
    // setGlobalData('forbiddenModel', check);
    // UnityAction.sendMsg('forbiddenModel', check);
  };
  // const params = {
  //   navigation: {
  //     nextEl: '.swiper-button-next',
  //     prevEl: '.swiper-button-prev',
  //   },
  // };
  const params = {
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  };
  const curProjectList = useMemo(() => {
    let arr = projectList.filter((item) => {
      let flag = item?.Stage == subModule || item?.Stage == 3;
      if (!flag) return;
      if (value) {
        return PinyinMatch.match(item.Name, value);
      }
      return flag;
    });

    return getPageList(arr);
  }, [projectList, value]);

  useEffect(() => {
    swiper?.update();
  }, [curProjectList]);
  return (
    <div className={style.background}>
      <div className={style.content}>
        {curProjectList.length > 0 && (
          <Swiper {...params} getSwiper={updateSwiper}>
            {curProjectList.map((item, index) => {
              return (
                <div key={index}>
                  <Page
                    data={item}
                    sendProjectToUnity={handleClickProject}
                  ></Page>
                </div>
              );
            })}
          </Swiper>
        )}
      </div>
      <div className={style.search}>
        <input
          onChange={onChangeInput}
          type="text"
          // ref={inputRef}
          placeholder="请输入项目"
        ></input>
        <img
          src={require('@/Project/assets/projectSelect/search_Icon.png')}
          // onClick={() => onSearch()}
        ></img>
      </div>
      <div className={style.control}>
        <div className={style.switch}>
          <Switch
            onChange={onChange}
            style={{ marginLeft: '0.1rem' }}
            defaultChecked={forbiddenModel == 0 ? true : false}
          />
          加载模型
        </div>
      </div>
    </div>
  );
}
export default ProjectSelect;

function ProjectItem(props) {
  const { item, onDoubleClick } = props;
  return (
    <div
      className={style.item}
      onDoubleClick={() => {
        onDoubleClick?.();
      }}
    >
      <div className={style.project}>
        <div
          className={style.pic}
          style={{
            backgroundImage: `url('${item.ScreenShot || nodata}')`,
          }}
        >
          {/* <div
            className={style.hoverName}>
            <div className={style.name}>{item.Name}</div>
            <div className={style.nameBg}></div>
          </div> */}
          <div className={style.name}>{item.Name}</div>
          <div className={style.name2}>{item.Name}</div>
          <div className={style.province}>{item.Province}</div>
        </div>
        <div className={style.projectBg}></div>
      </div>
    </div>
  );
}

function Page(props) {
  const { data = [], sendProjectToUnity } = props;
  const [currentData, setCurrentData] = useState([]);
  useEffect(() => {
    let list = [];
    var pageCount = 4;
    let tempArr = [];
    let curIndex = 0;
    data.forEach((item, index) => {
      if (curIndex < pageCount) {
        tempArr.push(item);
        curIndex += 1;
      } else {
        list.push(tempArr);
        tempArr = [];
        tempArr.push(item);
        curIndex = 1;
      }
    });
    if (tempArr.length > 0) list.push(tempArr);
    setCurrentData(list);
  }, [data]);
  return (
    <div className={style.page}>
      {currentData.map((item, index) => {
        return (
          <Line
            key={index}
            data={item}
            sendProjectToUnity={sendProjectToUnity}
          ></Line>
        );
      })}
    </div>
  );
}
function Line(props) {
  const { data = [], sendProjectToUnity } = props;
  return (
    <div className={style.line}>
      <div className={style.lineList}>
        {data.map((item) => {
          return (
            <ProjectItem
              key={item.ID}
              item={item}
              onDoubleClick={() => sendProjectToUnity(item)}
            ></ProjectItem>
          );
        })}
        <div className={`${style.item} ${style.empty}`}></div>
        <div className={`${style.item} ${style.empty}`}></div>
        <div className={`${style.item} ${style.empty}`}></div>
      </div>
      <div className={style.floor} />
    </div>
  );
}
