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

import OrderTitle from '../components/OrderTitle/OrderTitle';
import OrderInfo from '../components/OrderInfo/OrderInfo';

import './OrderDetail.scss';
import { fetchOrderDetailAndPay } from '../../../api/order';
import { PayType, getPayType } from '../../../utils/payType';
import { shareHandle } from '@/common/shareMethod';

type pageProps = {};
type PageState = {
  actualMoney: number;
  areaId: number;
  areaName: string;
  consumeType: string;
  createAt: string;
  customerCellphone: string;
  customerId: number;
  customerName: string;
  deductionBean: number;
  deductionMoney: number;
  equipmentNum: string;
  equipmentPosition: string;
  id: number;
  operateId: number;
  operateName: string;
  operationMode: string;
  orderName: string;
  orderNumber: string;
  orderState: string;
  outTradeNo: string;
  payType: PayType;
  payableMoney: number;
  serviceId: number;
  serviceName: string;
  thirdDiscountMoney: number;
  thirdTradeNumber: string;
  updateDate: string;
};

interface OrderDetail {
  props: pageProps;
  state: PageState;
}
class OrderDetail extends Component {
  config: Config = {
    navigationBarTitleText: '订单详情',
  };
  constructor(props) {
    super(props);
    this.state = {
      actualMoney: 0,
      areaId: 0,
      areaName: '',
      consumeType: '',
      createAt: '',
      customerCellphone: '',
      customerId: 0,
      customerName: '',
      deductionBean: 0,
      deductionMoney: 0,
      equipmentNum: '',
      equipmentPosition: '',
      id: 0,
      operateId: 0,
      operateName: '',
      operationMode: '',
      orderName: '',
      orderNumber: '',
      orderState: '',
      outTradeNo: '',
      payType: '',
      payableMoney: 0,
      serviceId: 0,
      serviceName: '',
      thirdDiscountMoney: 0,
      thirdTradeNumber: '',
      updateDate: '',
    };
  }
  onShareAppMessage = shareHandle;

  componentWillMount() {
    console.log('preload: ', this.$router.preload);
    const data = this.$router.preload;
    this.setState({
      ...data,
    });
    // this.getDetailInfo(id);
  }

  getDetailInfo(id: number) {
    return fetchOrderDetailAndPay({
      id: id,
    })
      .then(res => {
        this.setState({
          ...res.data,
        });
        console.log(res);
      })
      .catch(err => {
        console.log(err);
      });
  }
  render() {
    const {
      actualMoney,
      payableMoney,
      deductionBean,
      payType,
      createAt,
      thirdTradeNumber,
      serviceName,
      orderNumber,
      areaName,
      equipmentNum,
      equipmentPosition,
      deductionMoney,
      thirdDiscountMoney,
    } = this.state;
    const payTypeName = getPayType(payType);
    return (
      <View className='OrderDetail'>
        <OrderTitle price={payableMoney} />
        <OrderInfo
          orderInfo={{
            serviceName,
            createAt,
            orderNumber,
            areaName,
            equipmentNum,
            equipmentPosition,
          }}
        />
        <View className='OrderDetail-line' />
        <View className='OrderDetail-payinfo'>
          <Text>支付金额</Text>
          <Text>{actualMoney.toFixed(2)}</Text>
        </View>
        {deductionBean ? (
          <View className='OrderDetail-payinfo'>
            <Text>{serviceName ? serviceName : ''}豆抵扣</Text>
            <Text className='deduction'>{deductionBean.toFixed(2)}</Text>
          </View>
        ) : null}
        {deductionMoney ? (
          <View className='OrderDetail-payinfo'>
            <Text>艾米抵扣</Text>
            <Text className='deduction'>{deductionMoney.toFixed(2)}</Text>
          </View>
        ) : null}
        {thirdDiscountMoney ? (
          <View className='OrderDetail-payinfo'>
            <Text>三方抵扣</Text>
            <Text className='deduction'>{thirdDiscountMoney.toFixed(2)}</Text>
          </View>
        ) : null}

        <View className='OrderDetail-payinfo'>
          <Text>支付方式</Text>
          <Text>{payTypeName}</Text>
        </View>
        <View className='OrderDetail-payinfo'>
          <Text>支付时间</Text>
          <Text>{createAt}</Text>
        </View>
        {thirdTradeNumber ? (
          <View className='OrderDetail-payinfo'>
            <Text>交易单号</Text>
            <Text>{thirdTradeNumber}</Text>
          </View>
        ) : null}
      </View>
    );
  }
}

export default OrderDetail as ComponentClass<pageProps, PageState>;
