import React from "react";
import $ from "jquery/src/ajax";
import "./public.less";
import {
  Form,
  Button,
  Input,
  Select,
  Spin,
  Table,
  message,
  Modal,
  Upload
} from "antd";
import {
  getProjectStatus,
  getProvinceA,
  getInvoiceStatus,
  getprovince,
  getStatus,
  getPeople,
  splitUrl
} from "@/tools";
import { ChooseList } from "../../../../component/manageCenter/order/orderNew/chooseList";
import "./huiKuan.less"

const FormItem = Form.Item;

const inSpecial = React.createClass({
  loadData(pageNo) {
    this.state.data = [];
    this.setState({
      loading: true
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url:
        globalConfig.context +
        "/api/admin/orderInvoice/approvalOrderInvoiceList",
      data: {
        pageNo: pageNo || 1,
        pageSize: this.state.pagination.pageSize,
        name: this.state.nameSearch, //客户名称
        userName: this.state.userName,
        status: this.state.status,
        orderNo: this.state.orderNoSearch,
        orderDep: this.state.departmenttList,
        type: 0,
        approval: this.state.processStatus
      },
      success: function(data) {
        let theArr = [];
        if (!data.data || !data.data.list) {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          }
        } else {
          for (let i = 0; i < data.data.list.length; i++) {
            let thisdata = data.data.list[i];
            theArr.push({
              key: i,
              id: thisdata.id,
              status: thisdata.status,
              unitName: thisdata.unitName,
              orderno: thisdata.orderno,
              name: thisdata.name,
              processStatus: thisdata.processStatus,
              projectStatus: thisdata.projectStatus,
              amount: thisdata.amount,
              sumAmount: thisdata.sumAmount,
              createTime: thisdata.createTime
                ? new Date(thisdata.createTime).toLocaleString()
                : "",
              settlementAmount: thisdata.settlementAmount,
              notAmount: thisdata.notAmount,
              approval: thisdata.approval
            });
          }
        }
        this.state.pagination.current = data.data.pageNo;
        this.state.pagination.total = data.data.totalCount;
        if (data.data && data.data.list && !data.data.list.length) {
          this.state.pagination.current = 0;
          this.state.pagination.total = 0;
        }
        this.setState({
          totalPage: data.data.totalPage,
          dataSource: theArr,
          pagination: this.state.pagination
        });
      }.bind(this)
    }).always(
      function() {
        this.setState({
          loading: false
        });
      }.bind(this)
    );
  },

  getInitialState() {
    return {
      visible: false,
      selectedRowKeys: [], // Check here to configure the default column
      loading: false,
      searchMore: true,
      assignVisible: false,
      releaseDate: [],
      totalPage: 0,
      boHuivisible: false,
      selectedRowKeys: [],
      selectedRows: [],
      //开票状态
      //用户名称搜索
      // userName: "",
      contractNo: "",
      loading: false,
      reason: "",
      foo: 0,
      // 子组件改变的表格title数组
      changeList: undefined,
      pagination: {
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        pageSize: 10,
        onChange: function(page) {
          this.loadData(page);
        }.bind(this),
        showTotal: function(total) {
          return "共" + total + "条数据";
        }
      },
      columns: [
        {
          title: "合同编号",
          dataIndex: "id",
          key: "id"
          // fixed: "left"
        },
        {
          title: "订单编号",
          dataIndex: "orderNo",
          key: "orderNo"
        },
        {
          title: "客户名称",
          dataIndex: "name",
          key: "name"
        },
        {
          title: "合同额",
          dataIndex: "hetong",
          key: "hetong"
        },
        {
          title: "本次回款（万元）",
          dataIndex: "benci",
          key: "benci"
        },
        {
          title: "回款时间",
          dataIndex: "huiTime",
          key: "huiTime"
        },
        {
          title: "批量导入时间",
          dataIndex: "daoTime",
          key: "daoTime"
        },
        {
          title: "备注",
          dataIndex: "remake",
          key: "remake"
        }
      ],
      columnsDate: [
        {
          title: "编号",
          dataIndex: "id",
          key: "id"
        },
        {
          title: "订单编号",
          dataIndex: "orderno",
          key: "orderno"
        },
        {
          title: "开票金额(万元)",
          dataIndex: "amount",
          key: "amount"
        },
        {
          title: "申请时间",
          dataIndex: "createTime",
          key: "createTime"
        },
        {
          title: "开票状态",
          dataIndex: "status",
          key: "status",
          render: text => {
            return getInvoiceStatus(text);
          }
        }
      ],
      dataSource: [
        {
          id: 1,
          orderNo: "w1",
          name: "张三",
          hetong: 3,
          benci: 1,
          huiTime: "2019-10-11",
          daoTime: "2019-10-11",
          remake: "hhhhh",
          key: "w1"
        },
        {
          id: 2,
          orderNo: "w2",
          name: "王五",
          hetong: 3,
          benci: 1,
          huiTime: "2019-10-11",
          daoTime: "2019-10-11",
          remake: "zzzzzz",
          key: "w2"
        },
        {
          id: 3,
          orderNo: "w3",
          name: "二麻子",
          hetong: 3,
          benci: 1,
          huiTime: "2019-10-11",
          daoTime: "2019-10-11",
          remake: "yyyyyyy",
          key: "w3"
        },
        {
          id: 4,
          orderNo: "w4",
          name: "jax",
          hetong: 3,
          benci: 1,
          huiTime: "2019-10-11",
          daoTime: "2019-10-11",
          remake: "bbbbbb",
          key: "w4"
        }
      ],
      searchTime: [,]
    };
  },

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

  componentWillMount() {
    // this.loadData();
  },
  reset() {
    this.state.nameSearch = "";
    this.state.releaseDate = [];
    this.state.orderNoSearch = "";
    this.state.userName = "";
    // this.loadData();
  },
  
  changeList(arr) {
    const newArr = [];
    this.state.columns.forEach(item => {
      arr.forEach(val => {
        if (val === item.title) {
          newArr.push(item);
        }
      });
    });
    this.setState({
      changeList: newArr
    });
  },
  onSelectChange(selectedRowKeys) {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    this.setState({ selectedRowKeys });
  },
  showModal() {
    this.setState({
      visible: true,
    });
  },

  handleOk() {
    this.setState({ loading: true });
    setTimeout(() => {
      this.setState({ loading: false, visible: false });
    }, 3000);
  },

  handleCancel() {
    this.setState({ visible: false });
  },



  render() {
    const formItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 14 }
    };
    var departmentArr = this.state.departmentArr || [];
    const { loading, selectedRowKeys,visible } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
      hideDefaultSelections: true
    };
    return (
      <div className="user-content" style={{ position: "relative" }}>
        <div className="content-title">
          <span>回款</span>
        </div>
        <div className="user-search">
          <Input
            placeholder="合同编号"
            value={this.state.nameSearch}
            onChange={e => {
              this.setState({ nameSearch: e.target.value });
            }}
          />
          <Input
            placeholder="订单编号"
            value={this.state.orderNoSearch}
            onChange={e => {
              this.setState({ orderNoSearch: e.target.value });
            }}
          />
          <Input
            placeholder="客户名称"
            value={this.state.userName}
            onChange={e => {
              this.setState({ userName: e.target.value });
            }}
          />
          <Select
            placeholder="订单部门"
            style={{ width: 150, marginRight: 10 }}
            value={this.state.departmenttList}
            onChange={e => {
              this.setState({ departmenttList: e });
            }}
          >
            {departmentArr.map(function(item) {
              return <Select.Option key={item.id}>{item.name}</Select.Option>;
            })}
          </Select>
          <Button
            type="primary"
            onClick={this.search}
            style={{ marginLeft: 10 }}
          >
            搜索
          </Button>
          <Button onClick={this.reset}>重置</Button>
        </div>

        <ChooseList
          columns={this.state.columns}
          changeFn={this.changeList}
          changeList={this.state.changeList}
          top={55}
          display={"inline-block"}
        />
        <Button
          type="primary"
          style={{ marginLeft: 15 }}
          disabled={this.state.selectedRowKeys.length == 1 ? false : true}
          onClick={this.showModal}
        >
          修改单条数据
        </Button>

        <div className="patent-table">
          <Spin spinning={this.state.loading}>
            <Table
              columns={
                this.state.changeList == undefined
                  ? this.state.columns
                  : this.state.changeList
              }
              //   scroll={{ x: 1500, y: 0 }}
              dataSource={this.state.dataSource}
              pagination={this.state.pagination}
              rowSelection={rowSelection}
              bordered
            />
          </Spin>
        </div>

        <Modal
          visible={visible}
          title="Title"
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          footer={[
            <Button key="back" onClick={this.handleCancel}>
              Return
            </Button>,
            <Button
              key="submit"
              type="primary"
              loading={loading}
              onClick={this.handleOk}
            >
              Submit
            </Button>
          ]}
        >
          <p>{this.state.dataSource.id}</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
        </Modal>

      </div>
    );
  }
});

export default inSpecial;
