import services from '@/services';
import { DoubleLeftOutlined, DoubleRightOutlined } from '@ant-design/icons';
import { Divider, Flex, message, Skeleton } from 'antd';
import gsap from 'gsap';
import React, { useEffect, useRef, useState } from 'react';
import InfiniteScroll from 'react-infinite-scroll-component';
import styles from './index.less';

/** @name 道路列表 */
const RoadList: React.FC = () => {
  /** 展开状态值 */
  const [expandStatus, setExpandStatus] = useState(true);
  /** 道路列表元素 */
  const listRef = useRef<HTMLDivElement>(null);
  const pageInfo = useRef({
    total: 0,
    currentPage: 0,
  });
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState<any[]>([]);
  const expandSlider = () => {
    if (expandStatus === true) {
      setExpandStatus(false);
      gsap.to(listRef.current, {
        x: -352,
      });
    } else {
      setExpandStatus(true);
      gsap.to(listRef.current, {
        x: 0,
      });
    }
  };

  const loadMoreData = (page?: number) => {
    if (loading) {
      return;
    }
    setLoading(true);
    services.DataBase.getSjdzInfoData({
      typeCode: 'hyzm-zm-zmlb',
      params: {
        pageNo: page != undefined ? page : pageInfo.current.currentPage + 1,
        pageSize: '10',
      },
    })
      .then((res) => {
        if (res.code === 200) {
          const record = res.data?.data?.records?.[0];
          pageInfo.current = record.page;
          if (page === 0) {
            setData(record.list);
          } else
            setData((pre) => {
              return [...pre, ...record.list];
            });
        }
        setLoading(false);
      })
      .catch(() => {
        setLoading(false);
      });
  };

  useEffect(() => {
    loadMoreData(0);
  }, []);
  console.log(data);
  return (
    <div className={styles.listContainer} ref={listRef}>
      <div className={styles.blurBg} />
      <div className={styles.actionBtn} onClick={expandSlider}>
        {expandStatus ? (
          <div
            style={{
              textOrientation: 'upright',
              writingMode: 'vertical-rl',
            }}
          >
            收起
            <DoubleLeftOutlined></DoubleLeftOutlined>
          </div>
        ) : (
          <div
            style={{
              textOrientation: 'upright',
              writingMode: 'vertical-rl',
            }}
          >
            展开
            <DoubleRightOutlined></DoubleRightOutlined>
          </div>
        )}
      </div>
      <div className={styles.content}>
        <div className={styles.title}>道路列表</div>
        <Flex className={styles.tableHeader} align="center">
          <div style={{ width: '60%' }} className={styles.headerText}>
            道路名称
          </div>
          <div style={{ width: '40%' }} className={styles.headerText}>
            功能照明数量
          </div>
        </Flex>
        <div className={styles.tableBody} id="scrollableDiv">
          <InfiniteScroll
            dataLength={data.length}
            next={loadMoreData}
            hasMore={data.length < pageInfo.current.total}
            loader={
              <Skeleton
                paragraph={{ rows: 1, width: '100%' }}
                title={false}
                active
              />
            }
            endMessage={<Divider plain>没有更多了</Divider>}
            scrollableTarget="scrollableDiv"
          >
            {data.map((item, index) => {
              return (
                <Flex
                  key={index}
                  className={styles.item}
                  onClick={() => {
                    message.warning('功能未开放');
                  }}
                  justify="space-between"
                  align="center"
                >
                  <div className={styles.name}>{item.dl}</div>
                  <div className={styles.num}>{item.gysl}</div>
                </Flex>
              );
            })}
          </InfiniteScroll>
        </div>
      </div>
    </div>
  );
};

export default RoadList;
