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

class ReceiveLog extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      pagination: {
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        pageSize: 10,
        onChange: function (page) {
          this.loadData(page);
        }.bind(this),
        showTotal: function (total) {
          return '共' + total + '条数据';
        }
      },
      dataSource: [],
      columns: [
        {
          title: '序号',
          dataIndex: 'id',
          key: 'id',
          width: 60,
        },
        {
          title: '内容',
          dataIndex: 'remarks',
          key: 'remarks',
          render: (text, record) => {
            return `${record.adminName}，领取了客户：${record.userName}`;
          }
        },
        {
          title: '时间',
          dataIndex: 'createTime',
          key: 'createTime',
          width: 160,
        },
      ],
      expandedRowKeys: [],

      previewVisible: false,
      previewImage: ""
    }

    this.expandedRowRender = this.expandedRowRender.bind(this);
  }


  componentDidMount() {
    this.loadData();
  }

  loadData(pageNo) {
    const { pagination } = this.state;
    this.setState({
      loading: true,
    });
    $.ajax({
      method: 'get',
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + '/api/admin/userRecevieLog/list',
      data: {
        uid: this.props.uid,
        // uid: "7a6edc3e-c9e3-41f2-9161-319bf3ce3d7e",
        pageNo: pageNo || 1,
        pageSize: pagination.pageSize,
      },
      success: function (data) {
        if (data.error.length === 0) {
          this.setState({
            dataSource: data.data.list,
          });
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this),
    }).always(function () {
      this.setState({
        loading: false
      });
    }.bind(this));
  }


  expandedRowRender(record) {
    let imgList = !!record.materialUrl ? record.materialUrl.split(',') : [];
    return imgList.map(url => {
      return (<div
        style={{ width: "60px", height: "60px", padding: "6px", border: "1px solid #eee", cursor: "pointer", marginRight: "6px" }}
        onClick={() => {
          this.setState({ previewVisible: true, previewImage: globalConfig.context + "/upload" + url });
        }}
      >
        <img src={globalConfig.context + "/upload" + url} style={{ width: "100%" }} />
      </div>)
    })
  }

  handleExpandChange(rows) {
    console.log(rows)
    this.setState({ expandedRowKeys: rows });
  }

  render() {
    return (
      <Modal
        maskClosable={false}
        className="customeDetails"
        footer=""
        title="领取日志"
        width="900px"
        visible={this.props.visible}
        onOk={this.props.onCancel}
        onCancel={this.props.onCancel}
      >
        <div>
          <Spin spinning={this.state.loading}>
            <Table
              size="middle"
              columns={this.state.columns}
              rowKey={record => record.id}
              dataSource={this.state.dataSource}
              pagination={this.state.pagination}
              expandedRowKeys={this.state.expandedRowKeys}
              expandedRowRender={this.expandedRowRender}
              onExpandedRowsChange={this.handleExpandChange.bind(this)}
            />
          </Spin>

          <Modal
            maskClosable={false}
            footer={null}
            visible={this.state.previewVisible}
            onCancel={() => { this.setState({ previewVisible: false }) }}>
            <img alt="" style={{ width: '100%' }} src={this.state.previewImage || ''} />
          </Modal>
        </div>
      </Modal>
    )
  }
}

export default ReceiveLog;
