<template>
  <nut-popup
    position="bottom"
    closeable
    round
    safe-area-inset-bottom
    :close-on-click-overlay="false"
    :style="{height: 'auto'}"
    :visible="isShowPay"
    @click-close-icon="closePay">
    <view class="div">
      <view style="text-align: center">支付方式</view>
      <nut-cell-group
        :style="{margin: interval ? '40rpx 0 150rpx 0' : '40rpx 0'}">
        <nut-cell
          title="微信支付"
          desc="使用微信快捷支付"
          is-link
          @click="goPay(1)">
          <template v-slot:icon>
            <IconFont size="30" :name="require('../static/wx.png')" />
          </template>
        </nut-cell>
        <nut-cell
          title="平台积分支付"
          :desc="`剩余积分:${info.integral || 0}`"
          is-link
          @click="goPay(2)">
          <template v-slot:icon>
            <IconFont size="30" :name="require('../static/pt.png')" />
          </template>
        </nut-cell>
        <nut-cell
          title="天才小猪积分支付"
          :desc="`剩余积分:${jfInfo.jh_info?.integral || 0}`"
          is-link
          @click="goPay(3)">
          <template v-slot:icon>
            <IconFont size="30" :name="require('../static/jh.png')" />
          </template>
        </nut-cell>
      </nut-cell-group>
    </view>
  </nut-popup>
</template>

<script setup lang="ts">
import {ref, watch} from 'vue';
import {IconFont} from '@nutui/icons-vue-taro';
import Taro from '@tarojs/taro';
import {payOrder} from '@/api/order';
import {getPersonalInfo} from '@/api/user';

const prop = defineProps({
  interval: {
    type: Boolean,
    default: true,
  },
  isShowPay: {
    required: true,
    type: Boolean,
    default: false,
  },
  jfInfo: {
    type: Object,
    default: () => {
      return {};
    },
  },
  OrderType: {
    type: Number,
    default: 1,
  },
});

const emit = defineEmits(['closePay', 'successPay']);

const info = ref<{integral?: any}>({});

watch(
  () => prop.isShowPay,
  () => {
    getInfo();
  },
);

const getInfo = async () => {
  try {
    const res = await getPersonalInfo();
    info.value = res.data.data;
  } catch (error) {
    Taro.showToast({
      title: error.msg,
      icon: 'none',
    });
    throw error;
  }
};

const goPay = async (type: number) => {
  if (!prop.jfInfo)
    return Taro.showToast({
      title: '未获取到订单信息~',
      icon: 'none',
    });
  try {
    console.log(prop.jfInfo);
    // 1微信支付 2积分支付 3专属积分兑换
    const {data} = await payOrder({
      oid: prop.jfInfo.oid,
      OrderType: prop.OrderType,
      PayType: type,
    });

    switch (type) {
      case 1:
        if (data.data) {
          Taro.requestPayment({
            timeStamp: data.data.timeStamp,
            nonceStr: data.data.nonceStr,
            package: data.data.package,
            signType: data.data.signType,
            paySign: data.data.paySign,
            success: function () {
              Taro.showToast({
                title: '支付成功',
                icon: 'success',
                duration: 2000,
              });
              emit('successPay', false);
            },
            fail: function () {
              Taro.showToast({
                title: '支付失败',
                icon: 'none',
                duration: 2000,
              });
              emit('closePay', false);
            },
          });
        } else {
          Taro.showToast({
            title: '支付失败，请稍后再试~',
            icon: 'none',
          });
          emit('closePay', false);
        }
        break;
      default:
        Taro.showToast({
          title: '支付成功',
          icon: 'none',
        });
        emit('successPay', false);
        break;
    }
  } catch (e) {
    Taro.showToast({
      title: e.msg,
      icon: 'none',
    });
    emit('closePay', false);
    throw e;
  }
};

const closePay = () => {
  Taro.showToast({
    title: '取消支付',
    icon: 'none',
  });
  emit('closePay', false);
};
</script>

<style lang="scss">
.nut-popup {
  .nut-popup__container {
    border-radius: 10rpx;
  }
}

.div {
  padding: 20rpx;
  --nut-cell-box-shadow: none;

  .nut-cell {
    align-items: center;
  }
}
</style>
