import React, { FC } from 'react';
import deleteIcon from './assets/deleteIcon.png';
import prodIcon from './assets/prodIcon.png';
import styles from './index.less';
import { CardDiv } from '../index';

interface ComponentProps {
  isEdit?: boolean;
  proData?: any[];
  onDeleteProd?: (index: number) => void;
  onAddProd?: () => void;
}

const ProjectInfo: FC<ComponentProps> = ({
  isEdit = false,
  proData = [],
  onDeleteProd,
  onAddProd,
}) => {
  const rightView = () => (
    <div className={styles.rightView} onClick={onAddProd}>
      新增产商品
    </div>
  );

  // 不带有资费信息产品基本数据
  const renderNorRow = ({ row, index }: any) => {
    const { prodId, offerId } = row;
    let key = prodId ? `${prodId}-${index}` : `${offerId}-${index}`;
    return (
      <div key={key} className={styles.renderNorRow}>
        <div className={styles.rowHeader}>
          <div className={styles.headerIcon} />
          <div className={styles.title}>{row?.prodName || row?.offerName}</div>
          {isEdit && (
            <img
              className={styles.deleteIcon}
              src={deleteIcon}
              alt=""
              onClick={() => {
                if (onDeleteProd) onDeleteProd(index);
              }}
            />
          )}
        </div>
        <div className={styles.prodRow} style={{ marginTop: '0.46rem' }}>
          <div className={styles.left}>产商品编码</div>
          <div className={styles.right}>
            {row?.offerNbr || row?.offerCode || row?.prodCode}
          </div>
        </div>
        <div className={styles.prodRowLine} />
        <div className={styles.prodRow}>
          <div className={styles.left}>产商品类别</div>
          <div className={styles.right}>
            {row?.attrValueName || row?.offerTypeName || row?.prodTypeName}
          </div>
        </div>
      </div>
    );
  };

  return (
    <CardDiv
      title="产品基本信息"
      style={styles.cardDiv}
      rightView={!!isEdit && !!onAddProd && rightView()}
    >
      {!!proData.filter((row) => row !== undefined).length && (
        <div className={styles.prodContent}>
          {proData.map((row, index) => renderNorRow({ row, index }))}
        </div>
      )}
    </CardDiv>
  );
};

export default ProjectInfo;