import React from 'react';
import styles from './CustomDD.less';
import { Row } from 'antd';

const data = [{
  id: 1,
  title: '常用条款1',
  variable: '${item1}',
  description: '描述1描述',
}, {
  id: 2,
  title: '常用条款1',
  variable: '${item2}',
  description: '描述描述描述描述描述描述2',
}, {
  id: 3,
  title: '常用变量1',
  variable: '${variable1}',
  description: '描述描述3',
}, {
  id: 4,
  title: '常用变量2',
  variable: '${variable2}',
  description: '描述描述描述描述4',
},
];

export default ({ handleInsert }) => {
  return (
    <ul style={{ margin: 0, padding: 5, overflow: 'hidden', width: 200 }}>
      {data.map(item =>
        <li key={item.id} className={styles.myli} onClick={handleInsert.bind(this, item.variable)}>
          <Row>
            {item.title}: {item.variable}
          </Row>
          <Row>
            {item.description}
          </Row>
        </li>)}
    </ul>
  );
};
