Dingdong_client/screens/Order/OrderDetailScreen.jsx

/* eslint-disable no-underscore-dangle */
import * as WebBrowser from 'expo-web-browser';
import * as React from 'react';
import {
  StyleSheet,
  View,
  Clipboard,
  Dimensions,
  Animated,
  PanResponder,
  findNodeHandle,
  UIManager,
} from 'react-native';
import { Div, Button, Image, Text } from 'react-native-magnus';
import { Appbar, Menu } from 'react-native-paper';
import Constants from 'expo-constants';

import { Flex } from '@ant-design/react-native';
import { ScrollView } from 'react-native-gesture-handler';

import { useRequest, useCreation, useMount } from '@umijs/hooks';

import { useRoute } from '@react-navigation/native';
import { useAnimation } from 'react-native-animation-hooks';
import useModel from 'flooks';
import Toast from '../../flooks/Toast';

import Header from './Header'; // 头部

import { connectKefu } from '../../Utils/TotastUtils';
import {
  merchantStatusMap,
  orderStatusMap,
  RiderStatusMap,
  payMap,
  reasonMap,
} from '../../Utils/OrderUtils';
import Time from '../../Utils/TimeUtils';

import MapScreen from '../Map/MapScreen';

export default function OrderScreen({ navigation }) {
  const [orderInfo, setorderInfo] = React.useState({
    merchant: {},
    orderGoodsSpecs: [],
  });

  const { loading, success, warnning, clearLoading } = useModel(Toast, []);

  const route = useRoute();
  const { params } = route;
  const { orderId } = params || 0;

  const orderRequest = useRequest(`/orderInfo/get/${orderId}`, {
    refreshDeps: [orderId],
    onSuccess: (result) => {
      setorderInfo(result);
    },
  });

  const { merchant, orderGoodsSpecs } = orderInfo;

  const statusInfo = useCreation(() => {
    const statusList = [];

    if (orderInfo.status) {
      statusList.push(orderStatusMap.get(orderInfo.status));
    }
    if (orderInfo.merchantStatus) {
      statusList.push(merchantStatusMap.get(orderInfo.merchantStatus));
    }
    if (orderInfo.riderStatus) {
      statusList.push(RiderStatusMap.get(orderInfo.riderStatus));
    }

    if (statusList.length > 0) {
      return statusList.sort((a, b) => {
        return b.sort - a.sort;
      })[0];
    } else {
      return {
        name: '订单详情',
      };
    }
  }, [orderInfo]);

  const finish = useCreation(() => {
    if (
      orderInfo.riderStatus === 'CARRY_OUT' ||
      orderInfo.status === 'CANCELLED'
    ) {
      return true;
    } else {
      return false;
    }
  }, [orderInfo]);

  const cancelOrder = useCreation(() => {
    if (orderInfo.status === 'CANCELLED') {
      return true;
    } else {
      return false;
    }
  }, [orderInfo]);

  const Allfinish = useCreation(() => {
    if (orderInfo.status === 'COMPLETED') {
      return true;
    } else {
      return false;
    }
  }, [orderInfo]);

  const detailRef = React.useRef();
  const pan = React.useRef(new Animated.ValueXY()).current;
  const minMove = React.useRef(new Animated.Value(0)).current;
  const maxMove = React.useRef(
    new Animated.Value(Dimensions.get('window').height * 0.6)
  ).current;
  const panResponder = React.useRef(
    PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onMoveShouldSetPanResponder: () => true,
      onPanResponderGrant: () => {
        pan.setOffset({
          y: pan.y._value,
        });
      },
      onPanResponderMove: (e, ges) => {
        const y = ges.dy + pan.y._offset;
        if (y >= minMove._value && y <= maxMove._value) {
          pan.setValue({
            y: ges.dy,
          });
        } else if (y < minMove._value) {
          pan.setValue({
            y: minMove._value - pan.y._offset,
          });
        } else {
          pan.setValue({
            y: maxMove._value - pan.y._offset,
          });

          if (ges.moveY > 500) {
            orderRequest.run();
          }
        }

        if (maxMove._value !== 0) {
          if (maxMove._value - y < 200) {
            setbackgorundColor(
              `rgba(255, 194, 28,${Math.ceil(
                (1 / 200) * (maxMove._value - y)
              )})`
            );
            setshowDetail(false);
          } else {
            setbackgorundColor('#FFC21C');
            setshowDetail(true);
          }
        }
      },
      onPanResponderRelease: () => {
        pan.flattenOffset();
      },
    })
  ).current;

  React.useEffect(() => {
    if (finish) {
      maxMove.setValue(0);
      pan.setValue({
        y: 0,
      });
      setshowDetail(true);
      setbackgorundColor('#FFC21C');
    } else {
      maxMove.setValue(Dimensions.get('window').height * 0.6);
      pan.setValue({
        y: Dimensions.get('window').height * 0.6,
      });
      setshowDetail(false);
    }
  }, [finish]);

  const [backgorundColor, setbackgorundColor] = React.useState(
    'rgba(255, 194, 28,0)'
  );

  const [showDetail, setshowDetail] = React.useState(false);

  React.useEffect(() => {
    if (orderRequest.loading) {
      loading();
    } else {
      clearLoading();
    }
  }, [orderRequest.loading]);

  return (
    <Div bg="gray200" w="100%" flex={1}>
      <Header
        title={showDetail ? statusInfo.name : ' '}
        bg={backgorundColor}
        orderId={orderId}
        hasRight={!finish && !Allfinish && !cancelOrder}
      />

      {/* <RefreshControl
        refreshing={orderRequest.loading}
        onRefresh={orderRequest.run}
      > */}
      {!finish && (
        <Div
          w={Dimensions.get('window').width}
          h={Dimensions.get('window').height + Constants.statusBarHeight}
          position="absolute"
          top={0}
          left={0}
          zIndex={1}
        >
          <MapScreen orderInfo={orderInfo} />
        </Div>
      )}

      <Animated.View
        ref={detailRef}
        style={{
          zIndex: 2,
          backgroundColor: 'rgba(0,0,0,0)',
          transform: [{ translateY: pan.y }],
        }}
        {...panResponder.panHandlers}
        onLayout={({ nativeEvent }) => {
          minMove.setValue(
            Dimensions.get('window').height -
              nativeEvent.layout.height -
              nativeEvent.layout.y -
              Constants.statusBarHeight
          );
        }}
      >
        <Div pt={10} pb={10} px={15}>
          <View style={[styles.card]}>
            {!cancelOrder &&
              (finish ? (
                <Text fontSize="xl">
                  <Text
                    fontSize="xl"
                    color="brand500"
                    mr={10}
                    fontWeight="bold"
                  >
                    {statusInfo.name}
                  </Text>
                  {new Time(
                    orderInfo.userReceivedTime,
                    'yyyy-MM-DD HH:mm:ss'
                  ).getFormat('HH:mm')}
                  送达
                </Text>
              ) : (
                <Text fontSize="xl">
                  <Text
                    fontSize="xl"
                    color="brand500"
                    mr={10}
                    fontWeight="bold"
                  >
                    {statusInfo.name}
                  </Text>
                  预计
                  {new Time(
                    orderInfo.timeOfArrival,
                    'yyyy-MM-DD HH:mm:ss'
                  ).getFormat('HH:mm')}
                  送达
                </Text>
              ))}
            {cancelOrder && (
              <Div row>
                <Text fontSize="xl" color="brand500" mr={10} fontWeight="bold">
                  {statusInfo.name}
                </Text>
                {!!orderInfo.reason && (
                  <Text fontSize="xl" color="red500">
                    ({reasonMap.get(orderInfo.reason).name})
                  </Text>
                )}
              </Div>
            )}
            <Div row mt={10}>
              <Button
                fontSize="xs"
                flex={1}
                mx={5}
                bg="white"
                color="gray600"
                borderColor="brand500"
                borderWidth={1}
                rounded={3}
                onPress={() => connectKefu(orderId)}
              >
                联系客服
              </Button>
              {!finish && (
                <Button
                  fontSize="xs"
                  flex={1}
                  mx={5}
                  bg="white"
                  color="gray600"
                  borderColor="brand500"
                  borderWidth={1}
                  rounded={3}
                  onPress={() => {
                    warnning('正在帮您联系骑手');
                  }}
                >
                  联系骑手
                </Button>
              )}
              {!finish && (
                <Button
                  fontSize="xs"
                  flex={1}
                  mx={5}
                  bg="white"
                  color="gray600"
                  borderColor="brand500"
                  borderWidth={1}
                  rounded={3}
                  onPress={() => {
                    warnning('正在帮您催单');
                  }}
                >
                  催单
                </Button>
              )}
              {finish && !cancelOrder && (
                <Button
                  fontSize="xs"
                  flex={1}
                  mx={5}
                  bg="white"
                  color="gray600"
                  borderColor="brand500"
                  borderWidth={1}
                  rounded={3}
                  onPress={() => {
                    navigation.navigate('RewardRider', {
                      orderId,
                    });
                  }}
                >
                  打赏骑手
                </Button>
              )}
              {finish && !Allfinish && !cancelOrder && (
                <Button
                  fontSize="xs"
                  flex={1}
                  mx={5}
                  bg="white"
                  color="gray600"
                  borderColor="brand500"
                  borderWidth={1}
                  rounded={3}
                  onPress={() => {
                    navigation.navigate('Evaluate', {
                      orderId,
                    });
                  }}
                >
                  立即评价
                </Button>
              )}
            </Div>
          </View>

          <View style={[styles.card]}>
            <Div row pb={10}>
              <Text fontSize="xl" fontWeight="bold">
                {merchant.showName}
              </Text>
              <Button
                fontSize="xs"
                w={100}
                bg="white"
                color="gray600"
                borderColor="brand500"
                borderWidth={1}
                rounded={3}
                ml={14}
                onPress={() => {
                  warnning('正在帮您联系商家');
                }}
              >
                联系商家
              </Button>
            </Div>
            <Div>
              {orderGoodsSpecs.map((item) => {
                return (
                  <GoodsItem info={item} goods={item.goods} key={item.id} />
                );
              })}
            </Div>
            <Flex style={styles.info}>
              <Flex.Item>
                <Flex>
                  <Text fontSize="xs" color="gray300" textAlign="left">
                    包装费
                  </Text>
                  <Text fontSize="xs" color="gray300" textAlign="left">
                    餐盒
                  </Text>
                </Flex>
              </Flex.Item>
              <Text fontSize="xs" color="gray300" textAlign="left">
                ¥{orderInfo.packingPrice}
              </Text>
            </Flex>
            <Flex style={styles.info}>
              <Flex.Item>
                <Text fontSize="xs" color="gray300" textAlign="left">
                  配送费（叮咚专送）
                </Text>
              </Flex.Item>
              <Text fontSize="xs" color="gray300" textAlign="left">
                ¥{orderInfo.deliveryAmount}
              </Text>
            </Flex>
            <Flex style={styles.info}>
              <Flex.Item>
                <Text fontSize="xs" color="gray300" textAlign="left">
                  满减
                </Text>
              </Flex.Item>
              <Text fontSize="xs" color="red500" textAlign="left">
                -¥{orderInfo.fullReduction}
              </Text>
            </Flex>
            {!!orderInfo.firstBuy && (
              <Flex style={styles.info}>
                <Flex.Item>
                  <Text fontSize="xs" color="gray300" textAlign="left">
                    首单
                  </Text>
                </Flex.Item>
                <Text fontSize="xs" color="red500" textAlign="left">
                  ¥{orderInfo.firstBuy}
                </Text>
              </Flex>
            )}

            <Flex style={styles.info}>
              <Flex.Item>
                <Text fontSize="xs" color="gray300" textAlign="left">
                  红包
                </Text>
              </Flex.Item>
              <Text fontSize="xs" color="red500" textAlign="left">
                -¥{orderInfo.redBag || 0}
              </Text>
            </Flex>
            <Flex style={styles.total} justify="end">
              <Text size="s1">小计 ¥{orderInfo.realAmount}</Text>
            </Flex>
          </View>

          <View style={[styles.card]}>
            <Text size="c1">订单信息</Text>
            <View style={styles.main}>
              <Flex style={styles.info2}>
                <Flex.Item>
                  <Text fontSize="xs" textAlign="left">
                    下单时间
                  </Text>
                </Flex.Item>
                <Text fontSize="xs" textAlign="left">
                  {orderInfo.orderTime}
                </Text>
              </Flex>
              {orderInfo.userReceivedTime ? (
                <Flex style={styles.info2}>
                  <Flex.Item>
                    <Text fontSize="xs" textAlign="left">
                      送达时间
                    </Text>
                  </Flex.Item>
                  <Text fontSize="xs" textAlign="left">
                    {orderInfo.userReceivedTime}
                  </Text>
                </Flex>
              ) : (
                <Flex style={styles.info2}>
                  <Flex.Item>
                    <Text fontSize="xs" textAlign="left">
                      预计送达时间
                    </Text>
                  </Flex.Item>
                  <Text fontSize="xs" textAlign="left">
                    {orderInfo.timeOfArrival}
                  </Text>
                </Flex>
              )}

              <Flex style={styles.info2}>
                <Flex.Item style={styles.address}>
                  <Text fontSize="xs" textAlign="left">
                    收货地址
                  </Text>
                </Flex.Item>
                <Text fontSize="xs" textAlign="left">
                  {orderInfo.userAddress}
                </Text>
              </Flex>
              <Flex style={styles.info2}>
                <Flex.Item>
                  <Text fontSize="xs" textAlign="left">
                    配送骑手
                  </Text>
                </Flex.Item>
                <Flex>
                  <Button
                    fontSize="xs"
                    w={100}
                    bg="white"
                    color="gray600"
                    borderColor="brand500"
                    borderWidth={1}
                    rounded={3}
                    onPress={() => {
                      warnning('正在帮您联系骑手');
                    }}
                  >
                    联系骑手
                  </Button>
                  <Text fontSize="xs" ml={20} textAlign="left">
                    周猩猩
                  </Text>
                </Flex>
              </Flex>
              <Flex style={styles.info2}>
                <Text fontSize="xs" textAlign="left">
                  订 单 号
                </Text>
                <Text fontSize="xs" textAlign="right" ml={10} flex={1}>
                  {orderInfo.id}
                </Text>
                <Button
                  fontSize="xs"
                  w={62}
                  bg="white"
                  color="gray600"
                  borderColor="brand500"
                  borderWidth={1}
                  rounded={3}
                  onPress={() => {
                    Clipboard.setString(orderInfo.id.toString());
                    success('复制成功');
                  }}
                  ml={5}
                >
                  复制
                </Button>
              </Flex>
              {payMap.has(orderInfo.payMethod) && (
                <Flex style={styles.info2}>
                  <Text fontSize="xs" flex={1}>
                    支付方式
                  </Text>
                  <Text fontSize="xs" textAlign="left">
                    {payMap.get(orderInfo.payMethod).name}
                  </Text>
                </Flex>
              )}
            </View>
          </View>
        </Div>
      </Animated.View>
      {/* </RefreshControl> */}
    </Div>
  );
}

const GoodsItem = ({ info, goods }) => {
  return (
    <Div row>
      <Image w={33} h={33} rounded={3} source={{ uri: goods.img }} />
      <Div flex={1} ml={10}>
        <Div row>
          <Text fontSize="sm" flex={1}>
            {goods.name}
          </Text>
          <Text fontSize="sm">X {info.num}</Text>
          <Text ml={10}>¥{info.goodsRealPrice}</Text>
        </Div>
        <Text fontSize="xs" color="gray400">
          {info.specification}
        </Text>
      </Div>
    </Div>
  );
};

const styles = StyleSheet.create({
  scroll: {
    flexGrow: 1,
  },
  card: {
    borderRadius: 3,
    backgroundColor: '#fff',
    marginBottom: 5,
    padding: 15,
  },
  item: {
    paddingVertical: 5,
  },
  icon: {
    width: 33,
    height: 33,
    borderRadius: 3,
  },
  goodsMain: {
    marginLeft: 10,
  },
  type: {
    // marginTop:3,
  },
  main: {
    marginTop: 10,
    paddingVertical: 5,
    borderColor: '#E5E5E5',
    borderTopWidth: 1,
  },
  info: {
    marginTop: 10,
  },
  total: {
    paddingTop: 10,
    marginTop: 10,
    borderColor: '#E5E5E5',
    borderTopWidth: 1,
  },
  address: {
    minWidth: 50,
    marginRight: 30,
  },
  info2: {
    marginTop: 10,
  },
});