/** @format */

import _ from 'lodash';
import moment from 'moment';
import React, { useEffect, useState } from 'react';

import { Container } from './styled';

const defaultMaleImg =
  'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/6febcd2b-65b1-4c28-a9b6-9e5b5a0d7f1d.png';
const defaultFemaleImg =
  'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/7efd5719-bde0-4990-abfb-37042b829909.png';

interface DetailListProps {
  data: Record<string, any>[];
  limit: number;
  marginBottom?: number;
  background?: string;
  firstRowColor?: string;
  oddEvenOpen?: boolean;
  evenBackground?: string;
  oddBackground?: string;
  size: {
    width: number;
    height: number;
  };
  series: string[];
}

const DetailList = (props: DetailListProps) => {
  const {
    data = [],
    limit = 4,
    background = 'rgba(0, 0, 0, 0.5)',
    firstRowColor = 'rgba(45,185,255,0.3)',
    oddEvenOpen,
    evenBackground,
    oddBackground,
    marginBottom,
    size: { width, height },
    series = [
      {
        dataIndex: 'trafficName',
        title: '姓名',
        width: '10%',
      },
      {
        dataIndex: 'identityName',
        title: '人员类型',
        width: '30%',
      },
      {
        dataIndex: 'inOrOut',
        title: '状态',
        width: '20%',
      },
      {
        dataIndex: 'time',
        title: '通行时间',
        width: '30%',
      },
    ],
  } = props;

  const [detailRowIndex, setDetailRowIndex] = useState(0);

  useEffect(() => {
    setDetailRowIndex(0);
  }, [data]);

  function handleRowClick(index: number) {
    setDetailRowIndex(index);
  }

  return (
    <Container style={{ width, height, background }}>
      <div className="tHead">
        {series &&
          series.map((col: any) => {
            return (
              <span key={col.dataIndex} style={{ width: col.width }}>
                {col.title}
              </span>
            );
          })}
      </div>

      {data &&
        data.length > 0 &&
        data.slice(0, limit).map((item: Record<string, any>, index: number) => {
          return (
            <div
              className="carItem"
              key={item.id}
              style={{
                marginBottom,
              }}
            >
              <div
                className="info"
                style={{
                  background:
                    index === detailRowIndex && firstRowColor
                      ? firstRowColor
                      : oddEvenOpen
                      ? index % 2 === 0
                        ? evenBackground
                        : oddBackground
                      : 'none',
                }}
                onClick={() => handleRowClick(index)}
              >
                {series &&
                  series.length > 0 &&
                  series.map((col: any) => (
                    <>
                      {col.dataIndex === 'time' ? (
                        <span key={col.dataIndex} style={{ width: col.width }}>
                          {item[col.dataIndex] &&
                            moment(item[col.dataIndex]).format('MM-DD HH:mm')}
                        </span>
                      ) : (
                        <span key={col.dataIndex} style={{ width: col.width }}>
                          {item[col.dataIndex]}
                        </span>
                      )}
                    </>
                  ))}
              </div>

              {index === detailRowIndex && (
                <div className="detail">
                  <div className="detailInfo">
                    <img
                      src={
                        item.eventPicUrl ||
                        (item.sex === 0 ? defaultMaleImg : defaultFemaleImg)
                      }
                      alt="抓拍"
                    />
                    <div>
                      <div>
                        {item.trafficName}
                        &nbsp;&nbsp;&nbsp;{' '}
                        {item.sex === 0 ? '女' : item.sex === 1 ? '男' : ''}
                      </div>
                      <div>{item.trafficTypeDesc}</div>
                      <div>{item.position}</div>
                    </div>
                  </div>
                </div>
              )}
            </div>
          );
        })}
    </Container>
  );
};

export default DetailList;