import React from "react";
import { OrderProps } from "../../data/Props";
import OrderStyle from "./order.module.css";

export function CommonOrder(props: OrderProps) {
  let unit = "￥";
  let price = props.price;
  let decimal = "";
  if (price.startsWith("￥") || price.startsWith("¥")) {
    price = price.replace("¥", "").replace("￥", "");
  }
  let decimalIndex = price.indexOf(".");
  if (decimalIndex > 0) {
    decimal = price.substring(decimalIndex);
    price = price.substring(0, decimalIndex);
  }
  return (
    <div className={OrderStyle.container} style={props.styles}>
      <div className={OrderStyle.order}>
        <div className={OrderStyle.id}>订单号: {props.orderId}</div>
        <div style={{ flex: 1 }}></div>
        {props.changeOrder ? <div className={OrderStyle.change_button}>更换订单</div> : null}
      </div>
      <div className={OrderStyle.product}>
        <img className={OrderStyle.img} src={props.imgUrl} alt=""></img>
        <div className={OrderStyle.name}>{props.name}</div>
        <div className={OrderStyle.info}>
          <div>
            <span className={OrderStyle.unit}>{unit}</span>
            <span className={OrderStyle.price}>{price}</span>
            <span className={OrderStyle.decimal}>{decimal}</span>
          </div>
          <div className={OrderStyle.number}>共{props.num}件</div>
          <div className={OrderStyle.number}>{props.status}</div>
        </div>
      </div>
    </div>
  );
}
