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

import OrderTitle from '../components/OrderTitle/OrderTitle';
import OrderInfo from '../components/OrderInfo/OrderInfo';
import { fetchOrderDetailAndPay } from '../../../api/order';

import './OrderPay.scss';
import {
  CustomerBeanAccountVo,
  PaymentAndActiveInfo,
} from '../../../api/baseClass';
import { connect } from '@tarojs/redux';
import OrderPayway from '../components/OrderPayway/OrderPayway';
import Order from '@/types/Order/Order';
import { Customer } from '@/types/Customer/Customer';
import { shareHandle } from '@/common/shareMethod';

type PageStateProps = {
  userinfo: Customer;
};
type PageProps = {
  id?: number;
};
type PageState = {
  prePay: boolean;
  accounts: CustomerBeanAccountVo[];
  orderInfo: Order;
  payInfos: {
    paymentAndActiveInfos: PaymentAndActiveInfo[];
    paymentConfId: number;
  };
};

interface OrderPay {
  props: PageProps & PageStateProps;
  state: PageState;
}

@connect(({ userinfo }) => ({ userinfo }))
class OrderPay extends Component {
  config: Config = {
    navigationBarTitleText: '订单支付',
  };
  constructor(props) {
    super(props);
    this.state = {
      prePay: true,
      accounts: [],
      orderInfo: {
        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: '',
      },
      payInfos: {
        paymentAndActiveInfos: [],
        paymentConfId: 0,
      },
    };
  }
  onShareAppMessage = shareHandle;

  componentWillMount() {
    const data = this.$router.preload;
    if (data) {
      this.fetchOrder(data.id);
    }
  }

  fetchOrder(id: number) {
    return fetchOrderDetailAndPay({
      id,
    })
      .then(res => {
        const { accounts, orderInfo, payInfos } = res;
        this.setState({
          accounts: accounts,
          orderInfo: orderInfo,
          payInfos: payInfos,
        });
      })
      .catch(err => {
        console.log(err);
      });
  }

  payDoneHandle() {
    Taro.navigateBack();
  }

  render() {
    const { userinfo } = this.props;
    const { orderInfo, payInfos, accounts } = this.state;
    return (
      <View className='OrderPay topBr'>
        <OrderTitle
          price={orderInfo.payableMoney ? orderInfo.payableMoney : 0}
        />
        <OrderInfo orderInfo={orderInfo} />
        <View className='OrderPay-line' />
        <OrderPayway
          onPayDoneCallback={this.payDoneHandle}
          userinfo={userinfo}
          orderInfo={orderInfo}
          accounts={accounts}
          payInfos={payInfos}
        />
      </View>
    );
  }
}

export default OrderPay as ComponentClass<PageProps, PageState>;
