import React, { useState, useEffect, useRef } from 'react';
import Icon from '../../Icon/index';
import { Input } from 'antd';

import '../g.scss';
import defaultImg from './story_default.svg';

function CockpitList(props: ICockpitList) {
  const { cockpitList, change, value } = props;
  const { data, total } = cockpitList;
  const [inputValue, setInputValue] = useState<string>(''); //Input的value

  const inputRef = useRef<any>(null);

  return (
    <div className="zl-lagre-screen-radio-tree zl-lagre-screen-cockpit-list">
      <div className="zl-lagre-screen-cockpit-list-search">
        <Input
          ref={inputRef}
          value={inputValue}
          placeholder="搜索"
          prefix={
            <Icon name="icon-_search" style={{ width: 14, height: 14 }} />
          }
          onChange={(e) => setInputValue(e.target.value)}
          onPressEnter={() => {
            inputRef?.current?.blur();
          }}
          onBlur={(e) =>
            change?.({ type: 'searchCockpit', value: e.target.value })
          }
        />
      </div>
      <ul className="zl-lagre-screen-cockpit-list-datas">
        {data?.length > 0 &&
          data?.map((item) => {
            return (
              <li
                onClick={() =>
                  change?.({ type: 'targetCockpit', value: item?.reportId })
                }
                className={`zl-lagre-screen-cockpit-list-data ${
                  value === item?.reportId ? 'active' : ''
                }`}
                title={item?.name}
              >
                <img
                  src={item?.autoCoverPicUrl || defaultImg}
                  alt={item?.name}
                />
                <p>{item?.name}</p>
              </li>
            );
          })}
        <li className="zl-lagre-screen-cockpit-list-tip">
          {data?.length >= total ? (
            <p>已加载全部数据</p>
          ) : (
            <p
              className="zl-lagre-screen-cockpit-list-tip-more"
              onClick={() =>
                change({ type: 'getMoreCockpit', value: inputValue })
              }
            >
              加载更多
            </p>
          )}
        </li>
      </ul>
    </div>
  );
}

export default CockpitList;

export interface ICockpitList {
  value: '';
  cockpitList: ICockpitObj;
  change: Function;
}

export interface ICockpitObj {
  total: number;
  data: cockpitData[];
}

export interface cockpitData {
  autoCoverPicUrl: string;
  reportId: string | number;
  name?: string;
}