import { Icon, Popover } from "antd";
import React, { PureComponent } from "react";
import { connect } from "dva";
import { routerRedux } from "dva/router";
import styles from "./index.less";

class OrderSignList extends PureComponent {
  constructor(props) {
    super(props);
  }
  signHandle(item) {
    const { dispatch } = this.props;
    dispatch(
      routerRedux.push({
        pathname: "/buyer/orderSignListDetail",
        deliveryId: item.deliveryOrderId
      })
    );
  }
  render() {
    const { orderSignData } = this.props;
    if (!orderSignData) return null;
    const orderSignNameHtml = data => {
      if (data.length > 3) {
        data = data.slice(0, 3);
      }
      const html = data.map(item => (
        <div className={styles.imgBox} key={item.goodsImg}>
          <img src={item.goodsImg} alt="" className={styles.img} />
        </div>
      ));
      return html;
    };
    const orderCodeHandle = data => {
      if (data.length == 1) {
        return (
          <div className={styles.codeshowBox}>
            <p className={styles.onlyOneCode}>{data[0]}</p>
          </div>
        );
      } else {
        return (
          <div className={styles.codeshowBox}>
            <p className={styles.code}>{data[0]}</p>
            <p className={styles.code}>{data[1]}</p>
          </div>
        );
      }
    };
    const getButton = item => {
      if (!item.orderShipStatus) {
        return (
          <div
            className={styles.orderHandleBox}
            onClick={this.signHandle.bind(this, item)}
          >
            <span className={styles.cancelBtn}>签收</span>
          </div>
        );
      } else return "";
    };
    const orderFlowsHandle = data => {
      data = data.slice(2);
      return (
        <div className={styles.tailHoverBox}>
          <span>更多订单</span>
          {data.map(item => (
            <div className={styles.tailItem}>
              {/* <i className={styles.circle}>
                                <em className={styles.point} />
                            </i> */}
              <i className={styles.circle} />
              <span className={styles.time}>{item}</span>
            </div>
          ))}
        </div>
      );
    };
    const orderSignListHtml = () => {
      const html = orderSignData.map(item => (
        <div className={styles.orderItem} key={item.orderId}>
          <div className={styles.orderNameBox}>
            {orderSignNameHtml(item.orderName)}
            <Icon
              type="ellipsis"
              className={styles.ellipsisIcon}
              style={{ display: item.orderName.length > 3 ? "block" : "none" }}
            />
          </div>
          <div className={styles.orderSignCodeBox}>
            <p className={styles.code}>{item.orderShipCode}</p>
          </div>
          <div className={styles.orderShipNumberBox}>
            {item.orderShipNumber}
          </div>
          <div className={styles.orderCodeBox}>
            {orderCodeHandle(item.orderCode)}
            <Popover
              content={orderFlowsHandle(item.orderCode)}
              title={null}
              trigger="hover"
              placement="bottom"
            >
              <Icon
                type="ellipsis"
                className={styles.ellipsisIcon}
                //   onClick={}
                style={{
                  display: item.orderCode.length > 2 ? "block" : "none"
                }}
              />
            </Popover>
          </div>
          <div className={styles.orderShipDateBox}>{item.orderShipDate}</div>
          <div className={styles.orderShipStatusBox}>
            {item.orderShipStatus ? "已签收" : "未签收"}
          </div>
          {getButton(item)}
        </div>
      ));
      return html;
    };
    return (
      <div className={styles.orderListBox}>
        <div className={styles.orderListHead}>
          <div className={styles.orderName}>商品信息</div>
          <div className={styles.orderShipCode}>发货单号</div>
          <div className={styles.orderShipNumber}>发货数量</div>
          <div className={styles.orderCode}>订单号</div>
          <div className={styles.orderShipDate}>发货日期</div>
          <div className={styles.orderShipStatus}>签收状态</div>
          <div className={styles.orderHandle}>操作</div>
        </div>
        <div className={styles.orderList}>{orderSignListHtml()}</div>
      </div>
    );
  }
}
export default OrderSignList;
