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

const ChangeLog = React.createClass({
  getInitialState() {
    return {
      visible: false,
      enterpriseName: "",
      loading: false,
      colunmn: [
        {
          title: "操作人名称",
          dataIndex: "adminName",
          key: "adminName",
        },
        {
          title: "客户名称",
          dataIndex: "name",
          key: "name",
          render: (text) => {
            return (
              <Tooltip title={text}>
                <div
                  // style={{
                  //   maxWidth: "150px",
                  //   overflow: "hidden",
                  //   textOverflow: "ellipsis",
                  //   whiteSpace: "nowrap",
                  // }}
                >
                  {text}
                </div>
              </Tooltip>
            );
          },
        },
        {
          title: "操作时间",
          dataIndex: "createTimes",
          key: "createTimes",
        },
      ],
      dataSource: [],
    };
  },

  loadData() {
    this.setState({
      loading: true,
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/customer/listUserName",
      data: {
        uid: this.props.id,
      },
      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({
            initialName: data.data[0] ? data.data[0].name : "",
          });
          data.data.splice(0, 1);
          this.setState({
            dataSource: data.data,
          });
        }
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  },

  componentWillMount() {
    this.loadData();
  },

  render() {
    return (
      <Modal
        footer={null}
        maskClosable={false}
        width={"1200px"}
        title={"更名日志"}
        visible={this.props.visible == "changelog"}
        onCancel={this.props.cancel}
      >
        <div>
          <div>
            {this.state.initialName ? (
              <div style={{ paddingBottom: "20px" }}>
                初始客户名称:{this.state.initialName}
              </div>
            ) : null}
            <Spin spinning={this.state.loading}>
              <Table
                columns={this.state.colunmn}
                dataSource={this.state.dataSource}
                pagination={false}
                scroll={{ x: "max-content", y: 0 }}
                bordered
                size="small"
              />
            </Spin>
          </div>
        </div>
      </Modal>
    );
  },
});

export default ChangeLog;