import React, { PureComponent } from "react";
import { connect } from "dva";
import { routerRedux } from "dva/router";
import {
  Icon,
  Checkbox,
  Select,
  Input,
  DatePicker,
  Popover,
  Button,
  Pagination,
  Modal,
  Spin
} from "antd";
import styles from "./index.less";
import imgSrc from "./goods-img.png";

class OrderListComp extends PureComponent {
  constructor(props) {
    super(props);
  }
  // 订单状态枚举转化
  // statusEmun(code) {
  //   const orderStatusData = [
  //     {
  //       code: 0,
  //       name: "暂存"
  //     },
  //     {
  //       code: 1,
  //       name: "驳回"
  //     },
  //     {
  //       code: 2,
  //       name: "待审核"
  //     },
  //     {
  //       code: 3,
  //       name: "待发货"
  //     },
  //     {
  //       code: 4,
  //       name: "待签收"
  //     },
  //     {
  //       code: 5,
  //       name: "已完成"
  //     }
  //   ];
  //   // const { orderStatusData } = this.props;
  //   const emunItem = orderStatusData.find(item => item.code == code);
  //   return emunItem.name;
  // }
  deleteOrder() {
    const confirm = Modal.confirm;
    confirm({
      title: "是否删除该订单？",
      okText: "是",
      cancelText: "否",
      onOk() {
        console.log("yes");
      },
      onCancel() {
        console.log("no");
      }
    });
  }
  // 跳到详情页
  goDetailHandle(data) {
    const { dispatch } = this.props;
    if (data.orderStatusCode == "01") {
      dispatch(
        routerRedux.push({
          pathname: "/buyer/OrderEdit",
          orderId: data.id
        })
      );
    } else {
      dispatch(
        routerRedux.push({
          pathname: "/buyer/orderListDetail",
          orderId: data.id
        })
      );
    }
  }
  render() {
    const { orderListData } = this.props;
    // 追踪hover
    // const content = (
    //   <div className={styles.tailHoverBox}>
    //     <div className={styles.tailItem}>
    //       <i className={styles.circle}>
    //         <em className={styles.point} />
    //       </i>
    //       <span className={styles.time}>2012-12-16 22:22</span>
    //       <span className={styles.cancelType}>订单提交</span>
    //       <span className={styles.cancelName}>张兰兰</span>
    //     </div>
    //     <div className={styles.tailItem}>
    //       <i className={styles.circle}>
    //         <em className={styles.point} />
    //       </i>
    //       <span className={styles.time}>2012-12-16 22:22</span>
    //       <span className={styles.cancelType}>订单提交</span>
    //       <span className={styles.cancelName}>张兰兰</span>
    //     </div>
    //     <div className={styles.tailItem}>
    //       <i className={styles.circle}>
    //         <em className={styles.point} />
    //       </i>
    //       <span className={styles.time}>2012-12-16 22:22</span>
    //       <span className={styles.cancelType}>订单提交</span>
    //       <span className={styles.cancelName}>张兰兰</span>
    //     </div>
    //   </div>
    // );
    const orderFlowsHandle = orderFlows => {
      return (
        <div className={styles.tailHoverBox}>
          {orderFlows.map(item => (
            <div className={styles.tailItem}>
              <i className={styles.circle}>
                <em className={styles.point} />
              </i>
              <span className={styles.time}>{item.operateTime}</span>
              <span className={styles.cancelType}>{item.content}</span>
              <span className={styles.cancelName}>{item.creator || ""}</span>
            </div>
          ))}
        </div>
      );
    };

    // 订单列表商品
    const orderGoodsHtml = 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 getButton = status => {
      if (status == 0) {
        return (
          <div className={styles.orderCancelBox}>
            <span className={styles.cancelBtn} onClick={this.deleteOrder}>
              删除
            </span>
            <span className={styles.cancelBtn}>复制</span>
          </div>
        );
      } else if (status == 1 || status == 2) {
        return (
          <div className={styles.orderCancelBox}>
            <span className={styles.cancelBtn}>修改</span>
            <span className={styles.cancelBtn} onClick={this.deleteOrder}>
              删除
            </span>
            <span className={styles.cancelBtn}>复制</span>
          </div>
        );
      } else if (status == 3 || status == 4 || status == 5) {
        return (
          <div className={styles.orderCancelBox}>
            <span className={styles.cancelBtn}>复制</span>
            <span className={styles.cancelBtn}>退货</span>
          </div>
        );
      }
    };
    const getCreatime = creatime => {
      const time = new Date(creatime);
      const year = time.getFullYear();
      const month = time.getMonth();
      const day = time.getDate();
      return `${year}-${month}-${day}`;
    };
    // 订单列表
    const orderListHtml = () => {
      if (!orderListData) {
        return <Spin size="large" className={styles.globalSpin} />;
      }
      const html = orderListData.map(item => (
        <div className={styles.orderItem} key={item.orderId}>
          <div className={styles.orderNameBox}>
            {orderGoodsHtml(item.reqOrderItems)}
            <Icon
              type="ellipsis"
              className={styles.ellipsisIcon}
              style={{
                display: item.reqOrderItems.length > 3 ? "block" : "none"
              }}
            />
          </div>
          <div
            className={styles.orderCodeBox}
            onClick={this.goDetailHandle.bind(this, item)}
          >
            <p className={styles.code}>{item.orderCode}</p>
            <p className={styles.time}>{getCreatime(item.creationTime)}</p>
          </div>
          <div className={styles.orderPriceBox}>￥{item.totalDealAmount}</div>
          <div className={styles.orderStatusBox}>{item.orderStatusName}</div>
          {/* <div className={styles.orderPayBox}>待付款</div> */}
          <div className={styles.orderTailBox}>
            <Popover
              content={orderFlowsHandle(item.reqOrderTracks)}
              title={null}
              trigger="hover"
              placement="left"
            >
              <Icon type="clock-circle" className={styles.clockIcon} />
            </Popover>
          </div>
          {/* {getButton(item.orderStatus)} */}
          {/* <div className={styles.orderCancelBox}>
            <span className={styles.cancelBtn}>修改</span>
            <span className={styles.cancelBtn}>删除</span>
            <span className={styles.cancelBtn}>付款</span>
            <span className={styles.cancelBtn}>复制</span>
          </div> */}
        </div>
      ));
      return html;
    };
    return (
      <div className={styles.orderListBox}>
        <div className={styles.orderListHead}>
          <div className={styles.orderName}>商品信息</div>
          <div className={styles.orderCode}>订单编号</div>
          <div className={styles.orderPrice}>订单金额</div>
          <div className={styles.orderStatus}>订单状态</div>
          <div className={styles.orderTail}>处理追踪</div>
          <div className={styles.orderCancel}>操作</div>
        </div>
        <div className={styles.orderList}>{orderListHtml()}</div>
      </div>
    );
  }
}
export default OrderListComp;
