import React, { useMemo } from 'react';

import '../g.scss';

function BorderImg(props: IBorderImg) {
  const {
    value='',
    imgList=[],
    change,
    wrapStyle = { padding: '6px 20px 6px 20px' }
  } = props;

  const Redio = useMemo(() => {
    return (
      <div className="zl-large-screen-unit-border-img" style={wrapStyle}>
        {Array.isArray(imgList) &&
          imgList?.length > 0 &&
          imgList.map((item) => {
            if (item?.type === 'large') {
              return (
                <div
                  className={`zl-large-screen-unit-border-img-large ${
                    item?.key === value
                      ? 'zl-large-screen-unit-border-img-large-active'
                      : ''
                  }`}
                  onClick={() => {
                    change?.(item?.key);
                  }}
                  key={item?.key}
                >
                  <img src={item?.imgUrl} alt="图片损坏" />
                </div>
              );
            } else {
              return (
                <div
                  key={item?.key}
                  className={`zl-large-screen-unit-border-img-normal ${
                    item?.key === value
                      ? 'zl-large-screen-unit-border-img-large-active'
                      : ''
                  }`}
                  onClick={() => {
                    change?.(item?.key);
                  }}
                >
                  <img src={item?.imgUrl} alt="图片损坏" />
                </div>
              );
            }
          })}
      </div>
    );
  }, [value, imgList]);

  return Redio;
}

export default BorderImg;

export interface IBorderImg {
  value?: string;
  imgList: IImgList[];
  change?: Function;
  wrapStyle?: React.CSSProperties;
}
export interface IImgList {
  key: string;
  type?: string;
  imgUrl?: string;
}