import React, {
  PureComponent
} from "react";
import moment from "moment";
import {
  connect
} from "dva";
import {
  Link,
  routerRedux
} from "dva/router";
import {
  Icon,
  Popover,
  Button,
  Popconfirm
} from "antd";
import styles from "./index.less";
import PageGrid from "@/components/PageGrid/index.js";
import Form from "@/components/Form/index.js";
import FormPayforDialog from "@/components/PayforDialog/index";
import {
  amountPrecision
} from '@/utils/common';

class OnlinePayList extends PureComponent {
  constructor(props) {
    super(props);
    const match = this.props.match;
    // this.defaultStatus = match.params && match.params.orderStatus || "";
    this.searchConditions = {};
    this.state = {
      visible: false,
      confirmLoading: false,
      payNeedData: {}
    };
  }
  componentWillMount() {
    const {
      dispatch
    } = this.props;
    dispatch({
      type: "paymentNotice/getPaymentNoticeStatusData",
      payload: null
    });
    dispatch({
      type: "paymentNotice/getEnterpriseAccountsData",
      payload: {
        search_EQ_isEnable: 1,
        size: 100,
        page: 0,
      }
    });
    // 获取支付方式
    dispatch({
      type: "paymentNotice/getPayData",
      payload: null
    });
  }
  operationPaymentHandle(id, type, resultOrder) {
    const {
      dispatch
    } = this.props;
    const currencyName = JSON.parse(localStorage["_A_P_currency"]).name;
    let payBillDatalist = {}
    console.log(resultOrder.id);
    this.state.payNeedData = {
      'total_amount': resultOrder.paymentAmount,
      'out_trade_no': resultOrder.paybillCode,
      'paymentModeName': resultOrder.paymentModeName,
      'currencyName': currencyName,
      'financialOrgId': resultOrder.payeeId,
      'paybillId': resultOrder.id,
      'payBillData': payBillDatalist
    };
    dispatch({
      type: "paymentNotice/orderPayBillSet",
      orderPayBillSet: this.state.payNeedData
    });
    this.props.dispatch({
      type: "global/orderListVisible",
      payload: true
    });
  }
  // 分页搜索
  search(page = 0, pageSize = 10) {
    const {
      dispatch,
      location,
      payData
    } = this.props;
    let billQueryData = {};
    let searchConditions = this.searchConditions || {};
    if (searchConditions.search_EQ_paymentMode) {
      for (let i = 0; i < payData.length; i++) {
        if (payData[i].id == searchConditions.search_EQ_paymentMode) {
          searchConditions.search_EQ_paymentMode = payData[i].code;
          break;
        }
      }
    }
    if (JSON.stringify(location[`query`]) != "{}") {
      billQueryData.search_EQ_srcBillCode = location.query.srcBillCode;
      searchConditions = billQueryData;
    }
    searchConditions.page = page ? page : 0;
    searchConditions.size = pageSize ? pageSize : 10;
    dispatch({
      type: "paymentNotice/getOnlinePayListData",
      payload: searchConditions
    });
  }
  render() {
    const {
      onlinePayListData,
      payData
    } = this.props;
    // 订单按钮显示
    const getButtons = record => {
      const status = record.paymentStatusCode;
      if (status == 2 || status == "2") {
        return (
          <div className={styles.operationBox}>
            <span
              className={styles.operationBtn}
              onClick={this.operationPaymentHandle.bind(
                this,
                record.id,
                "pay",
                record
              )}
            >
              支付
            </span>
          </div>
        );
      }
    };
    const columns = [{
      title: "支付单编号",
      width: "180px",
      align: "center",
      dataIndex: "paybillCode",
      key: "paybillCode",
      render: (text, record, index) => {
        return <span>{record.paybillCode}</span>;
      }
    }, {
      title: "支付单据日期",
      align: "center",
      dataIndex: "billDate",
      key: "billDate",
      render: (text, record, index) => {
        return (
          <span>
              {record.billDate
                ? moment(record.billDate).format("YYYY-MM-DD")
                : ""}
            </span>
        );
      }
    }, {
      title: "付款金额",
      align: "right",
      dataIndex: "paymentAmount",
      key: "paymentAmount",
      render: (text, record, index) => {
        return <span>{amountPrecision(text, "amount")}</span>;
      }
    }, {
      title: "支付方式",
      width: "120px",
      align: "center",
      dataIndex: "paymentModeName",
      key: "paymentModeName",
      render: (text, record, index) => {
        return <span>{text}</span>;
      }
    }, {
      title: "收款方",
      align: "center",
      dataIndex: "payeeName",
      key: "payeeName",
      render: (text, record, index) => {
        return <span>{text}</span>;
      }
    }, {
      title: "支付状态",
      width: "120px",
      align: "center",
      dataIndex: "paymentStatusName",
      key: "paymentStatusName",
      render: (text, record, index) => {
        return <span>{text}</span>;
        // const billStates = {
        //   1: "暂存",
        //   2: "提交",
        //   3: "审批通过",
        //   4: "审批中",
        //   5: "收回",
        //   6: "审批不通过",
        //   7: "暂存"          
        // };
        // return <span>{billStates[`${text}`]}</span>;
      }
    }, {
      title: "操作",
      width: "120px",
      align: "center",
      dataIndex: "paymentAction",
      key: "paymentAction",
      render: (text, record, index) => getButtons(record)
    }];
    const searchAttrs = [{
      label: "支付单日期",
      labelWidth: 85,
      type: "comb",
      children: [{
        key: "billDate",
        type: "daterange",
        startValue: Date.now() - 6 * 86400000,
        endValue: Date.now(),
      }, {
        label: "支付方式",
        key: "paymentMode",
        type: "dropSelect",
        placeholder: "请选择支付方式",
        width: 200,
        refId: true,
        refName: ["name"],
        sourceData: payData || []
      }, {
        key: "paybillCode",
        type: "inputSearch",
        placeholder: "请输入支付单编号",
        enterButton: "搜索"
      }]
    }];
    return (
      <div className={styles.paymentNoticeListBox}>
        {/* <BreadcrumbPackage /> */}
        {/* 搜索 */}
        <div className={styles.searchConditions}>
          <Form
            searchAttrs={searchAttrs}
            setSearchParams={(value, ifSearch) => {
              this.searchConditions = value;
              if (ifSearch) {
                this.search();
              }
            }}
          />
          <Link to="/buyer/onlinePayEdit">
            <Button className={styles.addGoodsBtn} type="primary">
              <Icon type="plus" className={styles.icon} />新增支付单
            </Button>
          </Link>
        </div>
        {/* 搜索--end */}
        {/* 列表 */}
        <PageGrid
          columns={columns}
          pageGridSource={onlinePayListData}
          search={this.search.bind(this)}
        />
        {/* 列表--end */}
        {/* 支付方式弹窗--start */}
        <FormPayforDialog
          payNeedData={this.state.payNeedData}
          orderPayBillSet={this.props.orderPayBillSet}
          backToWho={'onlinePayList'}
        />
      </div>
    );
  }
}
export default connect(state => ({
  onlinePayListData: state.paymentNotice.onlinePayListData,
  payData: state.paymentNotice.payData,
}))(OnlinePayList);