import React, { Component } from "react";
import { Modal, Table, Button, message, Spin, Upload } from "antd";
import $ from "jquery/src/ajax";
import "./table.less";
import {
  splitUrl,
} from "@/tools.js";
import ImgList from "../../../../common/imgList";
class Refund extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      dataSource: [],
      loading: false,
      columns: [
        {
          title: "退款金额(万元)",
          dataIndex: "refundAmount",
          key: "refundAmount",
        },
        {
          title: "退款时间",
          dataIndex: "refundDate",
          key: "refundDate"
        },
        {
          title: "备注",
          dataIndex: "remarks",
          key: "remarks"
        },
      ],
    };
  }

  componentDidMount() {
    if (this.props.dataSource) {
      return
    }
    this.loadData()
  }

  loadData() {
    this.setState({
      loading: true
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/orderChange/listRefund",
      data: {
        id: 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({
            dataSource: data.data
          });
        }
      }.bind(this)
    }).always(
      function () {
        this.setState({
          loading: false
        });
      }.bind(this)
    );
  }

  render() {
    const urlStr = this.props.data.refundUrl
    const orgCodeUrl = urlStr ? splitUrl(
      urlStr,
      ",",
      globalConfig.avatarHost + "/upload"
    )
      : []
    return (
      <div
        style={{
          position: "relative",
          display:
            (this.props.data.processState == 8 ||
              this.props.data.processState == 9) &&
              this.props.data.status == 4
              ? "block"
              : "none",
          marginTop: 10
        }}
      >
        <hr style={{ marginTop: 12, marginBottom: 10, backgroundColor: "black", height: 1, border: "none" }} />
        <h3 style={{ marginLeft: 20, fontWeight: 800, marginBottom: 10, display: "inline-block" }}>
          执行退款 <span style={{ fontSize: 12, fontWeight: "normal", color: "red" }}>(注：执行退款，系统将从已收款金额中直接减款)</span>
        </h3>
        <Table
          pagination={false}
          bordered
          columns={this.state.columns}
          dataSource={this.props.dataSource ? this.props.dataSource : this.state.dataSource}
          size="small"
          scroll={{ x: "max-content", y: 0 }}
        />
        <div className="clearfix">
          <h3 style={{ marginLeft: 20, fontWeight: 800, marginBottom: 10 }}>
            退款凭证
            </h3>
          <div style={{ marginLeft: 20 }}>
            {/*<Upload*/}
            {/*  className="demandDetailShow-upload"*/}
            {/*  listType="picture-card"*/}
            {/*  fileList={orgCodeUrl}*/}
            {/*  onPreview={file => {*/}
            {/*    this.setState({*/}
            {/*      previewImage: file.url || file.thumbUrl,*/}
            {/*      previewVisible: true*/}
            {/*    });*/}
            {/*  }}*/}
            {/*/>*/}
            {orgCodeUrl ? <div style={{paddingTop:'10px',paddingBottom:'10px'}}>
              <ImgList fileList={orgCodeUrl} domId={'refund1'}/>
            </div> : <div/>}
            <Modal
              maskClosable={false}
              footer={null}
              visible={this.state.previewVisible}
              onCancel={() => {
                this.setState({ previewVisible: false, rotateDeg: 0 }, () => {
                });
              }}
            >
              <img
                alt=""
                style={{
                  width: "100%",
                  transform: `rotate(${this.state.rotateDeg}deg)`
                }}
                src={this.state.previewImage || ""}
              />
              {/* <Button
                onClick={this.rotate}
                style={{
                  position: "relative",
                  left: "50%",
                  transform: "translateX(-50%)"
                }}
              >
                旋转
              </Button>
              <Button
                onClick={this.upImg}
                style={{
                  position: "absolute",
                  left: -81,
                  top: "50%",
                  transform: "translateY(-50%)"
                }}
              >
                上一张
              </Button>
              <Button
                onClick={this.downImg}
                style={{
                  position: "absolute",
                  right: -81,
                  top: "50%",
                  transform: "translateY(-50%)"
                }}
              >
                下一张
              </Button> */}
            </Modal>
          </div>
        </div>
      </div>
    );
  }
}

export default Refund;