import { Flex } from 'antd';
import React from 'react';
import styles from './index.less';

/** 基础信息 */
const Info: React.FC<{
  dataSource: any;
}> = (props) => {
  const { dataSource } = props;
  console.log('dataSource', dataSource);
  const title = `${dataSource.deviceName}-${dataSource.faultType}-${dataSource.type}`;

  const description = [
    {
      label: '工单编号',
      key: 'id',
    },
    {
      label: '报修来源',
      key: 'source',
    },
    {
      label: '故障区域',
      key: 'areaName',
    },
    {
      label: '告警发生时间',
      key: 'startTime',
    },
    {
      label: '承办单位',
      key: 'operationalUnit',
    },
  ];
  return (
    <div className={styles.container}>
      <div className={styles.title}>{title}</div>

      {description.map((item, index) => {
        return (
          <Flex key={index} gap={20} className={styles.item}>
            <div className={styles.label}>{item.label}:</div>
            <div className={styles.value}>{dataSource[item.key]}</div>
          </Flex>
        );
      })}
    </div>
  );
};

export default Info;
