import Taro from '@tarojs/taro';
import { View, Text, Image } from '@tarojs/components';
import payDoneImg from '../../../../images/order/dingdan_yiwancheng_img@2x.png';
import './RechargeItem.scss';
import { RechargeOrder } from '@/api/order';

const RechargeItem = (props: { data: RechargeOrder }) => {
  const {
    data: { createAt, rechargeRemark, actualAmount, orderNum },
  } = props;

  return (
    <View className='RechargeItem'>
      <View className='RechargeItem-text'>
        <Text>充值说明：</Text>
        <Text>{rechargeRemark}</Text>
      </View>
      <View className='RechargeItem-text'>
        <Text>充值时间：</Text>
        <Text>{createAt}</Text>
        <Image className='RechargeItem-payDone' src={payDoneImg} />
      </View>
      <View className='RechargeItem-text'>
        <Text>订单编号：</Text>
        <Text>{orderNum}</Text>
      </View>
      <View
        className={`RechargeItem-price ${actualAmount >= 0 ? 'topay' : ''}`}>
        ￥ {actualAmount.toFixed(2)}
      </View>
    </View>
  );
};

RechargeItem.defaultProps = {
  data: {
    actualAmount: 0,
    afterAmount: 0,
    areaId: 0,
    areaName: '',
    beforeAmount: 0,
    businessType: '',
    completeAt: '',
    createAt: '',
    customerId: 0,
    customerName: '',
    customerPhone: '',
    failReason: '',
    giveMoney: 0,
    handler: '',
    id: 0,
    operType: '',
    operateId: 0,
    operateName: '',
    orderNum: '',
    orderState: '',
    payType: '',
    rechargeRemark: '',
    serviceName: '',
    updateAt: '',
  },
};

export default RechargeItem;
