/** @format */

import React from 'react';

import { CardItemWrapper } from './styled';
import { getHouseItemColorByType } from './utils';

/**
 * @description 房屋列表
 */

interface CardItemProps {
  item: Record<string, any>;
  onClick: (item: Record<string, any>) => void;
}

const CardItem = (props: CardItemProps) => {
  const {
    item,

    onClick,
  } = props;

  return (
    <CardItemWrapper
      style={{ background: getHouseItemColorByType(item.type) }}
      onClick={() => onClick(item)}
    >
      <div className="room-info ">{`${item.building ? item.building : ''}${
        item.unit ? item.unit : ''
      }${item.room}`}</div>
      <div className="room-footer">
        <span>实有人数</span>
        <span className="number">{item.actualNum || 0}</span>
        <div className="icon circle control ml-auto"></div>
        <span className="number">{item.controlNum || 0}</span>
        <div className="icon circle assist ml16"></div>
        <span className="number">{item.assistNum || 0}</span>
      </div>
      {item.warning ? (
        <div className="re-icon-tag icon irregular warning" />
      ) : null}
    </CardItemWrapper>
  );
};

export default CardItem;