import React, { PureComponent } from "react";
import moment from "moment";
import { connect } from "dva";
import { Link, routerRedux } from "dva/router";
import {
  Icon,
  Checkbox,
  Select,
  Input,
  DatePicker,
  Popover,
  Button
} from "antd";
import styles from "./index.less";
import OrderSignList from "@/components/orderSignList/index";
import BreadcrumbPackage from "@/components/BreadcrumbPackage/index";
import PageGrid from "@/components/PageGrid/index.js";
import Form from "@/components/Form/index.js";

class OrderSign extends PureComponent {
  constructor(props) {
    super(props);
    this.searchConditions = {};
  }
  componentWillMount() {
    const { dispatch } = this.props;
    dispatch({
      type: "orderSignList/getOrderSignStatus",
      payload: null
    });
    // this.search();
  }
  signHandle(record) {
    const { dispatch } = this.props;
    dispatch(
      routerRedux.push({
        pathname: "/buyer/orderSignListDetail",
        saleOutOrderId: record.id
      })
    );
  }
  search(page = 0, pageSize = 10) {
    const { dispatch } = this.props;
    const searchConditions = this.searchConditions || {};
    searchConditions.page = page ? page : 0;
    searchConditions.pageSize = pageSize ? pageSize : 10;
    dispatch({
      type: "orderSignList/getOrderSignData",
      payload: searchConditions
    });
  }
  render() {
    const {
      orderSignStatusData,
      orderSignData
    } = this.props;
    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 => {
      let style = {};
      if (data.length >= 2) {
        data = data.slice(0, 2);
        style = {
          height: "25px",
          lineHeight: "25px"
        };
      }
      return (
        <div className={styles.codeshowBox}>
          {data.map(value => (
            <p className={styles.code} style={style}>{value}</p>
          ))}
        </div>
      );
    };
    const orderFlowsHandle = data => {
      return (
        <div className={styles.tailHoverBox}>
          <span className={styles.tailTitle}>更多订单</span>
          {data.map(value => (
            <div className={styles.tailItem}>
              <i className={styles.circle} />
              <span className={styles.time}>{value}</span>
            </div>
          ))}
        </div>
      );
    };
    const ifHavedSign = (items) => {
      let isSign = false;
      /**
       * 当前版本，出库单只能整单签收且只签收一次
       * 因此，出库单商品行累计签收数量 > 0,即可默认整张出库单已签收过
       */
      if (items && items.length > 0) {
        if (+(items[0].signNum || "0") > 0) {
          isSign = true;
        }
      }
      return isSign;
    };
    const getButton = record => {
      const isSign = ifHavedSign(record.saleOutOrderItemInfoDtos);
      if (!isSign) {
        return (
          <div
            className={styles.orderHandleBox}
            onClick={this.signHandle.bind(this, record)}
          >
            <span className={styles.cancelBtn}>签收</span>
          </div>
        );
      } else {
        return "";
      }
    };
    const columns = [
      {
        title: "商品名称",
        dataIndex: "saleOutOrderItemInfoDtos",
        key: "saleOutOrderItemInfoDtos-goodsName",
        className: "thAlignCenter",
        width: "280px",
        render: (text, record) => {
          return (
            <div className={styles.orderNameBox}>
              {orderSignNameHtml(record.saleOutOrderItemInfoDtos)}
              <Icon
                type="ellipsis"
                className={styles.ellipsisIcon}
                style={{ display: text.length > 3 ? "inline-block" : "none" }}
              />
            </div>
          );
        }
      },
      {
        title: "发货单号",
        dataIndex: "billCode",
        key: "billCode",
        render: text => (
          <div className={styles.orderSignCodeBox}>
            <p className={styles.code}>{text}</p>
          </div>
        )
      },
      {
        title: "发货数量",
        dataIndex: "totalAssistNum",
        key: "totalAssistNum",
        className: "alignRight",
        render: (text, record) => (
          <div className={styles.orderShipNumberBox}>{text}</div>
        )
      },
      {
        title: "订单号",
        dataIndex: "saleOutOrderItemInfoDtos",
        key: "saleOutOrderItemInfoDtos-orderCode",
        className: "alignCenter",
        render: (text, record) => {
          const saleOutOrderItemInfoDtos = record.saleOutOrderItemInfoDtos;
          if (!saleOutOrderItemInfoDtos || saleOutOrderItemInfoDtos.length < 0) return "";
          const reqOrderCodes = [];
          saleOutOrderItemInfoDtos.forEach(item => {
            if (!reqOrderCodes.includes(item.reqOrderCodes)) {
              reqOrderCodes.push(item.reqOrderCodes);
            }
          });
          return (
            <div className={styles.orderCodeBox}>
              {orderCodeHandle(reqOrderCodes)}
              <Popover
                content={orderFlowsHandle(reqOrderCodes)}
                title={null}
                trigger="hover"
                placement="bottom"
              >
                <Icon
                  type="ellipsis"
                  className={styles.ellipsisIcon}
                  style={{
                    display:
                    reqOrderCodes.length > 2 ? "inline-block" : "none"
                  }}
                />
              </Popover>
            </div>
          );
        }
      },
      {
        title: "发货日期",
        dataIndex: "billDate",
        key: "billDate",
        className: "alignCenter",
        render: (text, record) => (
          <div className={styles.orderShipDateBox}>
            {moment(text).format("YYYY-MM-DD HH:mm")}
          </div>
        )
      },
      {
        title: "签收状态",
        dataIndex: "saleOutOrderItemInfoDtos",
        key: "saleOutOrderItemInfoDtos-signStatus",
        className: "alignCenter",
        render: (text, record) => {
          const saleOutOrderItemInfoDtos = record.saleOutOrderItemInfoDtos;
          const isSign = ifHavedSign(saleOutOrderItemInfoDtos);
          return (
            <div className={styles.orderShipStatusBox}>
              {isSign ? "已签收" : "未签收"}
            </div>
          );
        }
      },
      {
        title: "操作",
        className: "alignCenter",
        render: (text, record) => {
          return getButton(record);
        }
      }
    ];
    const searchAttrs = [
      {
        label: "签收状态",
        key: "signStatus",
        type: "select",
        sourceData: orderSignStatusData || []
      },
      {
        label: "发货日期",
        type: "comb",
        children: [
          {
            key: "billDate",
            type: "daterange"
          },
          {
            key: "billCode",
            type: "inputSearch",
            placeholder: "请输入发货单编码",
            enterButton: "搜索"
          }
        ]
      },
      {
        label: "订单日期",
        type: "comb",
        children: [
          {
            key: "orderDate",
            type: "daterange",
            startValue: Date.now() - 6 * 86400000,
            endValue: Date.now(),
          },
          {
            key: "srcReqOrderCode",
            type: "inputSearch",
            placeholder: "请输入订单编码",
            enterButton: "搜索"
          }
        ]
      }
    ];
    return (
      <div className={styles.orderListBox}>
        {/* <BreadcrumbPackage /> */}
        <div className={styles.searchConditions}>
          <Form
            searchAttrs={searchAttrs}
            setSearchParams={(value, ifSearch) => {
              this.searchConditions = value;
              if (ifSearch) {
                this.search();
              }
            }}
          />
          {/* <div className={styles.searchItem}>
            <span className={styles.searchName}>签收状态: </span>
            <div className={styles.searchVal}>{orderSignStatusHtml()}</div>
          </div>
          <div className={styles.searchItem}>
            <span className={styles.searchName}>发货日期: </span>
            <div className={styles.searchVal}>
              <DatePicker.RangePicker
                className={styles.searchData}
                onChange={this.orderSignDateChange.bind(this)}
              />
              <div className={styles.searchBox}>
                <Input.Search
                  placeholder="输入发货编码"
                  enterButton="搜索"
                  style={{ width: 280 }}
                  onChange={this.billCodeChange.bind(this)}
                  value={this.state.billCode}
                  onSearch={this.searchHandle.bind(this)}
                />
              </div>
            </div>
          </div>
          <div className={styles.searchItem}>
            <span className={styles.searchName}>订单日期: </span>
            <div className={styles.searchVal}>
              <DatePicker.RangePicker
                className={styles.searchData}
                defaultValue={[moment(orderStartDate), moment(orderEndDate)]}
                onChange={this.orderDateChange.bind(this)}
              />
              <div className={styles.searchBox}>
                <Input.Search
                  placeholder="输入订单编码"
                  enterButton="搜索"
                  style={{ width: 280 }}
                  onChange={this.orderCodeChange.bind(this)}
                  value={this.state.orderCode}
                  onSearch={this.searchHandle.bind(this)}
                />
              </div>
            </div>
          </div> */}
        </div>
        <PageGrid
          columns={columns}
          pageGridSource={orderSignData}
          search={this.search.bind(this)}
        />
      </div>
    );
  }
}
export default connect(state => ({
  orderSignStatusData: state.orderSignList.orderSignStatusData,
  orderSignData: state.orderSignList.orderSignData
}))(OrderSign);
