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 { amountPrecision } from '@/utils/common';

class PaymentNoticeList 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
    };
  }
  componentWillMount() {
    const { dispatch } = this.props;
    dispatch({
      type: "paymentNotice/getPaymentNoticeStatusData",
      payload: null
    });
    dispatch({
      type: "paymentNotice/getEnterpriseAccountsData",
      payload: {
        search_EQ_isEnable: 1,
        size: 100,
        page: 0,
      }
    });
  }
  operationPaymentHandle(id, type) {
    const { dispatch } = this.props;
    // 删除 或 编辑
    if (type == "del" || type == "submit") {
      dispatch({
        type: "paymentNotice/operationPayment",
        payload: {
          id: id,
          type: type
        }
      }).finally(() => {
        const { operationResult } = this.props;
        if (
          operationResult &&
          operationResult.result &&
          operationResult.result == "Success"
        ) {
          notification.success({
            message: "提示",
            description: type == "submit" ? "提交成功" : "删除成功",
            duration: 2
          });
          // 刷新页面
          this.pageChange(0, 10, this.state.tabIndex);
        } else {
          notification.error({
            message: type == "submit" ? "提交失败" : "删除失败",
            description: `操作失败：${operationResult.message || ""}`,
            duration: 2
          });
        }
      });
    } else if (type == "edit" || type == "detail") {
      dispatch(
        routerRedux.push({
          pathname: "/buyer/paymentNoticeEdit",
          query: {
            id: id,
            type: type
          }
        })
      );
    }
  }
  // 分页搜索
  search(page = 0, pageSize = 10) {
    const { dispatch } = this.props;
    const searchConditions = this.searchConditions || {};
    searchConditions.page = page ? page : 0;
    searchConditions.size = pageSize ? pageSize : 10;
    dispatch({
      type: "paymentNotice/getPaymentNoticeListData",
      payload: searchConditions
    });
  }
  render() {
    const { paymentStatusData, paymentNoticeListData, receiptAccountData } = this.props;
    const { visible, confirmLoading } = this.state;
    // 订单按钮显示
    const getButtons = record => {
      const status = record.billClaimState;
      if (status == "1" || status == "7" || status == "5") {
        return (
          <div className={styles.operationBox}>
            <Popconfirm
              title="确认删除付款单？"
              onConfirm={this.operationPaymentHandle.bind(
                this,
                record.id,
                "del"
              )}
            >
              <span className={styles.operationBtn}>删除</span>
            </Popconfirm>
            <span
              className={styles.operationBtn}
              onClick={this.operationPaymentHandle.bind(
                this,
                record.id,
                "edit"
              )}
            >
              编辑
            </span>
            <span
              className={styles.operationBtn}
              style={{ display: (status == "7" || status == "1") ? "inline-block" : "none" }}
              onClick={this.operationPaymentHandle.bind(
                this,
                record.id,
                "submit"
              )}
            >
              提交
            </span>
          </div>
        );
      } else if (status == "02") {
        return (
          <div className={styles.operationBox}>
            <span
              className={styles.operationBtn}
              onClick={this.operationPaymentHandle.bind(
                this,
                record.id,
                "detail"
              )}
            >
              查看
            </span>
          </div>
        );
      }
    };
    const columns =  [
      {
        title: "付款单编号",
        width: "180px",
        align: "center",
        dataIndex: "paymentCode",
        key: "paymentCode",
        render: (text, record, index) => {
          return <span>{record.code}</span>;
        }
      },
      {
        title: "付款单日期",
        align: "center",
        dataIndex: "claimTime",
        key: "claimTime",
        render: (text, record, index) => {
          return (
            <span>
              {record.claimTime
                ? moment(record.claimTime).format("YYYY-MM-DD")
                : ""}
            </span>
          );
        }
      },
      {
        title: "付款金额",
        align: "right",
        dataIndex: "money",
        key: "money",
        render: (text, record, index) => {
          return <span>{amountPrecision(text, "amount")}</span>;
        }
      },
      {
        title: "收款银行账户",
        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)
      }
    ];
    const searchAttrs = [
      {
        label: "付款单状态",
        labelWidth: 85,
        key: "billClaimState",
        type: "select",
        sourceData: paymentStatusData || []
      },
      {
        label: "付款银行账户",
        labelWidth: 85,
        type: "comb",
        children: [
          {
            key: "payAccount",
            type: "text",
            width: 280,
            placeholder: "请输入付款方银行账户"
          },
          {
            label: "收款银行账户",
            key: "receiptAccount",
            type: "dropSelect",
            width: 280,
            refId: true,
            refName: ["accountName", "accountNumber"],
            sourceData: receiptAccountData || []
          }
        ]
      },
      {
        label: "付款单日期",
        labelWidth: 85,
        type: "comb",
        children: [
          {
            key: "claimTime",
            type: "daterange",
            startValue: Date.now() - 6 * 86400000,
            endValue: Date.now(),
          },
          {
            key: "code",
            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/paymentNoticeEdit">
            <Button className={styles.addGoodsBtn} type="primary">
              <Icon type="plus" className={styles.icon} />付款单登记
            </Button>
          </Link>
        </div>
        {/* 搜索--end */}
        {/* 列表 */}
        <PageGrid
          columns={columns}
          pageGridSource={paymentNoticeListData}
          search={this.search.bind(this)}
        />
        {/* 列表--end */}
      </div>
    );
  }
}
export default connect(state => ({
  paymentStatusData: state.paymentNotice.paymentStatusData,
  paymentNoticeListData: state.paymentNotice.paymentNoticeListData,
  receiptAccountData: state.paymentNotice.receiptAccountData,
}))(PaymentNoticeList);
