import React, { Component } from "react";
import { Modal, Table, Button, message, Spin } from "antd";
import $ from "jquery/src/ajax";
import "./table.less";
// import ReactToPrint from "react-to-print";

const status = [
  {
    value: "0",
    key: "发起"
  },
  {
    value: "1",
    key: "审核中"
  },
  {
    value: "2",
    key: "通过"
  },
  {
    value: "3",
    key: "驳回"
  }
];

const getStatus = function(e) {
  if (e || e == 0) {
    let str = e.toString();
    let theType = "";
    status.map(function(item) {
      if (item.value == str) {
        theType = item.key;
      }
    });
    return theType;
  }
};

class Rizhi extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      dataSource: [],
      loading: false,
      columns: [
        {
          title: "创建时间",
          dataIndex: "createTimes",
          key: "createTimes",
          width: 180
        },
        {
          title: "操作人名称",
          dataIndex: "aname",
          key: "aname",
          width: 150
        },
        {
          title: "状态",
          dataIndex: "status",
          key: "status",
          width: 150,
          render: text => {
            return getStatus(text);
          }
        },
        {
          title: "备注",
          dataIndex: "remarks",
          key: "remarks",
          render: text => {
            return <div style={{ width: 300 }}>{text}</div>;
          }
        }
      ]
    };
  }

  loadData() {
    this.setState({
      loading: true
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/orderChange/orderChangeLogList",
      data: {
        changeId: this.props.changeId
      },
      success: function(data) {
        if (data.error.length || data.data.list == "") {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          }
        } else {
          this.setState({
            dataSource: data.data
          });
        }
      }.bind(this)
    }).always(
        function() {
          this.setState({
            loading: false
          });
        }.bind(this)
    );
  }

  changeModal() {
    this.setState({
      visible: !this.state.visible
    });
  }

  render() {
    return (
        <div
            style={{
              display: "inline-block",
              verticalAlign: "top",
            }}
        >
          <Button
              style={{ position: "relative", zIndex: 999 }}
              onClick={() => {
                this.loadData();
                this.changeModal();
              }}
          >
            查看变更日志
          </Button>
          {/* <div>
          {this.state.dataSource.map((item) =>  <div>{item.aname}</div> )}
        </div> */}
          <Modal
              maskClosable={false}
              visible={this.state.visible}
              title="变更日志"
              footer=""
              width={800}
              onCancel={() => {
                this.changeModal();
              }}
          >
            <Spin spinning={this.state.loading}>
              <div
                  ref={e => {
                    this.refs = e;
                  }}
                  style={{marginTop:20}}
              >
                <h2 style={{ textAlign: "center", marginBottom: 10 }}>
                  合同变更日志
                </h2>
                <Table
                    columns={this.state.columns}
                    dataSource={this.state.dataSource}
                    pagination={false}
                />
              </div>
            </Spin>
            {/* <ReactToPrint
            trigger={() => (
              <div className="clearfix">
                <Button
                  type="primary"
                  style={{ float: "right", marginTop: 10 }}
                >
                  打印
                </Button>
              </div>
            )}
            content={() => this.refs}
          /> */}
          </Modal>
        </div>
    );
  }
}

export default Rizhi;