<script setup lang="ts">
import { RotateCcw, X } from 'lucide-vue-next'
import { defineProps, onBeforeMount, onBeforeUnmount, ref } from 'vue'

const props = defineProps({
  isMember: {
    type: Object,
    default: () => {},
  },
})

const emit = defineEmits(['closePayment', 'paymentSuccess'])

const message = useMessage()

let pollingTimer: ReturnType<typeof setInterval> | undefined
const formRef = ref<FormInst | null>(null)
// const isShowPayment = ref(false)
const userStore = useUserStore()

interface UserInfoType {
  nickName: string
  avatar: string
  brief: string
  userId: number | string
}
const userInfo = {
  nickName: userStore.userInfo?.nickName ?? '',
  avatar: userStore.userInfo?.avatar ?? '',
  brief: userStore.userInfo?.brief ?? '',
  userId: userStore.userInfo?.userId ?? '',
} as UserInfoType

function onCloseModel() {
  emit('closePayment')
}
function onPaymentSuccess() {
  emit('paymentSuccess')
}
const qrUrl = ref('')

// 初始化获取支付二维码
const paymentStatus = ref(1)
const amount = ref(10)
const paymentParams = ref({
  amount: 10,
  type: 'points',
})

async function getQrCode() {
  try {
    paymentParams.value.amount = amount.value
    const res = await request.post(`/ali/pay/doPay`, paymentParams.value)
    if (res.code === 200) {
      paymentStatus.value = 1
      qrUrl.value = res.data.url
      pollingTimer && clearTimeout(pollingTimer)
      pollingTimer = setInterval(async () => {
        try {
          const res2 = await request.get(`/order/queryTradeStatus?outTradeNo=${res.data.orderNo}`)
          if (res2.data === 2) { // 1代支付 2支付成功 4超时
            paymentStatus.value = 2
            clearTimeout(pollingTimer)
            onPaymentSuccess()
            emit('closePayment')
            message.success('支付成功!')
          }
          else if (res2.data === 4) {
            paymentStatus.value = 4
            clearTimeout(pollingTimer)
          }
        }
        catch (err) {
          console.log('object', err)
        }
      }, 2000)
    }
  }
  catch (err) {
    console.log(err)
  }
}

// 二维码是否过去
const isVisible = ref(true)

// 获取积分余额和历史记录
const points = ref(0)
async function getPoints() {
  try {
    const res = await request.get('/member/getPoints')
    if (res.code === 200) {
      points.value = res.data.points
    }
  }
  catch (err) {
    console.log(err)
  }
}
getPoints()

// 是否是会员
// const isMember = ref(false)
// async function getIsMember() {
//   try {
//     const res = await request.get('/member/isMember')
//     if (res.code === 200) {
//       isMember.value = res.data
//     }
//   }
//   catch (err) {
//     console.log(err)
//   }
// }
// getIsMember()

onBeforeMount (() => {
  getQrCode()
})
defineExpose({
  isVisible,
})
onBeforeUnmount(() => {
  clearInterval(pollingTimer)
})
</script>

<template>
  <n-modal
    v-model:show="isVisible"
    :preset="null"
    :mask-closable="false"
    transform-origin="center"
    class="custom-modal"
  >
    <div class="bg-white rounded-xl w-200">
      <div
        class="p-4 flex justify-between rounded-t-xl bg-gradient-to-r from-[#fcf2da] to-[#f9db9f]"
      >
        <div class="flex items-center">
          <div>
            <img :src="userInfo.avatar" class="w-14 h-14 rounded-full mr-4">
          </div>
          <div class="flex flex-col">
            <div class="text-[#814600] text-xl">
              {{ userInfo.nickName }}
            </div>
            <div class="text-[#6a6a6a] text-xs mt-1">
              {{ props.isMember.result === '1' ? `会员到期时间: ${props.isMember.endDate}` : '您还不是魔创未来的会员' }}
            </div>
          </div>
        </div>
        <div @click="onCloseModel">
          <component :is="X" class="h-[18px] w-[18px] text-[#61666d] cursor-pointer" />
        </div>
      </div>
      <div class="p-4">
        余额：{{ points }}积分
      </div>
      <div class="mt-4 px-6 flex">
        <n-form
          ref="formRef"
          :label-width="80"
          :model="paymentParams"
          size="large"
          label-placement="left"
          style="width: 240px"
        >
          <n-form-item label="输入积分" path="modelProduct.modelName">
            <n-input v-model:value="amount" type="number" placeholder="输入积分" />
          </n-form-item>
        </n-form>
        <!-- <div>
          确定
        </div> -->
        <n-button type="primary" class="mt-1 ml-2" @click="getQrCode">
          确定
        </n-button>
      </div>
      <!-- <div v-for="(item, index) in activityList" :key="index">
        {{ item.activityName }}
      </div> -->
      <div class="mt-1 text-[#9d8c75] text-[12px] w-[500px] px-3">
        1000个算力约可生图1000张，或训练5次。按照生图默认参数、或训练基础参数预估（即训练图片张数20张*单张训练次数15*训练轮数10）。
        您充值的算力永久有效
        算力充值不退不换
      </div>
      <div class="flex justify-center items-center my-4">
        <div class="w-30 h-30 flex justify-center items-center relative">
          <n-qr-code :value="qrUrl" :size="90" style="padding: 0;" />
          <div v-if="paymentStatus === 4" class="absolute top-0 left-0 w-full h-full flex cursor-pointer flex-col justify-center items-center bg-opacity-50 bg-black text-white" @click="getQrCode">
            请点击刷新<RotateCcw />
          </div>
        </div>
        <div class="flex justify-center ml-2 flex-col pb-[14px]">
          <div class="flex items-baseline">
            <div class="text-[#222] font-medium mr-1">
              支付
            </div>
            <div class="text-[#814600] mr-1">
              <span class="text-[16px] mr-1">¥</span>
              <span class="text-[40px]">{{ paymentParams.amount }}</span>
            </div>
            <!-- <div class="px-2 bg-gradient-to-r from-[#ffa700] to-[#ff006b] text-[#814600] text-white rounded-[4px] ml-1 text-[12px">
              已减¥11
            </div> -->
          </div>
          <div class="flex items-center mb-1">
            <img src="@/assets/img/alipay.png" class="mr-1"> 请扫码完成支付
          </div>
          <div class="text-[12px]">
            <span class="text-[#999]">
              开通即代表同意
            </span>
            <span class="text-[#814600]">
              《魔创未来会员协议》
            </span>
          </div>
        </div>
      </div>
    </div>
  </n-modal>
</template>

<style lang="scss" scoped>
.member-item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 16.66%;
  height: 40px;
  border: 1px solid #f0f0f0;
  font-size: 12px;
  font-weight: 400;
  margin-right: -1px;
  margin-bottom: -1px;
}
</style>
