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

const props = defineProps({
  info: {
    type: Array,
    default: () => [],
  },
  isMember: {
    type: Object,
    default: () => {},
  },
});

const emit = defineEmits(["closePayment", "paymentSuccess"]);

const message = useMessage();

let pollingTimer: ReturnType<typeof setInterval> | undefined;

const currentNeedPayment = ref<number>(0);
// 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("");

interface Member {
  id: number;
  title: string;
  price: number;
  originalPrice: number;
  desc: string;
}

// 活动列表
const currentActivity = ref(null);
const activityList = ref<Member[]>([]);
async function getPromotionList() {
  try {
    const res = await request.post(`/promotion/myPromotionList`, {
      pageNum: 1,
      pageSize: 50,
    });
    if (res.code === 200) {
      activityList.value = res.rows;
    }
  } catch (err) {
    console.log(err);
  }
}
getPromotionList();
// 支付

// 初始化获取支付二维码
// const paymentParams = ref({})
const paymentStatus = ref(1);

const paymentParams = ref({
  amount: props.info[0].unitPrice,
  productId: props.info[0].id,
  type: "member",
});
async function getQrCode() {
  try {
    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) {
            paymentStatus.value = 2;
            clearTimeout(pollingTimer);
            message.success("支付成功!");
            onPaymentSuccess();
            emit("closePayment");
            window.location.reload();
          } else if (res2.data === 4) {
            paymentStatus.value = 4;
            clearTimeout(pollingTimer);
          }
        } catch (err) {
          console.log("object", err);
        }
      }, 2000);
    }
  } catch (err) {
    console.log(err);
  }
}

// 切换活动
async function handleActivityChange(value: number) {
  paymentParams.value.promotionId = value;
  const res1 = await request.get(
    `/member/calculatePayment?promotionId=${value}&memberLevelId=${paymentParams.value.productId}`
  );
  if (res1.code === 200) {
    paymentParams.value.amount = res1.data;
    getQrCode();
  }
}

// 切换pay Card
async function changeCurrentNeedPayment(index: number) {
  currentNeedPayment.value = index;
  paymentParams.value.productId = props.info[index].id;
  let url =  `/member/calculatePayment?memberLevelId=${paymentParams.value.productId}&`
  if(paymentParams.value.promotionId){
    url += `promotionId=${paymentParams.value.promotionId}`
  }
  const res1 = await request.get(
   url
  );
  if (res1.code === 200) {
    paymentParams.value.amount = res1.data;
    getQrCode();
  }
}

// 二维码是否过去
const isVisible = ref(true);
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="grid grid-cols-4 gap-1 mt-4 px-6">
        <div
          v-for="(item, index) in info"
          :key="item"
          :style="[
            currentNeedPayment === index
              ? {
                  background: 'linear-gradient(90deg, #fffaf1, #ffeccf)',
                  border: '1px solid #f7b252',
                }
              : {},
          ]"
          class="select-none h-44 border-1 border-solid border-[#e9e9e9] rounded-lg bg-[#f9f9f9] flex justify-between items-center flex-col p-4 box-border cursor-pointer"
          @click="changeCurrentNeedPayment(index)"
        >
          <!-- bg-gradient-to-b from-[#fdf0dd] to-[#fef8ef] -->
          <!-- 1px solid #f7b252; -->
          <div class="text-[#814600] card-item">
            {{ item.memberName }}
          </div>
          <div class="card-item">
            <span class="text-[#814600] text-[20px] mr-2">¥</span>
            <span class="text-[#814600] text-[36px] mr-2">{{ item.unitPrice }}</span>
            <span class="text-gray-400 text-[20px] line-through">{{
              item.originalPrice
            }}</span>
          </div>
          <div class="card-item text-[#814600] w-7/10 text-center text-[12px]">
            {{ item.subscriptionPeriod }}
          </div>
        </div>
      </div>
      <div class="flex items-center my-4">
        <div class="w-[50px] text-right mr-2">活动:</div>
        <n-select
          v-model:value="currentActivity"
          placeholder="请选择活动"
          class="w-[200px]"
          label-field="activityName"
          value-field="id"
          :options="activityList"
          @change="handleActivityChange"
        />
      </div>
      <!-- <div v-for="(item, index) in activityList" :key="index">
        {{ item.activityName }}
      </div> -->
      <div class="mt-4 px-6">
        <div class="flex border-collapse">
          <div class="member-item bg-[#fef9f8]">基础版VIP</div>
          <div class="member-item">每月15000点算力</div>
          <div class="member-item">20G存储空间</div>
          <div class="member-item">每月800次生图</div>
          <div class="member-item">2个生图任务并行</div>
          <div class="member-item">--</div>
        </div>
        <div class="flex border-collapse">
          <div class="member-item bg-[#fef9f8]">专业版</div>
          <div class="member-item">每月35000点算力</div>
          <div class="member-item">50G存储空间</div>
          <div class="member-item">每月5000次生图</div>
          <div class="member-item">3个生图任务并行</div>
          <div class="member-item">可训练XL模型</div>
        </div>
      </div>
      <div class="px-6 mt-1 text-[#9d8c75] text-[12px]">
        会员每月算力和加速特权按下月下发, 有效期31天, 到期重置
      </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 class="bg-[#fefaee] text-center text-[#AF7F1A] text-[12px] py-1 rounded-b-lg">
        需支付差价，计算规则为：专业版年包价格-剩余未下发基础版年包月数*基础版年包购买价格/12
      </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>
