import { fetchPayOrder, fetchOrderDetailAndPay } from '@/api/order';
import { View } from '@tarojs/components';
import { connect } from '@tarojs/redux';
import { ComponentClass } from 'react';

function wrapCheckOrder() {
  return function wrapComponent(
    Component: ComponentClass<T>,
  ): ComponentClass<T> {
    return class CheckOrder extends Component {
      constructor(props) {
        super(props);
        this.state = {
          showPayOrder: false,
          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,
          },
        };
      }

      componentWillMount() {
        this.getPayState();
        if (super.componentWillMount) {
          super.componentWillMount();
        }
      }

      getPayState() {
        const { userinfo } = this.props;
        fetchPayOrder({
          customerId: userinfo.customerId,
        })
          .then(res => {
            if (res.data.length) {
              this.fetchOrder(res.data[0].id);
              this.setState({ showPayOrder: true });
            } else {
              this.drawBarCode();
            }
          })
          .catch(err => {
            console.log(err);
          });
      }

      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);
          });
      }

      render() {
        const { showPayOrder, orderInfo, payInfos, accounts } = this.state;
        console.log(showPayOrder);

        return (
          <View className=''>
            {showPayOrder ? (
              <View className='OrderBox'>
                <OrderTitle price={orderInfo.payableMoney} />
                <OrderInfo orderInfo={orderInfo} />
                <OrderPayway
                  onPayDoneCallback={this.payDoneHandle}
                  userinfo={userinfo}
                  accounts={accounts}
                  orderInfo={orderInfo}
                  payInfos={payInfos}
                />
              </View>
            ) : (
              super.render()
            )}
          </View>
        );
      }
    };
  };
}
export default wrapCheckOrder;
