import { ComponentClass } from 'react';
import Taro, { Component } from '@tarojs/taro';
import { View, Text } from '@tarojs/components';

import './OrderInfo.scss';

type PageProps = {
  orderInfo: {
    serviceName: string;
    createAt: string;
    orderNumber: string;
    areaName: string;
    equipmentNum: string;
    equipmentPosition: string;
  };
};

interface OrderInfo {
  props: PageProps;
}
class OrderInfo extends Component {
  static defaultProps = {
    orderInfo: {
      serviceName: '',
      createAt: '',
      orderNumber: '',
      areaName: '',
      equipmentNum: '',
      equipmentPosition: '',
    },
  };
  constructor(props) {
    super(props);
  }

  render() {
    const {
      orderInfo: {
        serviceName,
        createAt,
        orderNumber,
        areaName,
        equipmentNum,
        equipmentPosition,
      },
    } = this.props;
    return (
      <View>
        <View className='OrderDetail-info'>
          <Text className='OrderDetail-info-title'>商品说明</Text>
          <Text className='OrderDetail-info-content'>
            {serviceName ? serviceName : ''}
          </Text>
        </View>
        <View className='OrderDetail-info'>
          <Text className='OrderDetail-info-title'>消费时间</Text>
          <Text className='OrderDetail-info-content'>{createAt}</Text>
        </View>
        <View className='OrderDetail-info'>
          <Text className='OrderDetail-info-title'>订单号</Text>
          <Text className='OrderDetail-info-content'>{orderNumber}</Text>
        </View>
        <View className='OrderDetail-info'>
          <Text className='OrderDetail-info-title'>所属区域</Text>
          <Text className='OrderDetail-info-content'>{areaName}</Text>
        </View>
        <View className='OrderDetail-info'>
          <Text className='OrderDetail-info-title'>设备编号</Text>
          <Text className='OrderDetail-info-content'>{equipmentNum}</Text>
        </View>
        <View className='OrderDetail-info'>
          <Text className='OrderDetail-info-title'>设备位置</Text>
          <Text className='OrderDetail-info-content'>
            {equipmentPosition ? equipmentPosition : ''}
          </Text>
        </View>
      </View>
    );
  }
}

export default OrderInfo as ComponentClass<PageProps>;
