import { Row, Col, List } from 'antd'
import { useEffect, useState, useRef } from 'react';
import moment from 'moment';

import './style.less'

export default (props) => {
  const { list } = props
  let scrollTimeout = null;
  const [listHeight, setListHeight] = useState(0);
  const [hoverState, setHoverState] = useState(false);
  const scrollRef = useRef();
  const formatterTime = (val) => {
    return val ? moment(val).format('YYYY-MM-DD HH:mm') : '';
  };
  const computeHeight = () => {
    scrollTimeout = setTimeout(() => {
      setListHeight(scrollRef.current && scrollRef.current.offsetHeight || 0)
    }, 0)
  };
  useEffect(() => {
    if (list != []) {
      computeHeight()
    }
  }, [list])

  return (
    <>
      <Row>
        <Col span={8} align='center'>
          <span className='tableHead'>企业名称</span>
        </Col>
        <Col span={8} align='center'>
          <span className='tableHead'>姓名</span>
        </Col>
        <Col span={8} align='center'>
          <span className='tableHead'>申请时间</span>
        </Col>
      </Row>
      {list?.length > 12 ?
        <div
          className={listHeight > 200 ? 'scroll' : ''}
          style={{ marginLeft: '10px', marginTop: '20px' }}
          onMouseEnter={() => setHoverState(true)}
          onMouseLeave={() => setHoverState(false)}
        >
          <div className={`scroll-list ${hoverState ? 'hover' : ''}`}
            style={{ animationDuration: `${list.length}s` }}
            ref={scrollRef}>
            <List
              id="scrollList"
              dataSource={list}
              renderItem={(item, index) => (
                <List.Item>
                  <Row style={{ width: '100%' }}>
                    <Col span={8}>
                      {item.orgName}
                    </Col>
                    <Col span={8} align='center'>
                      {item.userName}
                    </Col>
                    <Col span={8} align='center'>
                      {formatterTime(item.createDate)}
                    </Col>
                  </Row>
                </List.Item>
              )}
            />
          </div>
          {
            list.length > 2 &&
            <div
              className={`scroll-list ${hoverState ? 'hover' : ''}`}
              style={{ animationDuration: `${list.length}s` }}
              ref={scrollRef}>
              <List
                dataSource={list}
                renderItem={(item, index) => (
                  <List.Item>
                    <Row style={{ width: '100%' }}>
                      <Col span={8}>
                        {item.orgName}
                      </Col>
                      <Col span={8} align='center'>
                        {item.userName}
                      </Col>
                      <Col span={8} align='center'>
                        {formatterTime(item.createDate)}
                      </Col>
                    </Row>
                  </List.Item>
                )}
              />
            </div>
          }
        </div>
        : list?.length > 0 &&
        <div
          style={{ marginLeft: '10px', marginTop: '20px' }}
          onMouseEnter={() => setHoverState(true)}
          onMouseLeave={() => setHoverState(false)}
        >
          <div className={`scroll-list`}
            style={{ animationDuration: `${list.length}s` }}
            ref={scrollRef}>
            <List
              id="scrollList"
              dataSource={list}
              renderItem={(item, index) => (
                <List.Item>
                  <Row style={{ width: '100%' }}>
                    <Col span={8}>
                      {item.orgName}
                    </Col>
                    <Col span={8} align='center'>
                      {item.userName}
                    </Col>
                    <Col span={8} align='center'>
                      {formatterTime(item.createDate)}
                    </Col>
                  </Row>
                </List.Item>
              )}
            />
          </div>
        </div>

      }
    </>
  )
}