<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="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
              />
            </template>
          </nut-cell>
          <nut-cell
            title="积分支付"
            :desc="`剩余积分:${info.integral || 0}`"
            is-link
            @click="goPay(2)"
          >
            <template v-slot:icon>
              <IconFont
                size="30"
                name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
              />
            </template>
          </nut-cell>
        <!-- <nut-cell
          title="挂帐后结"
          desc="先消费后结账"
          is-link
          @click="goPay(3)"
        >
          <template v-slot:icon>
            <IconFont
              size="30"
              name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.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) => {
  console.log(prop);
  if (!prop.jfInfo)
    return Taro.showToast({
      title: "未获取到订单信息",
      icon: "none",
    });
  try {
    // 1微信支付 2积分支付 3挂帐
    if (type === 1 || type === 2) {
      const { data } = await payOrder({
        oid: prop.jfInfo,
        OrderType: prop.OrderType,
        PayType: type,
      });
      if (type === 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);
        }
      } else if (type === 2) {
        Taro.showToast({
          title: "支付成功",
          icon: "success",
          duration: 2000,
        });
        emit("successPay", false);
      }
    } else {
      Taro.showToast({
        title: "挂帐后结账",
        icon: "none",
      });
    }
  } 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>
