import { ComponentClass } from 'react';
import Taro, { Component } from '@tarojs/taro';
import { View, Text, Image } from '@tarojs/components';
import payDoneImg from '../../../../images/order/dingdan_yiwancheng_img@2x.png';
import './OrderItem.scss';
import Order from '../../../../types/Order/Order';

type PageOwnProps = {
  data: Order;
  onPayHandle: (data: Order) => void;
  onGoDetail: (data: Order) => void;
};
type PageState = {};

interface OrderItem {
  props: PageOwnProps;
  state: PageState;
}

class OrderItem extends Component {
  static defaultProps = {
    data: {
      id: 0,
      orderNumber: '',
      orderName: '',
      customerId: 0,
      customerName: '',
      customerCellphone: '',
      serviceId: 0,
      serviceName: '',
      areaId: 0,
      areaName: '',
      operateId: 0,
      operateName: '',
      equipmentNum: '',
      equipmentPosition: '',
      orderState: '1',
      payableMoney: 0,
      actualMoney: 0,
      thirdDiscountMoney: 0,
      deductionBean: 0,
      deductionMoney: 0,
      payType: '',
      consumeType: '',
      operationMode: '1',
      thirdTradeNumber: '',
      outTradeNo: '',
      createAt: '',
      updateDate: '',
    },
  };
  payHandle() {
    const { onPayHandle, data } = this.props;
    onPayHandle(data);
  }

  detailHandle() {
    const { onGoDetail, data } = this.props;
    if (data.orderState === '1') return;
    onGoDetail(data);
  }

  render() {
    const {
      data: { orderState, createAt, serviceName, payableMoney },
    } = this.props;
    return (
      <View className='OrderItem' onClick={this.detailHandle}>
        <View className='OrderItem-text'>
          <Text>消费说明：</Text>
          <Text>{serviceName ? serviceName : ''}</Text>
        </View>
        <View className='OrderItem-text'>
          <Text>消费时间：</Text>
          <Text>{createAt}</Text>
          {orderState === '1' ? (
            <View className='OrderItem-toPay' onClick={this.payHandle}>
              去支付 >
            </View>
          ) : (
            <Image className='OrderItem-payDone' src={payDoneImg} />
          )}
        </View>
        <View
          className={`OrderItem-price ${orderState === '1' ? 'topay' : ''}`}>
          ￥ {payableMoney.toFixed(2)}
        </View>
      </View>
    );
  }
}

export default OrderItem as ComponentClass<PageOwnProps, PageState>;
