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 = () => {
    return (
      <Layout style={styles.menuItem}>
        {[1, 2].map((item, index) => {
                return MenuTitle(`圣诞节副科${  item}`, "¥9999.99", 2, index + 1);
            })}
      </Layout>
    );
};


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,
    } = info || {};

    const Footer = (props) => {
        if (riderStatus) {
            return (
              <Layout
                {...props}
                style={[props.style]}
              >
                <Layout style={styles.orderItem1}>
                  <Text category='c2'>骑手：胖齐齐</Text>
                  <Button
                    appearance='outline'
                    onPress={() => {
                                Linking.openURL(`tel:+${  user.phone}`);
                            }}
                  >
                    联系骑手
                  </Button>
                </Layout>
                <Layout style={styles.orderItem1}>
                  <Text category='c2'>
                    预计送达时间：2019-12-31 13:17
                  </Text>
                </Layout>
                {riderStatus === "CARRY_OUT" && (
                <Layout style={styles.orderItem1}>
                  <Text category='c2'>
                    实际送达时间：2019-12-31 13:17
                  </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;
        
    };
    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("圣诞节副科", "¥9999.99")}
              style={styles.menuGroup}
            >
              <MenuItem
                disabled
                style={styles.menuItem}
                title={lsitMenu}
              />
            </MenuGroup>
          </Layout>
        </Layout>

        <Layout style={styles.orderItem2}>
          <Text category='c2' style={styles.leftText}>
            {orderInfo6}
            :
          </Text>
          <Text category='h1'>多放辣椒</Text>
        </Layout>
      </Card>
    );
}