import React from "react";
import { Spin, Button, Tabs, Table, message, Modal } from "antd";
import $ from "jquery/src/ajax";

const ResolutionDetail = React.createClass({
  getInitialState() {
    return {
      visible: false,
      columns: [
        {
          title: "子项目名称",
          dataIndex: "taskName",
          key: "taskName"
        },
        {
          title: "子项目数量",
          dataIndex: "commodityQuantity",
          key: "commodityQuantity"
        },
        {
          title: "拆分操作人",
          dataIndex: "splitAname",
          key: "splitAname"
        },
        {
          title: "项目负责人",
          dataIndex: "receiverName",
          key: "receiverName"
        },
        {
          title: "拆分时间",
          dataIndex: "splitTimes",
          key: "splitTimes"
        }
      ]
    };
  },
  componentWillReceiveProps(nextProps) {
    this.setState({
      visible: nextProps.visible
    });
  },
  componentWillMount() {
    this.loadData();
  },
  loadData() {
    this.setState({
      loading: true
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/orderProject/splitProjectList",
      data: {
        tid: this.props.detail.id
      },
      success: function(data) {
        let thedata = data.data;
        let theArr = [];
        if (!thedata) {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          }
        } else {
          this.setState({
            dataSource: thedata
          });
        }
      }.bind(this)
    }).always(
      function() {
        this.setState({
          loading: false
        });
      }.bind(this)
    );
  },
  render() {
    return (
      <Modal
        style={{ position: "relative" }}
        title="拆分记录"
        visible={this.props.visible}
        onCancel={this.props.cancel}
        footer={null}
        key={"chaifen"}
        destroyOnClose={true}
      >
        <div>
          <div>当前项目名称：{this.props.detail.commodityName}</div>
          <div>
            当前项目数量：
            {this.props.detail.commodityQuantity}
          </div>
          <div>拆分项目列表：</div>
          <Table
            columns={this.state.columns}
            dataSource={this.state.dataSource}
            size="small"
            pagination={false}
            bordered
          />
        </div>
      </Modal>
    );
  }
});

export default ResolutionDetail;