import React from 'react';
import styles from './style/compInfo.module.less';
import { Space, Divider, Table, TableColumnProps } from '@arco-design/web-react';

const CompInfo = ({ currentCompInfo }) => {

  const columns: TableColumnProps[] = [
    {
      title: '参数名',
      dataIndex: 'id'
    },
    {
      title: '参数类型',
      dataIndex: 'dataType'
    },
    {
      title: '描述',
      dataIndex: 'desc'
    }
  ];

  // 渲染节点参数列表
  const renderParamsTable = () => {
    return (
      <div className={styles['params']}>
        <h3>输入参数</h3>
        <Table
          columns={columns}
          data={currentCompInfo.def?.dataIns}
          pagination={false}
          scroll={{
            y: 150
          }} />
        <h3>输出参数</h3>
        <Table
          columns={columns}
          data={currentCompInfo.def?.dataOuts}
          pagination={false}
          scroll={{
            y: 150
          }} />
      </div>
    );
  };

  return (
    currentCompInfo ? (<div className={styles['comp-container']}>
      <div className={styles['comp-preview']}>
        <h3>组件预览</h3>
        <div className={styles['comp-housing']}></div>
      </div>
      <div className={styles['comp-info']}>
        <div className={styles['header']}>
          <Space size={40}>
            <div className={styles['title']}>{currentCompInfo.name}</div>
          </Space>
        </div>
        <Divider style={{ borderColor: '#5484ff', marginTop: 0, marginBottom: 30 }} />
        <div className={styles['extra']}>
          <Space size={30}>
            <div className={styles['extra-font']}>{currentCompInfo.identifier}</div>
            <div className={styles['extra-font']}>分类：{currentCompInfo.componentClassify}</div>
            <div className={styles['extra-font']}>语言：{currentCompInfo.codeLanguage}</div>
          </Space>
        </div>
        <Divider style={{ marginTop: 15, borderBottomStyle: 'dashed' }} />
        <div className={styles['description']}>
          {currentCompInfo.description ? currentCompInfo.description : ' - '}
        </div>
        <Divider style={{ borderBottomStyle: 'dashed' }} />
        {renderParamsTable()}
        <Divider style={{ borderBottomStyle: 'dashed' }} />
      </div>
    </div>) : <div>请选择组件</div>
  );
};

export default CompInfo;