import React from 'react';
import { Link } from 'react-router-dom';
import { Layout, Table, Row, Modal, Message, Button } from 'antd';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';

import Opes from '../../components/Opes';
import './index.less';

const { confirm } = Modal;
@inject('global')
@inject('list')
@observer
class Service extends React.Component {
  state = {
    selectedKeys: [],
    page: 1,
    search: '',
    tempSearch: ''
  };

  componentDidMount() {
    this.props.list.getList();
  }

  onSelectChange = keys => {
    this.setState({ selectedKeys: keys });
  };

  onPageChange = async (page, size) => {
    // await this.props.service.getServices(page, size);
    this.setState({ page });
  };

  add = () => {
    Message.warn('...');
  }

  del = () => {
    confirm({
      title: '确认删除这些主机吗',
      onOk: () => {
        this.delOperator();
      },
      onCancel() {}
    });
  };

  delOperator = async () => {
    Message.warn('...');
    // await this.props.list.del(this.state.selectedKeys);
    // this.setState({ selectedKeys: [] });
    // Message.success('删除主机成功');
  }

  search = val => {
    this.setState({ search: val });
  }

  changeSearch = val => {
    this.setState({ tempSearch: val });
  }

  refresh = async () => {
    await this.props.list.getList();
    const search = this.state.tempSearch;
    this.setState({ search });
  };

  render() {
    const rowSelection = {
      selectedRowKeys: this.state.selectedKeys,
      onChange: this.onSelectChange,
      columnWidth: 12
    };
    
    const columns = [
      {
        title: "主机",
        dataIndex: "name",
        width: 150,
        render: (text, record) => (
          <div>
            <Link to="/host/detail">{text}</Link>
            <span className="bottom-span">({record.host_ip})</span>
          </div>
        )
      },
      {
        title: "状态",
        dataIndex: "status",
        width: 100,
        render: text => <span>{text}</span>
      },
      {
        title: "CPU",
        dataIndex: "CPU",
        width: 80,
        render: text => <span>{text}</span>
      },
      {
        title: "内存",
        width: 150,
        dataIndex: "memory",
        render: (text, record) => <div>
          <span>{text}</span>
          <span className="bottom-span">空闲: {record['freeMemory']}</span>
        </div>
      },
      {
        title: "磁盘",
        width: 150,
        dataIndex: "disk",
        render: (text, record) => <div>
          <span>{text}</span>
          <span className="bottom-span">空闲: {record['freeDisk']}</span>
        </div>
      },
      {
        title: "操作",
        dataIndex: "action",
        width: 80,
        render: (text, record) => {
          return (
            <div>
              <Button> 查看详情 </Button>
            </div>
          );
        }
      }
    ];

    const tablePagination = {
      current: this.state.page,
      pageSize: 10,
      total: this.props.list.total,
      onChange: this.onPageChange.bind(this)
    };
    const { loading } = this.props.list;
    let { data } = this.props.list;
    if (this.state.search) {
      data = data.filter(item => item.name.indexOf(this.state.search) > -1);
    }
    const dataSource = toJS(data);
    const opesData = {
      selectedRowKeys: rowSelection.selectedRowKeys,
      dataSource,
      loading
    };
    return (
      <Layout className="list-layout service-layout common-layout">
        <div className="ant-layout-header">
          <span className="manage-title">主机管理</span>
        </div>
        <Layout className="content">
          <Opes
            text="主机"
            data={opesData}
            addHandler={this.add}
            delHandler={this.del}
            refreshHandler={this.refresh}
            searchHandle={this.search}
            changeSearch={this.changeSearch}
          />
          <Row className="table-wrap">
            <Table
              bordered
              dataSource={dataSource}
              columns={columns}
              rowSelection={rowSelection}
              pagination={tablePagination}
              rowKey="id"
              loading={loading}
              scroll={{ x: true }}
            />
          </Row>
        </Layout>
      </Layout>
    );
  }
}

export default Service;