import React, { PureComponent } from "react";
import { connect } from "dva";
import { routerRedux } from "dva/router";
import {
  Menu,
  Icon,
  Pagination,
  Button,
  Table,
  Checkbox,
  message,
  Tooltip,
  Popover,
  Popconfirm
} from "antd";
import moment from "moment";
import styles from "./index.less";
import CustIcon, { STATUS as IconStatus } from "../CustIcon";
import { amountPrecision } from "@/utils/utils";

class GoodsTableList extends PureComponent {
  // 分页切换
  paginationChange(page, pageSize) {
    const { pageChange } = this.props;
    if (pageChange) {
      pageChange(page - 1, pageSize);
    }
  }
  // 字表订单号点击去详情
  goDetailHandle(data) {
    const { dispatch } = this.props;
    if (data.orderStatusCode == "01") {
      dispatch(
        routerRedux.push({
          pathname: "/buyer/orderEdit",
          orderId: data.id
        })
      );
    } else {
      dispatch(
        routerRedux.push({
          pathname: "/buyer/orderListDetail",
          orderId: data.id
        })
      );
    }
  }
  // 点击行
  expandedRowRender(record, index, event) {
    const { moduleKey, dispatch, sumCastFlushdetail } = this.props;
    let columns = null;
    switch (moduleKey) {
      case "Cost":
        columns = [
          {
            title: "订单编码",
            align: "left",
            width: "220px",
            dataIndex: "billDate",
            key: "billDate"
          },
          {
            title: "订单日期",
            align: "left",
            width: "180px",
            dataIndex: "creationTime",
            key: "creationTime",
            render: (text, record, index) => {
              return (
                <span>{moment(record.billDate).format("YYYY-MM-DD")}</span>
              );
            }
          },
          {
            title: "冲抵金额",
            align: "right",
            width: "180px",
            dataIndex: "flushAmount",
            key: "flushAmount",
            render: (text, record, index) => {
              return (
                <span>
                  {record.flushAmount
                    ? amountPrecision(record.flushAmount)
                    : ""}
                </span>
              );
            }
          },
          {
            title: "货补兑付金额",
            className: "pr160",
            align: "right",
            dataIndex: "flushAmount2",
            key: "flushAmount2",
            render: (text, record, index) => {
              return (
                <span>
                  {record.flushAmount
                    ? amountPrecision(record.flushAmount)
                    : ""}
                </span>
              );
            }
          }
        ];
        break;
      case "AccountBalance":
        record.items = [].concat(record);
        columns = [
          {
            title: "结算方式",
            width: "160px",
            align: "left",
            key: "settleMethodName",
            render: (text, record, index) => {
              return <span>{record.settleMethodName}</span>;
            }
          },
          {
            title: "收款银行账户",
            width: record.isRedflush == 0 ? "230px" : "0px",
            align: "left",
            key: "receiptAccountAccountNumber",
            render: (text, record, index) => {
              return <span>{record.receiptAccountAccountNumber}</span>;
            }
          },
          {
            title: "产品线",
            width: "90px",
            dataIndex: "stock",
            align: "left",
            key: "productLineName",
            render: (text, record, index) => {
              return <span>{record.productLineName}</span>;
            }
          },
          {
            title: "收款业务类型",
            width: "120px",
            dataIndex: "",
            align: "right",
            key: "billreceiptTypeName",
            render: (text, record, index) => {
              return <span>{record.billreceiptTypeName}</span>;
            }
          },
          {
            title: "收款金额",
            width: "130px",
            dataIndex: "",
            align: "right",
            key: "money",
            render: (text, record, index) => {
              return <span>{amountPrecision(record.money)}</span>;
            }
          },
          {
            title: "核销订单",
            width: "130px",
            dataIndex: "",
            align: "right",
            key: "record-job",
            render: (text, record, index) => {
              const returnDeal = [];
              record.billlistCheck.forEach((ele, index) => {
                returnDeal.push(<p key={ele.srcBillcode}>{ele.checkCode}</p>);
              });
              return <div>{returnDeal}</div>;
            }
          },
          {
            title: "核销金额",
            width: "190px",
            dataIndex: "",
            className: "pr40",
            align: "right",
            key: "record-money",
            render: (text, record, index) => {
              const returnMoney = [];
              record.billlistCheck.forEach((ele, index) => {
                returnMoney.push(<p key={ele.srcBillcode}>{ele.checkMoney}</p>);
              });
              return <div>{returnMoney}</div>;
            }
          }
        ];
        break;
      case "CostReconcile":
        columns = [
          {
            title: "订货单编码",
            align: "left",
            width: "220px",
            dataIndex: "customerOrderCode",
            key: "customerOrderCode",
            render: (text, record, index) => {
              return (
                <div
                  className={styles.orderCodeBox}
                  onClick={this.goDetailHandle.bind(this, record)}
                >
                  <p className={styles.code}>{text}</p>
                </div>
              );
            }
          },
          {
            title: "订单日期",
            align: "left",
            width: "180px",
            dataIndex: "billDate",
            key: "billDate",
            render: (text, record, index) => {
              return (
                <span>{moment(record.billDate).format("YYYY-MM-DD")}</span>
              );
            }
          },
          {
            title: "冲抵金额",
            align: "right",
            width: "180px",
            dataIndex: "flushAmount",
            key: "flushAmount",
            render: (text, record, index) => {
              return (
                <span>
                  {record.flushAmount
                    ? amountPrecision(record.flushAmount)
                    : ""}
                </span>
              );
            }
          },
          {
            title: "兑付金额",
            className: "pr160",
            align: "right",
            dataIndex: "flushAmount",
            key: "flushAmount",
            render: (text, record, index) => {
              return (
                <span>
                  {record.flushAmount
                    ? amountPrecision(record.flushAmount)
                    : ""}
                </span>
              );
            }
          }
        ];
        break;
      case "DealReconcile": // 应付对账
        record.items = [].concat(record);
        columns = [
          {
            title: "核销金额",
            align: "left",
            width: "120px",
            dataIndex: "cancellationMoney",
            key: "cancellationMoney",
            render: (text, record, index) => {
              return <span>{record.cancellationMoney}</span>;
            }
          },
          {
            title: "实际付款核销金额",
            align: "left",
            width: "130px",
            dataIndex: "paymentMoney",
            key: "paymentMoney",
            render: (text, record, index) => {
              const returnDeal = [];
              record.billlistPaymentAccount.forEach((ele, key) => {
                returnDeal.push(
                  <p key={ele.paymentMoney}>{ele.paymentMoney}</p>
                );
              });
              return <div>{returnDeal}</div>;
            }
          },
          {
            title: "收款单号",
            align: "left",
            width: "130px",
            dataIndex: "paymentCode",
            key: "paymentCode",
            render: (text, record, index) => {
              const returnDeal = [];
              record.billlistPaymentAccount.forEach((ele, index) => {
                returnDeal.push(<p key={ele.paymentCode}>{ele.paymentCode}</p>);
              });
              return <div>{returnDeal}</div>;
            }
          },
          {
            title: "收款核销日",
            width: "130px",
            align: "left",
            dataIndex: "paymentTime",
            key: "paymentTime",
            render: (text, record, index) => {
              const returnDeal = [];
              record.billlistPaymentAccount.forEach((ele, index) => {
                returnDeal.push(
                  <p key={ele.paymentCode}>
                    {moment((ele, index).paymentTime).format("YYYY-MM-DD")}
                  </p>
                );
              });
              return <div>{returnDeal}</div>;
            }
          },
          {
            title: "退款核销额",
            align: "right",
            width: "130px",
            dataIndex: "refundMoney",
            key: "refundMoney",
            render: (text, record, index) => {
              const returnDeal = [];
              record.billlistRefundAccount.forEach((ele, index) => {
                returnDeal.push(<p key={ele.refundMoney}>{ele.refundMoney}</p>);
              });
              return <div>{returnDeal}</div>;
            }
          },
          {
            title: "退款单号",
            align: "right",
            width: "130px",
            dataIndex: "refundCode",
            key: "refundCode",
            render: (text, record, index) => {
              const returnDeal = [];
              record.billlistRefundAccount.forEach((ele, index) => {
                returnDeal.push(<p key={ele.refundCode}>{ele.refundCode}</p>);
              });
              return <div>{returnDeal}</div>;
            }
          },
          {
            title: "退款核销日",
            align: "right",
            width: "120px",
            dataIndex: "refundTime",
            key: "refundTime",
            render: (text, record, index) => {
              const returnDeal = [];
              record.billlistRefundAccount.forEach((ele, index) => {
                returnDeal.push(
                  <p key={ele.refundCode}>
                    {moment((ele, index).refundTime).format("YYYY-MM-DD")}
                  </p>
                );
              });
              return <div>{returnDeal}</div>;
            }
          },
          {
            title: "关联退货订单",
            align: "right",
            dataIndex: "srcBillcode",
            key: "srcBillcode",
            render: (text, record, index) => {
              const returnDeal = [];
              record.billlistRefundAccount.forEach((ele, index) => {
                returnDeal.push(<p key={ele.srcBillcode}>{ele.srcBillcode}</p>);
              });
              return <div>{returnDeal}</div>;
            }
          }
        ];
        break;
    }
    return (
      <Table
        className={styles.listChildren}
        columns={columns}
        dataSource={record.items}
        pagination={false}
        rowKey={record => record.id}
        footer={() => {
          if (record
            && ((record.billlistPaymentAccount && record.billlistPaymentAccount.length > 0)
            || (record.billlistRefundAccount && record.billlistRefundAccount.length > 0)))
            return (
              <div className={styles.tableFooter}>
                <div className={styles.bacg}>
                  <div>关联订单号</div>
                  <div>{record.beginBillcode}</div>
                </div>
                <div className={styles.bacg}>
                  <div>关联出库单号</div>
                  <div>{record.srcBillcode}</div>
                </div>
              </div>
            );
          }
        }
      />
    );
  }
  render() {
    // const { loading, selectedRowKeys } = this.state;
    const {
      goodsData,
      dispatch,
      pagination,
      moduleKey,
      tabloading
    } = this.props;
    const paginationCfg = {
      showQuickJumper: true,
      showSizeChanger: true,
      size: "small",
      total: goodsData && goodsData.totalElements ? goodsData.totalElements : 0,
      pageSize: goodsData && goodsData.size ? goodsData.size : 10,
      onShowSizeChange: this.paginationChange.bind(this),
      onChange: this.paginationChange.bind(this)
    };

    // moudleKey  区分模块渲染不同table
    let columns = null;
    switch (moduleKey) {
      case "PaymentNotice": // 付款单登记
        const { getButtons } = this.props;
        columns = [
          {
            title: "付款单编号",
            width: "180px",
            align: "center",
            dataIndex: "code",
            key: "paymentCode",
            render: (text, record, index) => {
              return <span>{record.code}</span>;
            }
          },
          {
            title: "付款单日期",
            width: "100px",
            align: "center",
            dataIndex: "claimTime",
            key: "claimTime",
            render: (text, record, index) => {
              return (
                <span>
                  {record.claimTime
                    ? moment(record.claimTime).format("YYYY-MM-DD")
                    : ""}
                </span>
              );
            }
          },
          {
            title: "付款金额",
            width: "100px",
            align: "right",
            dataIndex: "money",
            key: "paymentMoney",
            render: (text, record, index) => {
              return <span>{amountPrecision(text, "amount")}</span>;
            }
          },
          {
            title: "收款银行账户",
            width: "180px",
            align: "center",
            dataIndex: "receiptAccountAccountNumber",
            key: "receiptAccountAccountNumber",
            render: (text, record, index) => {
              return <span>{text}</span>;
            }
          },
          {
            title: "付款单状态",
            width: "120px",
            align: "center",
            dataIndex: "billClaimState",
            key: "billClaimState",
            render: (text, record, index) => {
              const billClaimStates = {
                1: "暂存",
                2: "提交",
                3: "审批通过",
                4: "审批中",
                5: "收回",
                6: "审批不通过",
                7: "暂存"
              };
              return <span>{billClaimStates[`${text}`]}</span>;
            }
          },
          // {
          //   title: "操作",
          //   width: "120px",
          //   align: "center",
          //   dataIndex: "paymentAction",
          //   key: "paymentAction",
          //   render: (text, record, index) => getButtons(record)
          // }
        ];
        break;
      case "Cost": // 费用管理
        columns = [
          {
            title: "日期",
            width: "110px",
            align: "left",
            dataIndex: "billDate",
            key: "billDate",
            render: (text, record, index) => {
              return (
                <span>{moment(record.billDate).format("YYYY-MM-DD")}</span>
              );
            }
          },
          {
            title: "单据号",
            width: "180px",
            align: "left",
            dataIndex: "billCode",
            key: "billCode",
            render: (text, record, index) => {
              return <span>{record.billCode}</span>;
            }
          },
          {
            title: "冲抵方式",
            width: "90px",
            dataIndex: "stock",
            align: "left",
            render: (text, record, index) => {
              return <span>票扣</span>;
            }
          },
          {
            title: "销售组织",
            width: "150px",
            dataIndex: "",
            align: "left",
            dataIndex: "saleOrgName",
            key: "saleOrgName",
            render: (text, record, index) => {
              return <span>{record.saleOrgName}</span>;
            }
          },
          {
            title: "按销售组织冲抵",
            width: "145px",
            align: "left",
            dataIndex: "billStatusName1",
            key: "billStatusName1",
            render: (text, record, index) => {
              return <span>是</span>;
            }
          },
          /* {
                        title: '产品线',
                        width: '110px',
                        align: 'left',
                        className: 'shoppingCat',
                        render: (text, record, index) => (
                            <span>A产品线</span>
                        ),
                    }, */
          {
            title: "单据状态",
            width: "100px",
            align: "left",
            dataIndex: "billStatusName",
            key: "billStatusName",
            render: (text, record, index) => {
              return <span>{record.billStatusName}</span>;
            }
          },
          {
            title: "费用金额",
            width: "120px",
            align: "right",
            dataIndex: "castAmount",
            key: "castAmount",
            render: (text, record, index) => {
              return (
                <span>
                  {record.castAmount ? amountPrecision(record.castAmount) : ""}
                </span>
              );
            }
          },
          {
            title: "订单冲抵",
            width: "130px",
            align: "right",
            dataIndex: "actualFlushAmount",
            key: "actualFlushAmount",
            render: (text, record, index) => {
              return (
                <span>
                  {record.actualFlushAmount
                    ? amountPrecision(record.actualFlushAmount)
                    : ""}
                </span>
              );
            }
          },
          {
            title: "货补兑付",
            width: "130px",
            align: "right",
            dataIndex: "actualGoodssupplementAmount",
            key: "actualGoodssupplementAmount",
            render: (text, record, index) => {
              return (
                <span>
                  {record.actualGoodssupplementAmount
                    ? amountPrecision(record.actualGoodssupplementAmount)
                    : ""}
                </span>
              );
            }
          },
          {
            title: "余额",
            width: "140px",
            align: "right",
            className: "pr35",
            dataIndex: "castBalance",
            key: "castBalance",
            render: (text, record, index) => {
              return (
                <span>
                  {record.castBalance
                    ? amountPrecision(record.castBalance)
                    : ""}
                </span>
              );
            }
          },
          {
            title: "备注",
            width: "90px",
            align: "left",
            dataIndex: "remark",
            key: "remark",
            render: (text, record, index) => {
              if (record && record.remark) {
                const content = (
                  <div className={styles.remarkTip}>{record.remark}</div>
                );
                return (
                  <div className={styles.remark}>
                    <Popover content={content} placement="bottomRight">
                      <span style={{ cursor: "pointer" }}>......</span>
                    </Popover>
                  </div>
                );
              } else {
                return "";
              }
            }
          }
        ];
        break;
      case "AccountBalance": // 账户余额
        columns = [
          {
            title: "日期",
            align: "left",
            dataIndex: "creationTime",
            key: "acountBalanceCreatiionTime",
            render: (text, record, index) => {
              return (
                <span>{moment(record.creationTime).format("YYYY-MM-DD")}</span>
              );
            }
          },
          {
            title: "单据类型",
            width: "160px",
            align: "left",
            dataIndex: "isRedflush",
            key: "isRedflush",
            render: (text, record, index) => {
              return (
                <span>{record.isRedflush == 0 ? "付款单" : "退款单"}</span>
              );
            }
          },
          {
            title: "单据号",
            width: "230px",
            align: "left",
            dataIndex: "baseDiscountPrice",
            key: "baseDiscountPrice",
            render: (text, record, index) => {
              return <span>{record.code}</span>;
            }
          },
          {
            title: "单据状态",
            width: "90px",
            dataIndex: "stock",
            key: "stock",
            align: "left",
            key: "state",
            render: (text, record, index) => {
              const stateList = [
                "",
                "保存",
                "提交",
                "审批通过",
                "审批中",
                "收回",
                "审批不过"
              ];
              return <span>{record.state ? stateList[record.state] : ""}</span>;
            }
          },
          {
            title: "付款额",
            width: "120px",
            dataIndex: "money",
            key: "accountBalanceMoney",
            align: "right",
            key: "money",
            render: (text, record, index) => {
              return <span>￥{record.money}</span>;
            }
          },
          {
            title: "核销额",
            width: "130px",
            dataIndex: "",
            key: "alreadyMoney",
            align: "right",
            key: "alreadyMoney",
            render: (text, record, index) => {
              return <span>￥{record.alreadyMoney}</span>;
            }
          },
          {
            title: "余额",
            width: "190px",
            dataIndex: "",
            key: "remainMoney",
            className: "pr40",
            align: "right",
            key: "remainMoney",
            render: (text, record, index) => {
              return <span>￥{record.remainMoney}</span>;
            }
          }
        ];
        break;
      case "CostReconcile": // 费用对账
        columns = [
          {
            title: "日期",
            width: "130px",
            align: "left",
            dataIndex: "billDate",
            key: "billDate",
            render: (text, record, index) => {
              return (
                <span>{moment(record.billDate).format("YYYY-MM-DD")}</span>
              );
            }
          },
          {
            title: "费用变动",
            width: "120px",
            align: "left",
            dataIndex: "billDate2",
            key: "billDate2",
            render: (text, record, index) => {
              return (
                <div>
                  <span
                    style={{
                      fontSize: 24,
                      color: "#E14C46",
                      display:
                        record.castAmount && record.castAmount > 0 ? "" : "none"
                    }}
                  >
                    +
                  </span>
                  <span
                    style={{
                      fontSize: 24,
                      color: "#59C152",
                      marginLeft: 10,
                      display:
                        (record.actualGoodssupplementAmount &&
                          record.actualGoodssupplementAmount > 0) ||
                        (record.actualFlushAmount &&
                          record.actualFlushAmount > 0)
                          ? ""
                          : "none"
                    }}
                  >
                    -
                  </span>
                </div>
              );
            }
          },
          {
            title: "单据号",
            width: "180px",
            align: "left",
            dataIndex: "billCode",
            key: "billCode",
            dataIndex: "baseDiscountPrice",
            render: (text, record, index) => {
              return <span>{record.billCode}</span>;
            }
          },
          {
            title: "冲抵方式",
            width: "110px",
            align: "left",
            dataIndex: "billDate3",
            key: "billDate3",
            render: (text, record, index) => {
              return <span>{record.castTypeName}</span>;
            }
          },
          {
            title: "销售组织",
            width: "120px",
            dataIndex: "saleOrgName",
            key: "saleOrgName",
            align: "left",
            render: (text, record, index) => {
              return <span>{record.saleOrgName}</span>;
            }
          },
          {
            title: "按销售组织冲抵",
            width: "145px",
            align: "left",
            dataIndex: "billDate1",
            key: "billDate1",
            render: (text, record, index) => {
              return <span>是</span>;
            }
          },
          /* {
                        title: '产品线',
                        width: '110px',
                        align: 'left',
                        className: 'shoppingCat',
                        dataIndex: 'shoppingCat',
                        key: 'shoppingCat',
                        render: (text, record, index) => (
                            <span>A产品线</span>
                        ),
                    }, */
          {
            title: "单据状态",
            width: "90px",
            align: "left",
            dataIndex: "billStatusName",
            key: "billStatusName",
            render: (text, record, index) => {
              return <span>{record.billStatusName}</span>;
            }
          },
          {
            title: "费用金额",
            width: "120px",
            align: "left",
            dataIndex: "castAmount",
            key: "castAmount",
            render: (text, record, index) => {
              return (
                <span>
                  {record.castAmount ? amountPrecision(record.castAmount) : ""}
                </span>
              );
            }
          },
          {
            title: "订单冲抵",
            width: "130px",
            align: "right",
            dataIndex: "actualFlushAmount",
            key: "actualFlushAmount",
            render: (text, record, index) => {
              return (
                <span>
                  {record.actualFlushAmount
                    ? amountPrecision(record.actualFlushAmount)
                    : ""}
                </span>
              );
            }
          },
          {
            title: "货补兑付",
            width: "130px",
            align: "right",
            dataIndex: "actualGoodssupplementAmount",
            key: "actualGoodssupplementAmount",
            render: (text, record, index) => {
              return (
                <span>
                  {record.actualGoodssupplementAmount
                    ? amountPrecision(record.actualGoodssupplementAmount)
                    : ""}
                </span>
              );
            }
          },
          {
            title: "余额",
            width: "130px",
            align: "right",
            className: "pr20",
            dataIndex: "castBalance",
            key: "castBalance",
            render: (text, record, index) => {
              return (
                <span>
                  {record.castBalance
                    ? amountPrecision(record.castBalance)
                    : ""}
                </span>
              );
            }
          }
        ];
        break;
      case "DealReconcile": // 应付对账
        columns = [
          {
            title: "销售组织",
            align: "left",
            key: "saleOrgName",
            render: (text, record, index) => {
              return <span>{record.saleOrgName}</span>;
            }
          },
          {
            title: "应付单日期",
            width: "130px",
            align: "left",
            key: "creationTime",
            render: (text, record, index) => {
              return (
                <span>{moment(record.creationTime).format("YYYY-MM-DD")}</span>
              );
            }
          },
          {
            title: "应付单编号",
            width: "190px",
            align: "left",
            dataIndex: "code",
            key: "code",
            render: (text, record, index) => {
              return <span>{record.code}</span>;
            }
          },
          {
            title: "应付金额",
            width: "160px",
            align: "left",
            key: "receivableMoney",
            render: (text, record, index) => {
              return (
                <span>
                  {record.receivableMoney
                    ? amountPrecision(record.receivableMoney)
                    : ""}
                </span>
              );
            }
          },
          {
            title: "核销日期",
            width: "90px",
            dataIndex: "stock",
            align: "left",
            key: "checkDate",
            render: (text, record, index) => {
              return (
                <span>
                  {record.checkDate
                    ? moment(record.checkDate).format("YYYY-MM-DD")
                    : ""}
                </span>
              );
            }
          },
          {
            title: "核销金额",
            width: "130px",
            dataIndex: "",
            align: "right",
            key: "cancellationMoney",
            render: (text, record, index) => {
              return (
                <span>
                  {record.cancellationMoney
                    ? amountPrecision(record.cancellationMoney)
                    : ""}
                </span>
              );
            }
          },
          {
            title: "实际付款核销金额",
            width: "150px",
            dataIndex: "",
            align: "right",
            key: "payMoney",
            render: (text, record, index) => {
              return (
                <span>
                  {record.payMoney ? amountPrecision(record.payMoney) : ""}
                </span>
              );
            }
          },
          {
            title: "退款核销额",
            width: "190px",
            dataIndex: "",
            className: "pr40",
            align: "right",
            key: "backMoney",
            render: (text, record, index) => {
              return (
                <span>
                  {record.backMoney ? amountPrecision(record.backMoney) : ""}
                </span>
              );
            }
          }
        ];
        break;
    }
    let ifExpandedRow = true;
    if (moduleKey == "PaymentNotice") {
      ifExpandedRow = false;
    }
    if (columns) {
      return (
        <div>
          <Table
            className={styles.goodsTable}
            columns={columns}
            dataSource={goodsData ? goodsData.content : []}
            pagination={paginationCfg}
            loading={tabloading}
            expandedRowRender={
              ifExpandedRow ? this.expandedRowRender.bind(this) : ""
            }
          />
        </div>
      );
    }
  }
}

export default connect(state => ({
  sumCastFlushdetail: state.myAccount.sumCastFlushdetail // 费用详情
}))(GoodsTableList);
