import React, { PureComponent } from "react";
import { connect } from "dva";
import {
  Modal
} from "antd";
import { amountPrecision } from '@/utils/utils';
import styles from "./index.less";
import PageGrid from "@/components/PageGrid/index.js";
import Form from "@/components/Form/index.js";

class OrderList extends PureComponent {
  constructor(props) {
    super(props);
    this.searchConditions = {};
    this.state = {
      selectedRows: [],
      selectedRowKeys: [], // 货补选择项
    };
  }
  componentWillMount() {
    const { dispatch } = this.props;
    dispatch({
      type: "orderList/getOrderStatusData",
      payload: null
    });
    // this.search();
  }
  onChangeHandle(selectedRowKeys, selectedRows) {
    this.setState({
      selectedRowKeys: selectedRowKeys,
      selectedRows: selectedRows
    });
  }
  handleOkBtn = () => {
    const selectedRows = this.state.selectedRows;
    this.hideModal();
    const confirmFun = this.props.onConfirm;
    confirmFun(selectedRows);
  };

  showModal = () => {
    this.props.dispatch({
      type: "global/orderListVisible",
      payload: true
    });
  };
  hideModal = () => {
    this.props.dispatch({
      type: "global/orderListVisible",
      payload: false
    });
  };
  // 分页搜索
  search(page = 0, pageSize = 10) {
    const { dispatch } = this.props;
    const searchConditions = this.searchConditions || {};
    searchConditions.page = page ? page : 0;
    searchConditions.size = pageSize ? pageSize : 10;
    searchConditions[`search_IN_saleModel`] = "01";
    searchConditions[`search_EQ_saleOrg`] = this.props.saleOrgId || "";
    searchConditions[`search_EQ_currency`] = this.props.currencyId || "";
    dispatch({
      type: "paymentNotice/getOrderListData",
      payload: searchConditions
    });
  }
  render() {
    const { orderStatusData, orderListData } = this.props;
    const { selectedRowKeys } = this.state;
    const columns = [
      {
        title: "订单编号",
        dataIndex: "orderCode",
        key: "orderCode",
        render: (text, record) => (
          <div
            className={styles.orderCodeBox}
          >
            <p className={styles.code}>{text}</p>
          </div>
        )
      },
      {
        title: "订单金额",
        dataIndex: "totalDealAmount",
        key: "totalDealAmount",
        className: "alignRight",
        render: (text, record) => (
          <div className={styles.orderPriceBox}>
            {amountPrecision(text, "amount")}
          </div>
        )
      },
      {
        title: "订单状态",
        dataIndex: "orderStatusName",
        key: "orderStatusName",
        className: "alignCenter",
        render: (text, record) => (
          <div className={styles.orderStatusBox}>{text}</div>
        )
      }
    ];
    const searchAttrs = [
      {
        label: "订单状态",
        key: "orderStatus",
        type: "select",
        sourceData: orderStatusData || []
      },
      {
        label: "订单日期",
        type: "comb",
        children: [
          {
            key: "orderDate",
            type: "daterange",
            startValue: this.defaultStatus ? null : Date.now() - 6 * 86400000,
            endValue: this.defaultStatus ? null : Date.now(),
          },
          {
            key: "orderCode",
            type: "inputSearch",
            placeholder: "请输入订单编码",
            enterButton: "搜索"
          }
        ]
      }
    ];
    const rowSelection = {
      selectedRowKeys: this.state.selectedRowKeys,
      onChange: this.onChangeHandle.bind(this),
      getCheckboxProps: record => ({
        disabled: false
      })
    };
    return (
      <div className={styles.orderListBox}>
        <Modal
          title={this.props.title || "请选择"}
          visible={this.props.visible || false}
          onOk={this.handleOkBtn.bind(this)}
          onCancel={this.hideModal}
          okText="确认"
          cancelText="取消"
          width={1080}
          className={styles.modal}
        >
          {/* <BreadcrumbPackage /> */}
          {/* 搜索 */}
          <div className={styles.searchConditions}>
            <Form
              searchAttrs={searchAttrs}
              setSearchParams={(value, ifSearch) => {
                this.searchConditions = value;
                if (ifSearch) {
                  this.search();
                }
              }}
            />
          </div>
          {/* 搜索--end */}
          {/* 列表 */}
          <PageGrid
            columns={columns}
            rowSelection={rowSelection}
            pageGridSource={orderListData}
            search={this.search.bind(this)}
          />
          {/* 列表--end */}
        </Modal>
      </div>
    );
  }
}
export default connect(state => ({
  visible: state.global.orderListVisible,
  orderStatusData: state.orderList.orderStatusData,
  orderListData: state.paymentNotice.orderListData
}))(OrderList);
