import Taro 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 { getPayType } from '../../../utils/payType';
import { shareHandle } from '@/common/shareMethod';
import { useSelector } from '@tarojs/redux';
import { OrderStoreState } from '../OrderList/store';

const OrderDetail = () => {
  const {
    actualMoney,
    payableMoney,
    deductionBean,
    payType,
    createAt,
    thirdTradeNumber,
    serviceName,
    orderNumber,
    areaName,
    equipmentNum,
    equipmentPosition,
    deductionMoney,
    thirdDiscountMoney,
  } = useSelector(
    (state: { OrderList: OrderStoreState }) => state.OrderList.selectedOrder,
  );

  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>
  );
};
OrderDetail.config = {
  navigationBarTitleText: '订单详情',
};
OrderDetail.onShareAppMessage = shareHandle;

export default OrderDetail;
