import { queryProject } from '@/services/diagnosticTec';
import { UnityAction } from '@/utils/utils';
import { useRequest } from '@umijs/max';
import { useEffect, useRef } from 'react';
import Swiper from 'react-id-swiper';
import 'swiper/css/swiper.css';
import styles from './index.less';
const nodata = require('@/assets/projects/nodata.png');
const Projects = () => {
  const ref = useRef(null);

  const { data: projectList } = useRequest(queryProject, {
    formatResult: (res) => {
      // return res?.data?.list?.filter((item) => item?.Stage == 3);
      var list = [];
      res.data.forEach((item) => {
        // 使用水厂名替代项目名
        item.List.forEach(item => item.Name = item.WaterName)
        list = list.concat(item.List);
      });
      return list;
    },
  });
  const params = {
    slidesPerView: 'auto',
    freeMode: true,
    spaceBetween: 50,
  };
  const goNext = () => {
    if (ref.current !== null && ref.current.swiper !== null) {
      ref.current.swiper.slideNext();
    }
  };

  const goPrev = () => {
    if (ref.current !== null && ref.current.swiper !== null) {
      ref.current.swiper.slidePrev();
    }
  };

  const toProject = (item) => {
    UnityAction.sendMsg('project', JSON.stringify(item));
  };
  useEffect(() => {
    localStorage.width = document.documentElement.getBoundingClientRect().width;
    window.refreshRem();
  }, []);
  return (
    <div className={styles.main}>
      {/* <div className={styles.titleCon}>
        <span className={styles.titleSelect}>请选择项目</span>
        <div className={styles.titleRight}>
          <div className={styles.icon} />
          <span className={styles.titleText}>新水岛无人值守管理平台</span>
        </div>
      </div> */}
      <div className={styles.swiper}>
        <Swiper {...params} ref={ref}>
          {projectList?.map((item) => (
            <div key={item.ProjectId} onClick={() => toProject(item)}>
              <div className={styles.swiperItem}>
                <div
                  className={styles.pic}
                  style={{
                    backgroundImage: `url('${item.ScreenShot || nodata}')`,
                  }}
                />
                <div className={styles.name}>{item.Name}</div>
                <div className={styles.bottomCon}>
                  <div className={styles.itemCon}>
                    <div className={styles.line} />
                    <div className={styles.valueCon}>
                      <span className={styles.value}>
                        {item.WaterIn}
                        {/* <div className={styles.valueCon}>m3/h</div> */}
                      </span>
                      <div>进水流量(m3/h)</div>
                    </div>
                  </div>
                  <div className={styles.itemCon}>
                    <div className={styles.line} />
                    <div className={styles.valueCon}>
                      <span className={styles.value}>
                        {item.WaterOut}
                        {/* <div className={styles.valueCon}>m3/h</div> */}
                      </span>
                      <div>出水流量(m3/h)</div>
                    </div>
                  </div>
                </div>
              </div>
              <div className={styles.shadow} />
            </div>
          ))}
        </Swiper>
        <div className={styles.arrowLeft} onClick={goPrev}></div>
        <div className={styles.arrowRight} onClick={goNext}></div>
        <div className={styles.bg}></div>
      </div>
    </div>
  );
};
export default Projects;
