<script setup>
import { CheckmarkCircleSharp, Close } from "@vicons/ionicons5";
import { NConfigProvider, NMessageProvider } from "naive-ui";
const message = useMessage();

definePageMeta({
  layout: "header",
});

// 订单
const needPayment = ref([
  {
    amount: "",
    productId: "",
    promotionId: "",
    type: "member",
  },
]);
const userStore = useUserStore();
const userInfo = userStore.userInfo;
// 显示支付弹框
// interface Payment {
//   isVisible: boolean;
// }

// 是否是会员
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();

// 获取会员等级及权益列表
const MemberBenefitList = ref([]);
async function getMemberBenefitList() {
  try {
    const res = await request.get("/memberLevel/getMemberBenefitList");
    if (res.code === 200) {
      MemberBenefitList.value = res.data;
    }
  } catch (err) {
    console.log(err);
  }
}
getMemberBenefitList();

// 获取会员等级列表
// interface memberLevel {
//   memberName: string;
//   unitPrice: number;
//   originalPrice: number;
//   subscriptionPeriod: number;
// }
const memberLevelList = ref([]);
async function getMemberLevelList() {
  try {
    const res = await request.get("/memberLevel/list");
    if (res.code === 200) {
      memberLevelList.value = res.data;
    }
  } catch (err) {
    console.log(err);
  }
}
getMemberLevelList();

// 显示会员支付的弹框
const isShowPayment = ref(false);
const PaymentRef = ref(null);
function showPayment(info) {
  if (info === 1) {
    needPayment.value = memberLevelList.value;
  } else {
    needPayment.value = [info];
  }
  isShowPayment.value = true;
  if (PaymentRef.value) {
    PaymentRef.value.isVisible = true;
  }
}

// 关闭开通会员弹框
function closePayment() {
  isShowPayment.value = false;
  if (PaymentRef.value) {
    PaymentRef.value.isVisible = false;
  }
}
// 显示积分的弹框
const isShowIntPayment = ref(false);

const IntPaymentRef = ref(null);
function showIntPayment() {
  isShowIntPayment.value = true;
  if (IntPaymentRef.value) {
    IntPaymentRef.value.isVisible = true;
  }
}

// 关闭充值积分弹框
function closeIntPayment() {
  isShowIntPayment.value = false;
  if (IntPaymentRef.value) {
    IntPaymentRef.value.isVisible = false;
  }
}

// 关闭充值金币弹框
const isShowGoldPayment = ref(false);
const goldPaymentRef = ref(null);

function closeGoldPayment() {
  isShowGoldPayment.value = false;
  if (goldPaymentRef.value) {
    goldPaymentRef.value.isVisible = false;
  }
}

// 支付成功后刷新会员信息
function paymentSuccess() {
  getIsMember();
  integralGold();
}

// 跳转到积分详情页
function toIntDetail() {
  const baseUrl = window.location.origin;
  window.open(`${baseUrl}/int-detail`, "_blank", "noopener,noreferrer");
}

// 订单管理
function toOrderManage() {
  const baseUrl = window.location.origin;
  window.open(`${baseUrl}/order-management`, "_blank", "noopener,noreferrer");
}

// 跳转到金币详情
function toGoldDetail() {
  const baseUrl = window.location.origin;
  window.open(`${baseUrl}/gold-detail`, "_blank", "noopener,noreferrer");
}

// 显示充值金币的框
function showGoldPayment() {
  isShowGoldPayment.value = true;
  if (goldPaymentRef.value) {
    goldPaymentRef.value.isVisible = true;
  }
}

// 获取积分和金币余额
const integralGold = ref({});
async function getIntegralGold() {
  try {
    const res = await request.post("/personalCenter/getPointAndWallet");
    if (res.code === 200) {
      integralGold.value = res.data;
    }
  } catch (err) {
    console.log(err);
  }
}
getIntegralGold();
const isShowActivity = ref(true);

// 关闭活动的图标
function closeActivityIcon() {
  isShowActivity.value = false;
}

// 活动列表
const activityList = ref([])
const isShowactivityList = ref(false);
async function showActivityList() {
  try {
    const res = await request.post("/promotion/promotionList", {
      pageNum: 1,
      pageSize: 50,
    });
    if (res.code === 200) {
      activityList.value = res.rows
      isShowactivityList.value = true;
    }
  } catch (err) {
    console.log(err);
  }
}

// 参与活动
async function getActivity(item) {
  if(item.isJoin === 1) return
  try {
    const res = await request.get(`/promotion/joinPromotion?promotionId=${item.id}`);
    if (res.code === 200) {
      message.success('领取成功')
      item.isJoin = 1
    }
  } catch (err) {
    if(err.code === 601){
      message.warning(err.msg)
    }
  }
}
</script>

<template>
  <div>
    <div class="test bg-[#403833] flex justify-center items-center h-90">
      <div class="flex gap-6 w-[1145px]">
        <!-- 左侧用户信息 -->
        <div class="w-60 bg-[#2b2421] rounded-lg p-6 my-3">
          <!-- 右上角订阅管理 -->
          <!-- <div class="text-right">
            <button
              class="text-[#8b8685] text-sm bg-inherit border-none cursor-pointer"
              @click="toOrderManage"
            >
              订阅管理 >
            </button>
          </div> -->

          <!-- 用户头像和信息 -->
          <div class="flex flex-col items-center mt-2">
            <client-only>
              <img
                :src="userInfo.avatar"
                alt="头像"
                class="w-20 h-20 rounded-full mb-3"
              />
              <span class="text-white text-sm mb-2">{{ userInfo.nickName }}</span>
            </client-only>
            <div class="flex items-center text-[#8b8685] text-xs">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-4 w-4 mr-1"
                viewBox="0 0 20 20"
                fill="currentColor"
              >
                <path
                  d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
                />
              </svg>
              {{
                isMember.result === "1"
                  ? `会员到期时间: ${isMember.endDate}`
                  : "您还不是魔创未来的会员"
              }}
            </div>
          </div>

          <!-- 开通会员按钮 -->
          <button
            class="w-full bg-[#f2d5bc] text-[#6b4f3f] rounded-full py-2.5 mt-8 font-medium cursor-pointer"
            @click="showPayment(1)"
          >
            开通会员
          </button>

          <!-- 兑换会员链接 -->
          <div class="text-center mt-3">
            <button class="text-[#8b8685] text-sm bg-inherit border-none cursor-pointer">
              兑换会员
            </button>
          </div>
        </div>

        <!-- 右侧内容 -->
        <div class="flex-1 space-y-4">
          <!-- 余额信息卡片 -->
          <div class="bg-[#2b2421] rounded-lg p-6 mt-3">
            <div class="grid grid-cols-3 gap-8">
              <!-- 算力余额 -->
              <div>
                <h3 class="text-[#c3986b] mb-4">积分余额</h3>
                <div class="flex items-center mb-2">
                  <span class="text-[#c3986b] mr-2">{{ integralGold.point || 0 }}点</span>
                  <button
                    class="text-[#c3986b] bg-inherit border-none cursor-pointer"
                    @click="showIntPayment"
                  >
                    充值 >
                  </button>
                </div>
                <button
                  class="text-white bg-inherit border-none cursor-pointer p-0"
                  @click="toIntDetail"
                >
                  积分明细 >
                </button>
              </div>

              <!-- 生图加速余额 -->
              <div>
                <h3 class="text-[#c3986b] mb-4">金币余额</h3>
                <div class="flex items-center mb-2">
                  <span class="text-[#c3986b] mr-2"
                    >{{ integralGold.wallet || 0 }} 点</span
                  >
                  <button
                    class="text-[#c3986b] bg-inherit border-none cursor-pointer"
                    @click="showGoldPayment"
                  >
                    充值 >
                  </button>
                </div>
                <button
                  class="text-white bg-inherit border-none cursor-pointer p-0"
                  @click="toGoldDetail"
                >
                  加速明细 >
                </button>
              </div>

              <!-- 训练加速余额 -->
              <div>
                <h3 class="text-[#c3986b] mb-4">训练加速余额</h3>
                <div class="flex items-center mb-2">
                  <span class="text-[#c3986b]">0次</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 存储空间卡片 -->
          <div class="bg-[#2b2421] rounded-lg p-6">
            <div class="flex items-center gap-6 mb-6">
              <span class="text-[#c3986b] text-lg">我的存储空间</span>
              <button class="text-[#8b8685] bg-inherit border-none cursor-pointer p-0">
                管理图库
              </button>
              <button class="text-[#8b8685] bg-inherit border-none cursor-pointer p-0">
                管理训练
              </button>
            </div>

            <!-- 进度条 -->
            <div class="relative">
              <div class="h-1 bg-[#3a322e] rounded-full">
                <div class="absolute right-0 -top-6 text-[#8b8685] text-sm">0G/3G</div>
              </div>
            </div>

            <!-- 图例 -->
            <div class="flex gap-4 mt-4">
              <div class="flex items-center">
                <div class="w-2 h-2 bg-blue-500 rounded-full mr-2" />
                <span class="text-[#8b8685] text-sm">生图</span>
              </div>
              <div class="flex items-center">
                <div class="w-2 h-2 bg-purple-500 rounded-full mr-2" />
                <span class="text-[#8b8685] text-sm">训练</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="bg-gradient-to-b from-[#fdf6e3] to-[#ffffff] w-full flex justify-center py-8"
    >
      <div class="w-[1145px]">
        <div class="grid grid-cols-5 gap-1">
          <div
            v-for="(item, index) in memberLevelList"
            :key="index"
            class="h-56 border-2 border-solid border-[#fff] rounded-lg bg-gradient-to-b from-[#f7e8d3] to-[#fef8ef] flex justify-between items-center flex-col p-4 box-border"
          >
            <div class="text-[#e08909] card-item">
              {{ item.memberName }}
            </div>
            <div class="card-item">
              <span class="text-[#814600] text-[20px] mr-2">¥</span>
              <span class="text-[#814600] text-[40px] mr-2">{{ item.unitPrice }}</span>
              <span class="text-gray-400 text-[20px] line-through"
                >¥{{ item.originalPrice }}</span
              >
            </div>
            <div class="card-item text-[#e08909] w-7/10 text-center text-[12px]">
              {{ item.subscriptionPeriod }}
            </div>
            <div class="card-item">
              <button
                class="bg-gradient-to-r from-[#fbdfa4] to-[#f3c180] text-[#4c3d33] w-40 h-10 rounded-full text-[12px] border-none cursor-pointer"
                @click="showPayment(item)"
              >
                立即开通
              </button>
            </div>
          </div>
        </div>
        <div class="py-8">
          <div class="flex justify-center mb-4">
            <div class="text-xl font-bold">会员权益</div>
          </div>
          <!-- <div class="flex items-center">
            <div v-for="(item, index) in MemberBenefitList" :key="index" class="w-1/4 w-full">
              <div class="flex items-center justify-center">
                {{ item.memberLevelName }}
              </div>
              <div v-for="(item2, index2) in item.memberBenefitList" :key="index2" class="flex w-full">
                <div class="h-20 bg-[#f7f0ea] flex justify-center items-center w-full">
                  {{ item2.benefitName ? item2.benefitName : '无' }}
                </div>
              </div>
            </div>
          </div> -->
          <div class="text-[#525252]">
            <div class="flex gap-2">
              <div class="member-item bg-[#f7f0ea]">会员权益</div>
              <div class="member-item bg-[#f5f5f5]">用户免费</div>
              <div class="member-item bg-[#fdf6ea]">基础版VIP</div>
              <div class="member-item bg-[#fce6bf]">专业版VIP</div>
            </div>
            <div class="flex gap-2">
              <div class="member-item bg-[#fff]">算力</div>
              <div class="member-item bg-[#fff]">每天300点</div>
              <div class="member-item bg-[#fff]">每月15000点</div>
              <div class="member-item bg-[#fff]member-item">每月35000点</div>
            </div>
            <div class="flex gap-2">
              <div class="member-item bg-[#fafafa]">云端存储空间</div>
              <div class="member-item bg-[#fafafa]">3GB</div>
              <div class="member-item bg-[#fdf6ea]">20GB</div>
              <div class="member-item bg-[#fce6bf]">50GB</div>
            </div>
            <div class="flex gap-2">
              <div class="member-item bg-[#fff]">生图加速特权</div>
              <div class="member-item bg-[#fff]member-item">
                <n-icon size="20" color="#ed7470">
                  <Close />
                </n-icon>
              </div>
              <div class="member-item bg-[#fff]">每月800次</div>
              <div class="member-item bg-[#fff]">每月5000次</div>
            </div>
            <div class="flex gap-2">
              <div class="member-item bg-[#fafafa]">会员专属模型</div>
              <div class="member-item bg-[#fafafa]">
                <n-icon size="20" color="#ed7470">
                  <Close />
                </n-icon>
              </div>
              <div class="member-item bg-[#fdf6ea]">
                <n-icon size="20" color="#58c08f">
                  <CheckmarkCircleSharp />
                </n-icon>
              </div>
              <div class="member-item bg-[#fce6bf]">
                <n-icon size="20" color="#58c08f">
                  <CheckmarkCircleSharp />
                </n-icon>
              </div>
            </div>
            <div class="flex gap-2">
              <div class="member-item bg-[#fff]">生图高级功能</div>
              <div class="member-item bg-[#fff]">
                <n-icon size="20" color="#ed7470">
                  <Close />
                </n-icon>
              </div>
              <div class="member-item bg-[#fff]">
                <n-icon size="20" color="#58c08f">
                  <CheckmarkCircleSharp />
                </n-icon>
              </div>
              <div class="member-item bg-[#fff]">
                <n-icon size="20" color="#58c08f">
                  <CheckmarkCircleSharp />
                </n-icon>
              </div>
            </div>
            <div class="flex gap-2">
              <div class="member-item bg-[#fafafa]">训练XL模型</div>
              <div class="member-item bg-[#fafafa]">
                <n-icon size="20" color="#ed7470">
                  <Close />
                </n-icon>
              </div>
              <div class="member-item bg-[#fdf6ea]">
                <n-icon size="20" color="#ed7470">
                  <Close />
                </n-icon>
              </div>
              <div class="member-item bg-[#fce6bf]">
                <n-icon size="20" color="#58c08f">
                  <CheckmarkCircleSharp />
                </n-icon>
              </div>
            </div>
            <div class="flex gap-2">
              <div class="member-item bg-[#fff]">图片去水印下载</div>
              <div class="member-item bg-[#fff]">
                <n-icon size="20" color="#ed7470">
                  <Close />
                </n-icon>
              </div>
              <div class="member-item bg-[#fff]">
                <n-icon size="20" color="#58c08f">
                  <CheckmarkCircleSharp />
                </n-icon>
              </div>
              <div class="member-item bg-[#fff]">
                <n-icon size="20" color="#58c08f">
                  <CheckmarkCircleSharp />
                </n-icon>
              </div>
            </div>
            <div class="flex gap-2">
              <div class="member-item bg-[#fafafa]">多任务并行生图</div>
              <div class="member-item bg-[#fafafa]">
                <n-icon size="20" color="#58c08f">
                  <CheckmarkCircleSharp />
                </n-icon>
              </div>
              <div class="member-item bg-[#fdf6ea]">2个</div>
              <div class="member-item bg-[#fce6bf]">3个</div>
            </div>
          </div>
        </div>
        <div class="text-[#999] text-[12px]">
          <div class="mt-1">
            会员每月算力和加速特权按月下发, 有效期31天,
            到期重置。会员模型下载次数上限为每月200次
          </div>
          <div class="mt-1">
            发票或团队/企业定制需求, 请点击立即咨询联系我们, 企业合作需求也可直接联系xxxx
          </div>
          <div class="mt-1">更多问题可见帮助中心</div>
        </div>
      </div>
    </div>
    <NConfigProvider>
      <NMessageProvider>
        <Payment
          v-if="isShowPayment"
          ref="PaymentRef"
          :info="needPayment"
          :is-member="isMember"
          @close-payment="closePayment"
        />
        <IntPayment
          v-if="isShowIntPayment"
          ref="IntPaymentRef"
          :is-member="isMember"
          @payment-success="paymentSuccess"
          @close-payment="closeIntPayment"
        />
        <GoldPayment
          v-if="isShowGoldPayment"
          ref="goldPaymentRef"
          :is-member="isMember"
          @payment-success="paymentSuccess"
          @close-payment="closeGoldPayment"
        />
      </NMessageProvider>
    </NConfigProvider>
    <div class="activity-box" v-if="isShowActivity">
      <div class="absolute -top-6 -right-0 cursor-pointer">
        <n-icon size="20" color="#bbb" @click="closeActivityIcon">
          <Close />
        </n-icon>
      </div>
      <img
        class="cursor-pointer"
        @click="showActivityList"
        src="@/assets/img/activityIcon.png"
        alt=""
      />
    </div>

    <n-modal v-model:show="isShowactivityList" transform-origin="center">
      <n-card
        style="width: 350px; background: #e65e40"
        :bordered="false"
        size="huge"
        :content-style="{ padding: 0 }"
        role="dialog"
        aria-modal="true"
      >
        <div class="p-4 rounded-lg">
          <div class="flex justify-end mb-4">
            <n-icon
              class="cursor-pointer"
              @click="isShowactivityList = false"
              size="20"
              color="#bbb"
            >
              <Close />
            </n-icon>
          </div>
          <div class="flex flex-col gap-3">
            <div
              class="px-2 py-4 bg-white h-20 w-full flex rounded-lg"
              v-for="(item, index) in activityList"
              :key="index"
            >
              <div class="w-[70%] flex flex-col justify-around">
                <div>{{ item.activityName }}</div>
                <div class="text-xs text-gray-500">有效期: {{item.startTime}}</div>
                <div class="text-xs text-gray-500">失效期: {{item.endTime}}</div>
              </div>
              <div class="w-[30%] flex items-center justify-center">
                <div
                  @click="getActivity(item)"
                  class="w-14 h-6 flex items-center justify-center cursor-pointer text-white text-xs bg-[#e9613f] rounded-full"
                  :style="{backgroundColor: item.isJoin === 0 ? '#e9613f' : '#ccc'}"
                >
                {{ item.isJoin === 0 ? '领取' : '已领取' }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </n-card>
    </n-modal>
  </div>
</template>

<style scoped>
/* .n-card__content{
  padding:20px !important
} */
.activity-box {
  position: fixed;
  bottom: 20px;
  right: 20px;
  justify-content: space-around
}
.card-item {
  @apply flex items-center justify-center h-1/4;
}
.member-item {
  @apply w-1/4 h-12 flex justify-center items-center;
}
</style>
