import * as WebBrowser from 'expo-web-browser';
import * as React from 'react';
import { Div, Button, Image, Text, Avatar } from 'react-native-magnus';
import { ScrollView } from 'react-native-gesture-handler';

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

import useModel from 'flooks';

import Header from '../../components/Header';

export default function OrderDetailListScreen({ route }) {
  const { params } = route;
  const { orderId } = params;

  const { data } = useRequest(`/orderInfo/get/${orderId}`, {
    refreshDeps: [orderId],
    initialData: {},
  });

  const { orderTime, timeOfArrival } = data;
  return (
    <>
      <Header title="订单追踪" />
      <ScrollView
        contentContainerStyle={{
          flexGrow: 1,
          backgroundColor: '#eee',
        }}
      >
        <Div bg="white" py={5}>
          {!!orderTime && (
            <Div row justifyContent="space-between" py={5} px={15}>
              <Text fontSize="sm" color="gray600">
                下单时间
              </Text>
              <Text fontSize="sm" color="gray500">
                {orderTime}
              </Text>
            </Div>
          )}
          {!!timeOfArrival && (
            <Div row justifyContent="space-between" py={5} px={15}>
              <Text fontSize="sm" color="gray600">
                用户收到时间
              </Text>
              <Text fontSize="sm" color="gray500">
                {timeOfArrival}
              </Text>
            </Div>
          )}
        </Div>
      </ScrollView>
    </>
  );
}