Dingdong_app/components/OrderCard.js

/* eslint-disable react/jsx-props-no-spreading */
/* eslint-disable no-shadow */
import React from "react";
import { StyleSheet } from "react-native";
import {
  Card,
  Text,
  Button,
  Layout,
  MenuGroup,
  MenuItem,
} from "@ui-kitten/components";
import { Linking } from "expo";
import { useModel } from "flooks";

const styles = StyleSheet.create({
  orderItem1: {
    justifyContent: "space-between",
    flexDirection: "row",
    marginBottom: 10,
  },
  orderItem2: {
    alignItems: "flex-start",
    flexDirection: "row",
    marginBottom: 15,
  },
  leftText: {
    flexShrink: 0,
    marginRight: 8,
    minWidth: 60,
  },
  menuGroup: {
    padding: 0,
    margin: 0,
  },
  lay: {
    flex: 1,
  },
  menuTitle: {
    flexDirection: "row",
    flex: 1,
  },
  footerContainer: {
    flexDirection: "row",
    justifyContent: "flex-end",
  },
  footerControl: {
    width: 112,
    marginLeft: 5,
  },
  sub: {
    flex: 1,
    flexShrink: 0,
  },
  menuItem: {
    flex: 1,
    // paddingHorizontal: 0,
    // paddingVertical: 0,
    // paddingLeft: 0,
    // marginTop: 5,
    // marginHorizontal: 5,
  },
  right: {
    textAlign: "right",
  },
  center: {
    textAlign: "center",
  },
});

const MenuTitle = (title, sub, num, index) => (
  <Layout style={styles.menuTitle} key={index || 0}>
    <Text category="h1" style={styles.sub}>
      {title}
    </Text>
    {num && (
      <Text category="h1" style={[styles.sub, styles.center]}>
        {num}
      </Text>
    )}
    <Text category="h1" style={[styles.sub, styles.right]}>
      {sub}
    </Text>
  </Layout>
);

const lsitMenu = list => {
  return (
    <Layout style={styles.menuItem}>
      {[...list].map((item, index) => {
        const { goods } = item;
        return MenuTitle(goods.name, item.goodsRealPrice, item.num, index + 1);
      })}
    </Layout>
  );
};

function getGoodsInfo(orderGoodsSpecs) {
  const info = {
    list: orderGoodsSpecs,
    name: "",
    num: 0,
  };

  if (orderGoodsSpecs.length > 0) {
    info.num = orderGoodsSpecs.reduce((pre, cur) => {
      return pre + cur.num;
    }, 0);

    info.name = orderGoodsSpecs[0].goods.name;
  }
  return info;
}

export default function OrderCard(props) {
  const {
    orderInfo2,
    orderInfo3,
    orderInfo4,
    orderInfo5,
    orderInfo6,
    getWordsStr,
    orderButton1,
    orderButton2,
    overTips,
  } = useModel("wordsModel");
  const { showDialog } = useModel("dialogModel");
  const { receivedOrder } = useModel("orderInfoModel");
  const { info, updateInfo, style } = props;
  const {
    id,
    payMethod,
    orderTime,
    userAddress,
    merchantStatus,
    user,
    riderStatus,
    remark,
    orderGoodsSpecs,
    realAmount,
    riderName,
    timeOfArrival,
    userReceivedTime,
  } = info || {};

  const Footer = props => {
    if (riderStatus && riderStatus !== "NOT_RECEIVED") {
      return (
        <Layout {...props} style={[props.style]}>
          <Layout style={styles.orderItem1}>
            <Text category="c2">
              骑手：
              {riderName}
            </Text>
            <Button
              appearance="outline"
              onPress={() => {
                Linking.openURL(`tel:+${user.phone}`);
              }}
            >
              联系骑手
            </Button>
          </Layout>
          <Layout style={styles.orderItem1}>
            <Text category="c2">
              预计送达时间：
              {timeOfArrival}
            </Text>
          </Layout>
          {riderStatus === "CARRY_OUT" && (
            <Layout style={styles.orderItem1}>
              <Text category="c2">
                实际送达时间：
                {userReceivedTime}
              </Text>
            </Layout>
          )}
        </Layout>
      );
    }
    if (merchantStatus === "NOT_RECEIVED") {
      return (
        <Layout {...props} style={[props.style, styles.footerContainer]}>
          <Button
            style={styles.footerControl}
            appearance="outline"
            onPress={() => {
              showDialog({
                bodyText: overTips,
                status: "danger",
                cancelable: true,
                confirmCallback: () => {
                  receivedOrder(id, false).then(res => {
                    updateInfo(res);
                  });
                },
              });
            }}
          >
            {orderButton1}
          </Button>
          <Button
            style={styles.footerControl}
            onPress={() => {
              receivedOrder(id, true).then(res => {
                updateInfo(res);
              });
            }}
            appearance="outline"
          >
            {orderButton2}
          </Button>
        </Layout>
      );
    }
    return null;
  };

  const orderGoodsSpecsShowInfo = getGoodsInfo(orderGoodsSpecs || []);
  return (
    <Card appearance="orderCard" disabled style={[style]} footer={Footer}>
      {riderStatus ? (
        <Text>
          骑手
          {getWordsStr(riderStatus)}
        </Text>
      ) : (
        <Text>
          商家
          {getWordsStr(merchantStatus)}
        </Text>
      )}
      <Layout style={styles.orderItem1}>
        <Text category="c2">{id}</Text>
        <Text category="c2">
          {orderInfo2}:{orderTime}
        </Text>
      </Layout>
      <Layout style={styles.orderItem1}>
        <Text category="h6">{user.nickname}</Text>
        <Text category="h6">{getWordsStr(payMethod)}</Text>
      </Layout>
      <Layout style={styles.orderItem1}>
        <Text category="c2">{user.phone}</Text>
        <Button
          appearance="outline"
          onPress={() => {
            Linking.openURL(`tel:+${user.phone}`);
          }}
        >
          {orderInfo3}
        </Button>
      </Layout>

      <Layout style={styles.orderItem2}>
        <Text category="c2" style={styles.leftText}>
          {orderInfo4}
        </Text>
        <Text category="h1">{userAddress}</Text>
      </Layout>

      <Layout style={styles.orderItem2}>
        <Text category="c2" style={styles.leftText}>
          {orderInfo5}
        </Text>
        <Layout style={styles.lay}>
          <MenuGroup
            appearance="orderProduct"
            title={() => MenuTitle(orderGoodsSpecsShowInfo.name, realAmount)}
            style={styles.menuGroup}
          >
            <MenuItem
              disabled
              style={styles.menuItem}
              title={lsitMenu(orderGoodsSpecsShowInfo.list)}
            />
          </MenuGroup>
        </Layout>
      </Layout>

      <Layout style={styles.orderItem2}>
        <Text category="c2" style={styles.leftText}>
          {orderInfo6}:
        </Text>
        <Text category="h1">{remark || "无"}</Text>
      </Layout>
    </Card>
  );
}