import React, { PureComponent } from "react";
import { connect } from "dva";
import { routerRedux } from "dva/router";
import { Row, Col, Card, Button } from "antd";
import BreadcrumbPackage from "@/components/BreadcrumbPackage/index.js";
import EmptyData from "@/components/EmptyData/index";
import styles from "./index.less";

class goodsSupplyList extends PureComponent {
  componentWillMount() {
    const { dispatch } = this.props;
    dispatch({
      type: "goodsSupplyList/getGoodsSupplyList",
      payload: {}
    });
  }
  // 兑付货补
  clickHandle(item) {
    const { dispatch } = this.props;
    dispatch(
      routerRedux.push({
        pathname: "/buyer/goodsSupplyDetail",
        castTypeId: item.id, // 费用类型主键
        financeOrgId: item.financeOrgId, // 财务组织
        amount: item.amount // 该费用类型下可用余额
      })
    );
  }
  render() {
    const { goodsSupplyListData } = this.props;
    const getGoodsSupplyGridHtml = () => {
      if (!goodsSupplyListData || goodsSupplyListData.length < 1) {
        return <div>暂无可用的货补费用单</div>;
      }
      var result = [];
      for (let i = 0; i < goodsSupplyListData.length; i += 3) {
        result.push(goodsSupplyListData.slice(i, i + 3));
      }
      const htmlContent = result.map((rows, index) => {
        return (
          <Row gutter={16}>
            {rows.map(item => (
              <Col className="gutter-row" span={8} key={item.id}>
                <Card style={{ height: 180 }}>
                  <div className={styles.amount}>￥{item.amount}</div>
                  <div className={styles.financeOrg}>{item.financeOrgName}</div>
                  <div className={styles.type}>{item.name}</div>
                  <div className={styles.button}>
                    <Button onClick={this.clickHandle.bind(this, item)}>
                      兑付货补
                    </Button>
                  </div>
                </Card>
              </Col>
            ))}
          </Row>
        );
      });
      return htmlContent;
    };
    return (
      <div className={styles.goodsSupplyListBox}>
        {/* <BreadcrumbPackage /> */}
        <div className={styles.goodsSupplyGrid}>{getGoodsSupplyGridHtml()}</div>
      </div>
    );
  }
}
export default connect(state => ({
  goodsSupplyListData: state.goodsSupplyList.goodsSupplyListData
}))(goodsSupplyList);
