import React from 'react';
import { findDOMNode } from 'react-dom';
import ImageLink from '../constant/imageLink';
import { Col, Row, Button, Icon } from '../../components/mxa';
import styles from '../styles/views/home.less';

export default class ShortcutMenu extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      menuType: 'readOnly',
      dataSource: [
        {
          key: 1,
          menuText: '客户管理',
          link: '/leaseeManage'
        }, {
          key: 2,
          menuText: '合同管理',
          link: '/leaseeManage'
        }, {
          key: 3,
          menuText: '风险管理',
          link: '/leaseeManage'
        }, {
          key: 4,
          menuText: '客户管理',
          link: '/leaseeManage'
        }, {
          key: 5,
          menuText: '合同管理',
          link: '/leaseeManage'
        }, {
          key: 6,
          menuText: '风险管理',
          link: '/leaseeManage'
        }, {
          key: 7,
          menuText: '合同管理',
          link: '/leaseeManage'
        }
      ]
    };
  }

  editMenu = () => {
    const menu = findDOMNode(this);
    console.log(menu);
    this.setState({ menuType: 'edit' });
  };

  saveShortMenuList = () => {
    this.setState({ menuType: 'readOnly' });
  };

  deleteShortMenuItem = key => {
    console.log(key);

    const newData = this.state.dataSource.filter(item => item.key !== key);
    this.setState({
      dataSource: newData
    });
  };

  renderEditButton = () => {
    if (this.state.menuType === 'readOnly') {
      return (
        <a onClick={() => this.editMenu()} className={styles.editButton}>
          <img src={ImageLink.home_shortmenu_edit} alt="编辑" />
        </a>
      );
    }
    return (
      <Button type="primary" size="small" onClick={() => this.saveShortMenuList()} className={styles.editButton}>
        保存
      </Button>
    );
  };

  renderMenuItem = () => {
    const dataSource = this.state.dataSource;
    if (this.state.menuType === 'readOnly' && dataSource) {
      return dataSource.map(item => {
        return (
          <Button key={item.key} type="ghost" className={styles.menuButton}>
            {item.menuText}
          </Button>
        );
      });
    }
    return dataSource.map(item => {
      return (
        <Button key={item.key} type="dashed" className={styles.menuButton} onClick={() => this.deleteShortMenuItem(item.key)}>
          {item.menuText + '    '}
          <div className={styles.iconRight}>
            <Icon type="close-circle" />
          </div>
        </Button>
      );
    });
  };

  renderAddButton = () => {
    if (this.state.dataSource.length < 8) {
      return (
        <Button type="ghost" className={styles.menuButton}>
          <img src={ImageLink.home_shortmenu_add} alt="新增" />
        </Button>
      );
    }
    return null;
  };

  render() {
    return (
      <div className={styles.shortcutMenu}>
        <Row type="flex" align="middle" justify="start" className={styles.commonTitle}>
          <Col span={12}>
            <Row type="flex" align="middle" justify="start" >
              <span className={styles.highLight} />
              <p>快捷菜单</p>
            </Row>
          </Col>
          <Col span={12}>
            <Row type="flex" align="middle" justify="end" >
              {this.renderEditButton()}
            </Row>
          </Col>
        </Row>
        <Row type="flex" align="center" justify="center">
          {this.renderMenuItem()}
          {this.renderAddButton()}
        </Row>
      </div>
    );
  }
}
