import React, { PureComponent } from "react";
import moment from "moment";
import { connect } from "dva";
import { routerRedux } from "dva/router";
import {
  Row,
  Col,
  Icon,
  Popover,
  Button,
  Table,
  message,
  notification,
  Input
} from "antd";
import GoodsBuyIpt from "@/components/GoodsBuyIpt/index.js";
import BreadcrumbPackage from "@/components/BreadcrumbPackage/index.js";
import styles from "./index.less";

class OrderSignListDetail extends PureComponent {
  constructor(props) {
    super(props);
    this.columns = [
      {
        title: "商品信息",
        dataIndex: "goodsId",
        key: "goodsId",
        className: "thAlignCenter",
        render: (text, record, index) => (
          <div className={styles.goodsNameBox}>
            <div className={styles.imgBox}>
              <img src={record.goodsImg} alt="" />
            </div>
            <div className={styles.goodsInfo}>
              <p className={styles.goodsTitleName}>{record.goodsDisplayName}</p>
              <p className={styles.goodsCode}>{record.goodsCode}</p>
              <p className={record.isGift == 1 ? styles.goodsStatus : ""}>
                <span className={styles.goodsStatusTxt}>
                  {record.isGift == 1 ? "赠" : ""}
                </span>
              </p>
            </div>
          </div>
        )
      },
      {
        title: "订单编码",
        dataIndex: "reqOrderCodes",
        key: "reqOrderCodes",
        className: "alignCenter",
        render: (text, record, index) => (
          <span>
            {text}
          </span>
        )
      },
      {
        title: "订货数量",
        dataIndex: "orderNum",
        key: "orderNum",
        className: "alignRight",
        render: (text, record, index) => (
          <span>
            {parseFloat(record.mainNum) * parseFloat(record.conversionRate || "1")}
            <em className={styles.em}>{record.goodsAssistUnitName}</em>
          </span>
        )
      },
      {
        title: "发货数量",
        dataIndex: "assistNum",
        key: "assistNum",
        className: "alignRight",
        render: (text, record, index) => (
          <span>
            {text}
            <em className={styles.em}>{record.goodsBasicUnitName}</em>
          </span>
        )
      },
      {
        title: "签收数量",
        dataIndex: "signNum",
        key: "signNum",
        width: "300px",
        className: "alignCenter",
        render: (text, record, index) => (
          <div
            className={styles.numIptBox}
            style={{ position: "relative", width: "120px", marginLeft: "90px" }}
          >
            <div style={{ width: "100px", float: "left" }}>
              <Input
                value={record.mainNum}
                style={{ textAlign: "center" }}
                disabled={!!1}
              />
              {/* <GoodsBuyIpt
                num={record.signNum}
                max={record.assistNum)}
                onChange={this.buyNumChange.bind(this, index)}
              /> */}
            </div>
            <em className={styles.em} style={{ paddingLeft: "1px", lineHeight: "32px" }}>
              {record.goodsBasicUnitName}
            </em>
          </div>
        )
      }
    ];
  }
  componentWillMount() {
    const { dispatch, location } = this.props;
    const saleOutOrderId = location[`saleOutOrderId`];
    if (!saleOutOrderId) {
      dispatch(
        routerRedux.push({
          pathname: "/buyer/orderSign"
        })
      );
      return false;
    }
    dispatch({
      type: "orderSignListDetail/getDeliveryDetail",
      payload: {
        saleOutOrderId: saleOutOrderId
      }
    });
  }
  // componentWillReceiveProps(nextProps) {
  //   const { dispatch } = this.props;
  //   if ("returnData" in nextProps) {
  //     const returnData = nextProps.returnData;
  //     if (!returnData) return null;
  //     if (returnData.id) {
  //       notification.success({
  //         message: "签收成功",
  //         description: "签收成功，2秒后跳转到签收列表页",
  //         duration: 2
  //       });
  //       setTimeout(() => {
  //         dispatch(routerRedux.push("/buyer/orderSign"));
  //       }, 2000);
  //       dispatch({
  //         type: "orderSignListDetail/returnData",
  //         returnData: null
  //       });
  //     } else {
  //       notification.error({
  //         message: "签收失败",
  //         duration: 3
  //       });
  //       dispatch({
  //         type: "orderSignListDetail/returnData",
  //         returnData: null
  //       });
  //     }
  //   }
  // }
  // 签收确认
  signConfirmHandle() {
    const { deliveryDetailData, dispatch } = this.props;
    // const saleOutOrderItemInfoDtos = deliveryDetailData.saleOutOrderItemInfoDtos;
    // // 遍历商品行，校验是否有签收数量大于可签收数量的商品行
    // const items = saleOutOrderItemInfoDtos.find(
    //   item => item.mainNum > (item.totalAssistNum - parseFloat(item.signNum))
    // );
    // if (items && items.length > 0) {
    //   message.warning(`商品【${items[0].goodsName}】签收数量不能大于发货数量，请检查！`);
    //   return false;
    // }
    // 本版出库单只签收一次，因此默认累计签收数量=本次签收数量
    deliveryDetailData.saleOutOrderItemInfoDtos.forEach(item => {
      item.signNum = item.mainNum;
      item.persistStatus = "upd";
    });
    // 签收确认
    dispatch({
      type: "orderSignListDetail/signConfirm",
      payload: deliveryDetailData
    }).finally(() => {
      const { returnData } = this.props;
      if (returnData) {
        notification.error({
          message: "签收失败",
          duration: 3
        });
        dispatch({
          type: "orderSignListDetail/returnData",
          returnData: null
        });
      } else {
        notification.success({
          message: "签收成功",
          description: "签收成功，2秒后跳转到签收列表页",
          duration: 2
        });
        setTimeout(() => {
          dispatch(routerRedux.push("/buyer/orderSign"));
        }, 2000);
        dispatch({
          type: "orderSignListDetail/returnData",
          returnData: null
        });
      }
    });
  }
  // 数量修改
  // buyNumChange(key, num) {
  //   const { deliveryDetailData } = this.props;
  //   const rowData = deliveryDetailData.saleOutOrderItemInfoDtos[key];
  //   if (num > (rowData.totalAssistNum - parseFloat(rowData.signNum)) {
  //     message.warning("签收数量不能大于发货数量");
  //     return false;
  //   }
  //   deliveryDetailData.saleOutOrderItemInfoDtos[key][`mainNum`] = +num;
  // }
  render() {
    const { deliveryDetailData } = this.props;
    const BreadcrumbPaths = [
      {
        key: "/buyer/orderSignListDetail",
        title: "发货单详情"
      }
    ];
    if (!deliveryDetailData) return null;
    const columns = this.columns;
    return (
      <div className={styles.deliveryContent}>
        {/* <BreadcrumbPackage additems={BreadcrumbPaths} /> */}
        <div className={styles.header}>
          <Row>
            <Col span={2}>发货单号：</Col>
            <Col span={3}>{deliveryDetailData.billCode}</Col>
            <Col span={2}>发货时间：</Col>
            <Col span={3}>{moment(deliveryDetailData.billDate).format("YYYY-MM-DD HH:mm")}</Col>
            <Col span={2}>签收日期：</Col>
            <Col span={3}>{deliveryDetailData.signDate}</Col>
            <Col span={2}>签收人：</Col>
            <Col span={3}>{deliveryDetailData.signAuthor}</Col>
            <Col span={4}>
              <Button
                size="small"
                type="danger"
                ghost
                onClick={this.signConfirmHandle.bind(this)}
              >
                签收确认
              </Button>
            </Col>
          </Row>
        </div>
        <div className={styles.deliveryGrid}>
          <Table
            pagination={false}
            columns={columns}
            dataSource={deliveryDetailData.saleOutOrderItemInfoDtos}
          />
        </div>
      </div>
    );
  }
}
export default connect(state => ({
  deliveryDetailData: state.orderSignListDetail.deliveryDetailData,
  returnData: state.orderSignListDetail.returnData
}))(OrderSignListDetail);
