import React, { PureComponent } from "react";
import { connect } from "dva";
import moment from "moment";
import { Link, routerRedux } from "dva/router";
import {
  Icon,
  Checkbox,
  Select,
  Input,
  DatePicker,
  Popover,
  Button,
  Pagination,
  Steps,
  Row,
  Col,
  Table,
  Timeline,
  Tabs
} from "antd";
import GoodsOptsDialog from "@/components/GoodsOptsDialog/index";
import iconfontStyles from "../../../iconfont/iconfont.css";
import styles from "./index.less";
import imgSrc from "./goods-img.png";
import { goodsVersion, amountPrecision, unitPrecision } from '@/utils/common';
const Step = Steps.Step;
const TabPane = Tabs.TabPane;

const ifValidReturnButtonShow = (orderDetailData) => {
  let returnButtonShow = false;
  if (orderDetailData.saleModel == "03") {
    return returnButtonShow;
  }
  if (orderDetailData && orderDetailData.orderItems) {
    const { orderStatusCode, orderItems } = orderDetailData;
    // 审核通过的订单，累计退货数量 < 主数量 即可退货
    if (orderStatusCode == "03" || orderStatusCode == "04" || orderStatusCode == "05") {
      for (const item of orderItems) {
        // 存在商品行：主数量 - 累计退货数量 > 0, 则显示退货按钮
        const returnNum = parseFloat(item.mainNum || "0") - parseFloat(item.returnNum || "0");
        if (returnNum > 0) {
          returnButtonShow = true;
          break;
        }
      }
    }
  }
  return returnButtonShow;
};
const promInfoHtml = record => {
  if (!record.reqOrderPromRels || record.reqOrderPromRels.length < 1) {
    return null;
  }
  return record.reqOrderPromRels.map(prom => {
    let promWayName = "买赠";
    if (prom.promWay == 2) {
      promWayName = "降价";
    }
    return (
      <div className={styles.goodsRowPromBOx}>
        <span className={styles.promWayTip}>{promWayName}</span>
        <span>{prom.description}</span>
      </div>
    );
  });
};

class OrderListDetail extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      goodsOptsParam: {
        rowData: {}
      },
      deliveryDirect: "up",
      logsDirect: "up"
    };
    // 订单列表列
    this.orderColumns = [
      {
        title: "商品",
        dataIndex: "goodsId",
        key: "goodsId",
        width: "28%",
        render: (text, record, index) => {
          let ifPromShow = false;
          if (record.reqOrderPromRels && record.reqOrderPromRels.length > 0) {
            ifPromShow = true;
          }
          const promStyle = {
            display: ifPromShow ? "inline-block" : "none"
          };
          return (
            <div className={styles.goodsNameBox}>
              <div style={{"float": 'left', "fontSize": "1.5rem", "paddingRight": "1rem"}}>
                {Number(index) + 1}
              </div>              
              <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}>
                <span>编码：{record.goodsCode}</span>
                <span style={{'margin-left':'20px'}}>规格：{record.specification}</span>
                </p>
                <p className={styles.goodsCode}>
                <span>型号：{record.model}</span>
                </p>
                <p className={record.isGift == 1 ? styles.goodsStatus : ""}>
                  <span className={styles.goodsStatusTxt}>
                    {record.isGift == 1 ? "赠" : ""}
                  </span>
                </p>
                <p
                  className={styles.goodsStatus}
                  style={{
                    display: record.isGift == 1 ? "inline-block" : "none"
                  }}
                >
                  <span className={styles.goodsStatusTxt}>赠</span>
                </p>
                <Popover
                  content={promInfoHtml(record)}
                  title={null}
                  trigger="hover"
                  style={{ width: 500 }}
                >
                  <p className={styles.goodsStatus} style={promStyle}>
                    <span className={styles.goodsStatusTxt}>促</span>
                  </p>
                </Popover>
              </div>
            </div>
          );
        }
      },
      {
        title: "商品颜色",
        dataIndex: "salePrice",
        key: "salePrice",
        width: "22%",
        render: (text, record, index) => {
          if (record.isOptional || record.baseGoodsOptValue) {
            return (
              <span className={styles.goodsOpt}>
                {record.baseGoodsOptValue}
              </span>
            );
          } else {
            return null;
          }
        }
      },
      // {
      //   title: "商品编码",
      //   dataIndex: "goodsCode",
      //   key: "goodsCode",
      //   render: (text, record, index) => (
      //     <span className={styles.goodsCode}>{text}</span>
      //   )
      // },
      {
        title: "成交价",
        dataIndex: "dealPrice",
        key: "dealPrice",
        width: "12%",
        className: "alignRight",
        render: (text, record, index) => (
          <span>
            <span className={styles.fontRed}>{amountPrecision(record.dealPrice, "price", record.currencySign, record.currencyPriceScale)}</span>
            <em className={styles.em}>/{record.mainNumUnitName}</em>
          </span>
        )
      },
      {
        title: "订货数量",
        dataIndex: "orderNum",
        key: "orderNum",
        width: "8%",
        className: "alignRight",
        render: (text, record, index) => (
          <span>
            {record.orderNum}
            <em className={styles.em}>/{record.orderNumUnitName}</em>
          </span>
        )
      },
      {
        title: "重量",
        dataIndex: "weight",
        key: "weight",
        width: "8%",
        className: "alignRight",
        render: (text, record, index) => (
          <div>
            {unitPrecision(record.weight, record.weightUnitScale, record.weightUnitName)}
          </div>
        )
      },
      {
        title: "金额",
        dataIndex: "dealAmount",
        key: "dealAmount",
        width: "10%",
        className: "alignRight",
        render: (text, record, index) => (
          <span className={styles.fontRed} style={{ "paddingRight": "20px" }}>
            {amountPrecision(record.dealAmount, "amount", record.currencySign, record.currencyAmountScale)}
          </span>
        )
      },
    ];
    // BOM
    this.bomColumns = [
      {
        title: "商品",
        dataIndex: "goodsId",
        key: "goodsId-bom",
        width: "25%",
        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} title={record.goodsDisplayName || record.goodsName}>
                {record.goodsDisplayName||record.goodsName}
              </p>
              <p className={styles.goodsCode}>{record.goodsCode}{goodsVersion(record.version)}</p>
              <p className={record.isGift == 1 ? styles.goodsStatus : ""}>
                <span className={styles.goodsStatusTxt}>
                  {record.isGift == 1 ? "赠" : ""}
                </span>
              </p>
            </div>
          </div>
        )
      },
      {
        title: "选配",
        dataIndex: "baseGoodsOptValue",
        key: "baseGoodsOptValue-bom",
        width: "15%",
        render: (text, record, index) => (
          <span className={styles.valBox} title={record.baseGoodsOptValue}>
            {record.baseGoodsOptValue}
          </span>
        )
      },
      {
        title: "母件行号",
        dataIndex: "parentRowNum",
        key: "parentRowNum",
        width: "10%",
        className: "alignRight",
        render: (text, record, index) => (
          <span>
            <span>{text}</span>
          </span>
        )
      },
      {
        title: "母件商品名称",
        dataIndex: "parentGoodsName",
        key: "parentGoodsName",
        width: "12%",
        className: "alignRight",
        render: (text, record, index) => (
          <span className={styles.valBox} title={text}>
            {text}
          </span>
        )
      },
      {
        title: "母件商品编码",
        dataIndex: "parentGoodsCode",
        key: "parentGoodsCode",
        width: "12%",
        className: "alignRight",
        render: (text, record, index) => (
          <span className={styles.valBox} title={text}>
            {text}
          </span>
        )
      },
      // {
      //   title: "重量",
      //   dataIndex: "rowWeight",
      //   key: "rowWeight-bom",
      //   className: "alignRight",
      //   render: (text, record, index) => (
      //     <span className={styles.MainNum}>
      //       <span className={styles.textBox}>{(text || 0).toFixed(record.weightUnitPrecision || 2)}</span>
      //       <em className={`${styles.em} ${styles.unitBox}`}>{record.weightUnitName || ""}</em>
      //     </span>
      //   )
      // },
      // {
      //   title: "单价",
      //   dataIndex: "salePrice",
      //   key: "salePrice-bom",
      //   className: "alignRight",
      //   render: (text, record, index) => (
      //     <span>
      //       <span className={`${styles.fontRed} ${styles.textBox}`}>
      //       {amountPrecision(record.salePrice, "price", record.currencySign, record.currencyPriceScale)}
      //       </span>
      //       <em className={`${styles.em} ${styles.unitBox}`}>
      //         /{record.mainNumUnitName}
      //       </em>
      //     </span>
      //   )
      // },
      // {
      //   title: "成交价",
      //   dataIndex: "dealPrice",
      //   key: "dealPrice-bom",
      //   className: "alignRight",
      //   render: (text, record, index) => (
      //     <span>
      //       <span className={`${styles.fontRed} ${styles.textBox}`}>
      //       {amountPrecision(record.dealPrice, "price", record.currencySign, record.currencyPriceScale)}
      //       </span>
      //       <em className={`${styles.em} ${styles.unitBox}`}>
      //         /{record.mainNumUnitName}
      //       </em>
      //     </span>
      //   )
      // },
      {
        title: "订货量",
        dataIndex: "orderNum",
        key: "orderNum-bom",
        width: "12%",
        className: "alignRight",
        render: (text, record, index) => (
          <span className={styles.orderNum}>
            <span className={styles.textBox}>{record.orderNum}</span>
            <em className={`${styles.em} ${styles.unitBox}`}>
              {record.orderNumUnitName}
            </em>
          </span>
        )
      },
      {
        title: "主数量",
        dataIndex: "mainNum",
        key: "mainNum-bom",
        width: "12%",
        className: "alignRight",
        render: (text, record, index) => (
          <span className={styles.MainNum}>
            <span className={styles.textBox}>{record.mainNum}</span>
            <em className={`${styles.em} ${styles.unitBox}`}>
              {record.mainNumUnitName}
            </em>
          </span>
        )
      },
      // {
      //   title: "重量",
      //   dataIndex: "rowWeight",
      //   key: "rowWeight-bom",
      //   className: "alignRight",
      //   render: (text, record, index) => (
      //     <span className={styles.MainNum}>
      //       <span className={styles.textBox}>{(text || 0).toFixed(record.weightUnitPrecision || 2)}</span>
      //       <em className={`${styles.em} ${styles.unitBox}`}>{record.weightUnitName || ""}</em>
      //     </span>
      //   )
      // },
      // {
      //   title: "体积",
      //   dataIndex: "rowVolume",
      //   key: "rowVolume-bom",
      //   className: "alignRight",
      //   render: (text, record, index) => (
      //     <span className={styles.MainNum}>
      //       <span className={styles.textBox}>{(text || 0).toFixed(record.volumeUnitPrecision || 2)}</span>
      //       <em className={`${styles.em} ${styles.unitBox}`}>{record.volumeUnitName || ""}</em>
      //     </span>
      //   )
      // },
      // {
      //   title: "金额",
      //   dataIndex: "amount",
      //   key: "amount-bom",
      //   width: "100px",
      //   className: "alignRight",
      //   render: (text, record, index) => (
      //     <span className={styles.MainNum}>
      //       {amountPrecision(record.amount, "amount", record.currencySign, record.currencyAmountScale)}
      //     </span>
      //   )
      // },
      // {
      //   title: "成交金额",
      //   dataIndex: "dealAmount",
      //   key: "dealAmount-bom",
      //   width: "100px",
      //   className: "alignRight",
      //   render: (text, record, index) => (
      //     <div className={styles.dealAmount}>
      //       <span className={styles.fontRed}>
      //         {amountPrecision(record.dealAmount, "amount", record.currencySign, record.currencyAmountScale)}
      //       </span>
      //     </div>
      //   )
      // }
    ];
    // 发货单商品行明细
    this.deliveryColumns = [
      {
        title: "商品",
        dataIndex: "goodsId",
        key: "goodsId",
        className: "thAlignCenter goodsDisplayName",
        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 ||record.goodsName}</p>
              <p className={styles.goodsCode}>{record.goodsCode}{goodsVersion(record.version)}</p>
              <p className={record.isGift == 1 ? "inline-block" : "none"}>
                <span className={styles.goodsStatusTxt}>
                  {record.isGift == 1 ? "赠" : ""}
                </span>
              </p>
            </div>
          </div>
        )
      },
      // {
      //   title: "商品编码",
      //   dataIndex: "goodsCode",
      //   key: "goodsCode",
      //   width: "250px",
      //   render: (text, record, index) => (
      //     <span className={styles.goodsCode}>{text}</span>
      //   )
      // },
      {
        title: "单价",
        dataIndex: "dealPrice",
        key: "dealPrice",
        className: "alignRight goodsPrice",
        render: (text, record, index) => (
          <span className={styles.fontRed}>
            {amountPrecision(record.dealPrice, "price", record.currencySign, record.currencyPriceScale)}
            <em className={styles.em}>/{record.goodsBasicUnitName}</em>
          </span>
        )
      },
      // {
      //   title: "发货数量",
      //   dataIndex: "deliveryNum",
      //   key: "deliveryNum",
      //   className: "goodsNum",
      //   render: (text, record, index) => (
      //     <span className={styles.deliveryNum}>
      //       {record.deliveryNum}
      //       <em className={styles.cell}>/{record.orderNumUnitName}</em>
      //     </span>
      //   )
      // },
      {
        title: "发货数量",
        dataIndex: "assistNum",
        key: "assistNum",
        className: "alignRight mainNum",
        render: (text, record, index) => (
          <span className={styles.assistNum}>
            {record.assistNum}
            <em className={styles.em}>/{record.goodsBasicUnitName}</em>
          </span>
        )
      },
      {
        title: "金额小计",
        dataIndex: "dealAmount",
        key: "dealAmount",
        className: "alignRight dealAmount",
        render: (text, record, index) => (
          <span className={styles.fontRed}>
            {amountPrecision(record.dealAmount, "amount", record.currencySign, record.currencyAmountScale)}
          </span>
        )
      }
    ];
  }
  componentWillMount() {
    const { dispatch, location } = this.props;
    const id = location[`orderId`];
    // 如果id为空，返回订单列表页
    if (!id) {
      dispatch(
        routerRedux.push({
          pathname: "/buyer/orderList"
        })
      );
      return false;
    }
    // 获取订单详情页
    dispatch({
      type: "orderListDetail/getOrderDetailData",
      payload: {
        id: id
      }
    });
  }
  onGoodsOptionalHandle(goods, index) {
    const goodsOptsParam =  {
      rowData: goods,
      goodsId: goods.goodsId,
      baseGoodsOptId: goods.baseGoodsOptId,
      rowIndex: index
    };
    this.setState({
      goodsOptsParam: goodsOptsParam
    }, () => {
      this.props.dispatch({
        type: "global/goodsOptsVisible",
        payload: true
      });
    });
  }
  // 是否显示发货信息
  deliveryHandle() {
    const { deliveryDirect } = this.state;
    this.setState({
      deliveryDirect: deliveryDirect == "down" ? "up" : "down"
    });
  }
  // 是否显示操作日志
  logsHandle() {
    const { logsDirect } = this.state;
    this.setState({
      logsDirect: logsDirect == "down" ? "up" : "down"
    });
  }
  // 复制订单，跳转至订单编辑页面
  copyOrderHandle(data) {
    const { dispatch } = this.props;
    dispatch(
      routerRedux.push({
        pathname: "/buyer/orderEdit",
        query: {
          orderId: data.id,
          orderCode: data.orderCode
        }
      })
    );
  }
  // 退货，跳转至退货单编辑页面
  returnOrderHandle(data) {
    const { dispatch, match } = this.props;
    var id = match.params.id;
    dispatch(
      routerRedux.push({
        pathname: "/buyer/returnOrderEdit",
        query: {
          orderId: data.id,
          orderCode: data.orderCode,
          ifBaseReturnOrder: true
        }
      })
    );
  }
  // 确认收货，跳转至发货单签收页面
  deliverySignHandle(data) {
    const { dispatch } = this.props;
    dispatch(
      routerRedux.push({
        pathname: "/buyer/orderSignListDetail",
        saleOutOrderId: data.id
      })
    );
  }
  // 导出订单
  exportOrderHandle() {
    window.print();
  }
  render() {
    const { orderDetailData, logisticsData, settlementData } = this.props;
    if (!orderDetailData) return null;
    // todo...
    const {
      orderItems,
      reqOrderItemBoms,
      reqOrderTracks,
      reqOrderLogs
    } = orderDetailData;
    const trackings = [{}];
    const reqOrderReceiveAddress = orderDetailData.reqOrderReceiveAddress || {};
    const reqOrderInvoice = orderDetailData.reqOrderInvoice || {};
    // 订单列表列
    const orderColumns = this.orderColumns;
    const deliveryColumns = this.deliveryColumns;
    // 退货按钮默认不显示
    let returnButtonShow = false;
    // 校验退货按钮是否显示
    returnButtonShow = ifValidReturnButtonShow(orderDetailData);
    const iconType = value => {
      let name;
      switch (value) {
        case "订单提交":
          name = `${iconfontStyles["buyer-iconfont"]} ${
            iconfontStyles["icon-icon-SubmitOrder"]
          }`;
          break;
        case "订单审核":
          name = `${iconfontStyles["buyer-iconfont"]} ${
            iconfontStyles["icon-icon-ReviewOrder"]
          }`;
          break;
        case "订单发货":
          name = `${iconfontStyles["buyer-iconfont"]} ${
            iconfontStyles["icon-icon-DeliveryOrder"]
          }`;
          break;
        case "订单签收":
          name = `${iconfontStyles["buyer-iconfont"]} ${
            iconfontStyles["icon-icon-SignOrder"]
          }`;
          break;
        case "订单完成":
          name = `${iconfontStyles["buyer-iconfont"]} ${
            iconfontStyles["icon-icon-CompleteOrder"]
          }`;
          break;
      }
      return name;
    };
    // 订单状态
    const trackingsHtml = () => {
      if (!orderDetailData) return null;
      const reqOrderTracks = orderDetailData.reqOrderTracks;
      const trackings = [
        {
          status: "wait",
          code: "commit",
          name: "订单提交"
        },
        {
          status: "wait",
          code: "approve",
          name: "订单审核"
        },
        {
          status: "wait",
          code: "delivery",
          name: "订单发货"
        },
        {
          status: "wait",
          code: "finish",
          name: "订单签收"
        },
        {
          status: "wait",
          code: "finish",
          name: "订单完成"
        }
      ];
      trackings.forEach(track => {
        const reqTrack =
          reqOrderTracks.find(item => item.node == track.code) || {};
        if (reqTrack.finish && reqTrack.finish == 1) {
          track.status = "finish";
          track.operateDate = moment(reqTrack.operateTime).format("YYYY-MM-DD");
          track.operateTime = moment(reqTrack.operateTime).format("HH:mm:ss");
        }
      });
      const html = trackings.map(item => {
        return (
          <Step
            key={item.name}
            status={item.status}
            title={item.name}
            description={
              <div style={{ fontSize: "12px" }}>
                <div>{item.operateDate}</div>
                <div style={{ "paddingLeft": "10px" }}>{item.operateTime}</div>
              </div>
            }
            icon={
              <i className={`${styles.trackIcon} ${iconType(item.name)}`} />
            }
          />
        );
      });
      return html;
    };
    const ifHavedSign = (items) => {
      let isSign = false;
      /**
       * 当前版本，出库单只能整单签收且只签收一次
       * 因此，出库单商品行累计签收数量 > 0,即可默认改出库单已签收过
       */
      if (items && items.length > 0) {
        if (+(items[0].signNum || 0) > 0) {
          isSign = true;
        }
      }
      return isSign;
    };
    // 发货单
    const deliverHtml = deliveryColumns => {
      if (!orderDetailData) return null;
      const saleOutOrderInfoDtos = orderDetailData.saleOutOrderInfoDtos;
      if (!saleOutOrderInfoDtos || saleOutOrderInfoDtos.length < 1) return null;
      const contentHtml = saleOutOrderInfoDtos.map(data => {
        return (
          <div className={styles.goodsItemParent} key={data.id}>
            <div className={styles.parentTtile}>
              <div className={styles.titleItem}>
                <span className={styles.name}>发货单号: </span>
                <span className={styles.value}>{data.billCode}</span>
              </div>
              <div className={styles.titleItem}>
                <span className={styles.name}>发货时间: </span>
                <span className={styles.value}>{moment(data.billDate).format("YYYY-MM-DD HH:mm")}</span>
              </div>
              <div className={styles.titleItem}>
                <span className={styles.name}>物流公司: </span>
                <span className={styles.value}>{data.realLogisticsCompanyName || ""}</span>
              </div>
              <div className={styles.titleItem}>
                <span className={styles.name}>发货信息: </span>
                <span className={styles.value}>{data.billStatusName}</span>
              </div>
              <Button
                className={styles.okBtn}
                style={{ display: ifHavedSign(data.saleOutOrderItemInfoDtos) ? "none" : "inline-block" }}
                onClick={this.deliverySignHandle.bind(this, data)}
              >
                确认收货
              </Button>
            </div>
            <div className={styles.scrollbar}>
              <Table
                className={styles.orderGoodsListGrid}
                showHeader={false}
                pagination={false}
                dataSource={data.saleOutOrderItemInfoDtos}
                columns={deliveryColumns}
              />
            </div>
          </div>
        );
      });
      return contentHtml;
    };
    // 操作日志
    const getStepTtile = item => {
      const weekDay = moment(item.creationTime).format("d");
      let weekDayName = "";
      switch (weekDay) {
        case "1":
          weekDayName = "周一";
          break;
        case "2":
          weekDayName = "周二";
          break;
        case "3":
          weekDayName = "周三";
          break;
        case "4":
          weekDayName = "周四";
          break;
        case "5":
          weekDayName = "周五";
          break;
        case "6":
          weekDayName = "周六";
          break;
        case "0":
          weekDayName = "周日";
          break;
        default:
          break;
      }
      return (
        <Row>
          <Col span={4}>
            {`${moment(item.creationTime).format("YYYY-MM-DD")}/${weekDayName}`}
          </Col>
          <Col span={3}>{moment(item.creationTime).format("HH:mm:ss")}</Col>
          <Col span={16}>
            {item.content} {item.orderDescription}
          </Col>
        </Row>
      );
    };
    const logsHtml = () => {
      if (!reqOrderLogs) return null;
      reqOrderLogs.sort((pre, next) => {
        return next.creationTime - pre.creationTime;
      });
      const html = reqOrderLogs.map(item => (
        <Timeline.Item key={item.id}>{getStepTtile(item)}</Timeline.Item>
      ));
      return html;
    };
    // const BreadcrumbPaths = [
    //   {
    //     key: "/buyer/orderListDetail",
    //     title: `订单号：${orderDetailData.orderCode}`
    //   }
    // ];
    // 整单降价促销
    const getOrderPriceCutHtml = () => {
      if (!orderDetailData || !orderDetailData.reqOrderPromRels) return null;
      const orderProm = orderDetailData.reqOrderPromRels[0];
      if (!orderProm) return null;
      return (
        <div className={styles.orderPriceCutTitle}>
          <span className={styles.priceTip}>降价</span>
          <span>{orderProm.description}</span>
        </div>
      );
    };
    return (
      <div className={styles.orderListDetailBox}>
        {/* <BreadcrumbPackage additems={BreadcrumbPaths} /> */}
        {/* 订单状态 */}
        <div className={styles.orderStatusBox}>
          <div className={styles.leftBox}>
            <p className={styles.orderCode}>
              订单号: {orderDetailData.orderCode}
            </p>
            <p className={styles.orderStatus}>
              {orderDetailData.orderStatusName}
            </p>
            <p className={styles.btnBox}>
              <Button
                className={styles.btn}
                onClick={this.copyOrderHandle.bind(this, orderDetailData)}
              >
                复制本单
              </Button>
              {/* <Button className={styles.btn} onClick={this.exportOrderHandle}>
                订单导出
              </Button> */}
            </p>
            <p className={styles.orderCode}>
              总金额: {amountPrecision(orderDetailData.totalDealAmount, "amount", orderDetailData.currencySign, orderDetailData.currencyAmountScale)}
            </p>
          </div>
          {/* <div className={styles.rightBox}>
            <Steps>
              {trackingsHtml()}
            </Steps>
          </div> */}
        </div>
        {/* 订单状态--end */}
        {/* 收货信息 */}
        <div className={styles.infoBox}>
          <div className={styles.infoItem}>
            <p className={styles.title}>收货人信息</p>
            <div className={styles.info}>
              <span className={styles.name}>收货人:</span>
              <div className={styles.value}>
                {reqOrderReceiveAddress.receiver}
              </div>
            </div>
            <div className={styles.info}>
              <span className={styles.name}>地址:</span>
              <div className={styles.value}>
                {`${reqOrderReceiveAddress.receiverProvince ||
                  ""} ${reqOrderReceiveAddress.receiverCity ||
                  ""} ${reqOrderReceiveAddress.receiverCounty ||
                  ""} ${reqOrderReceiveAddress.receiverTown ||
                  ""} ${reqOrderReceiveAddress.receiverAddress || ""}`}
              </div>
            </div>
            <div className={styles.info}>
              <span className={styles.name}>手机号:</span>
              <div className={styles.value}>
                {reqOrderReceiveAddress.receiverPhone}
              </div>
            </div>
          </div>
          <div className={styles.infoItem}>
            <p className={styles.title}>运输与结算</p>
            <div className={styles.info}>
              <span className={styles.name}>运输方式:</span>
              <div className={styles.value}>
                {orderDetailData.transportModeName}
              </div>
            </div>
          </div>
          <div className={styles.infoItem}>
            <p className={styles.title}>发票信息</p>
            <div className={styles.info}>
              <span className={styles.name}>发票类型:</span>
              <div className={styles.value}>{reqOrderInvoice.invoiceType}</div>
            </div>
            <div className={styles.info}>
              <span className={styles.name}>发票抬头:</span>
              <div className={styles.value}>{reqOrderInvoice.invoiceTitle}</div>
            </div>
            <div className={styles.info}>
              <span className={styles.name}>纳税人号:</span>
              <div className={styles.value}>{reqOrderInvoice.invoiceTaxId}</div>
            </div>
            <div className={styles.info}>
              <span className={styles.name}>开户行:</span>
              <div className={styles.value}>{reqOrderInvoice.invoiceBank}</div>
            </div>
            <div className={styles.info}>
              <span className={styles.name}>账号:</span>
              <div className={styles.value}>
                {reqOrderInvoice.invoiceAccount}
              </div>
            </div>
          </div>
          <div className={styles.infoItem}>
            <p className={styles.title}>订单备注</p>
            <div className={styles.info}>{orderDetailData.remark}</div>
          </div>
        </div>
        {/* 订单商品信息 */}
        <div className={styles.orderGoodsListBox}>
          <Tabs defaultActiveKey="product-tab" type="card">
            <TabPane tab="商品信息" key="product-tab">
              <Table
                scroll={{ y: 550 }}
                pagination={false}
                dataSource={orderItems}
                columns={orderColumns}
              />
            </TabPane>
            {/* <TabPane tab="商品BOM信息" key="product-bom-tab">
              <Table
                scroll={{ y: 550 }}
                pagination={false}
                dataSource={reqOrderItemBoms || []}
                columns={this.bomColumns}
              />
            </TabPane> */}
          </Tabs>
        </div>
        {getOrderPriceCutHtml()}
        <div className={styles.orderGoodsInfo}>
          <div className={styles.item}>
            <span className={styles.valueBox}>
              {amountPrecision(orderDetailData.totalAmount, "amount", orderDetailData.currencySign, orderDetailData.currencyAmountScale)}
            </span>
            <span className={styles.name}>商品金额:</span>
          </div>
          {/* <div className={styles.item}>
            <span className={styles.valueBox}>
              {amountPrecision(orderDetailData.offsetAmount, "amount", orderDetailData.currencySign, orderDetailData.currencyAmountScale)}
            </span>
            <span className={styles.name}>费用冲抵:</span>
          </div> */}
          <div className={styles.item} style={{ marginTop: 10 }}>
            <span
              className={styles.valueBox}
              style={{ fontSize: 24, color: "#D81719" }}
            >
              {amountPrecision(orderDetailData.totalDealAmount, "amount", orderDetailData.currencySign, orderDetailData.currencyAmountScale)}
            </span>
            <span className={styles.name}>订单总金额:</span>
          </div>
        </div>
        {/* 订单商品信息--end */}
        {/* 操作按钮 */}
        {/* 操作按钮--end */}
        {/* 发货信息 */}
        {/* 发货信息--end */}
        {/* 操作日志 */}
        {/* 操作日志--end */}
        <GoodsOptsDialog
          title="商品选配"
          goodsOptsParam={this.state.goodsOptsParam}
          ifFooterNul={!!1}
        />
      </div>
    );
  }
}
export default connect(state => ({
  orderDetailData: state.orderListDetail.orderDetailData
}))(OrderListDetail);
