import './index.less';
import { getVisibleAttribues } from '../index';
import classNames from 'classnames';
import { ConfigProvider } from 'antd';
import React, { useContext } from 'react';
const TableContent = (props) => {
  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
  const prefixCls = getPrefixCls('panda-gis-tipContent');
  const { data } = props;
  const handleData = () => {
    return getVisibleAttribues([data.attributes], data.fields);
  };
  let tableArr = handleData()[0].show;
  return (
    <div className={classNames(`${prefixCls}-contentAll`)}>
      <div className={classNames(`${prefixCls}-wriper`)}>
        <div className={classNames(`${prefixCls}-header`)}>
          <span>属性列表</span>
        </div>
        <div className={classNames(`${prefixCls}-contaner`)}>
          <ul>
            {Object.getOwnPropertyNames(tableArr).map((key, index) => {
              return (
                <li key={index}>
                  <span title={key}>{key}</span>
                  <span title={tableArr[key][1]}>{tableArr[key][1]}</span>
                </li>
              );
            })}
          </ul>
        </div>
        <div className={classNames(`${prefixCls}-foot`)}></div>
      </div>
    </div>
  );
};
export { TableContent };
