<template>
  <div class="layout-vip" :class="{ isPlus: userStore.plusInfo?.isPlus }">
    <contextHolder />
    <fs-icon icon="mingcute:vip-1-line"></fs-icon>
    <div class="text">
      <span v-if="userStore.plusInfo?.isPlus">
        <a-tooltip>
          <template #title> 到期时间：{{ expireTime }} </template>
          <span @click="openUpgrade">专业版</span>
        </a-tooltip>
      </span>
      <span v-else @click="openUpgrade"> 当前免费版 </span>
    </div>
  </div>
</template>
<script lang="tsx" setup>
import { ref, reactive } from "vue";
import { useUserStore } from "/@/store/modules/user";
import dayjs from "dayjs";
import { message, Modal } from "ant-design-vue";
import * as api from "./api";

const userStore = useUserStore();
const expireTime = ref("");
if (userStore.plusInfo?.isPlus) {
  expireTime.value = dayjs(userStore.plusInfo.expireTime).format("YYYY-MM-DD");
}

const formState = reactive({
  code: ""
});

async function doActive() {
  if (!formState.code) {
    message.error("请输入激活码");
    throw new Error("请输入激活码");
  }
  const res = await api.doActive(formState);
  if (res) {
    await userStore.reInit();
    Modal.success({
      title: "激活成功",
      content: `您已成功激活专业版,有效期至：${dayjs(userStore.plusInfo.expireTime).format("YYYY-MM-DD")}`
    });
  }
}
const [modal, contextHolder] = Modal.useModal();
function openUpgrade() {
  const placeholder = "请输入激活码";
  modal.confirm({
    title: "升级/续期专业版",
    async onOk() {
      return await doActive();
    },
    okText: "激活",
    width: 500,
    content: () => {
      return (
        <div class="mt-10 mb-10">
          <div>
            <h3 class="block-header">专业版特权</h3>
            <ul>
              <li>证书流水线数量无限制</li>
              <li>可加VIP群，需求优先实现</li>
              <li>更多特权敬请期待</li>
            </ul>
          </div>
          <div>
            <h3 class="block-header">立刻激活/续期</h3>
            <div class="mt-10">
              <a-input v-model:value={formState.code} placeholder={placeholder} />
            </div>

            <div class="mt-10">
              没有激活码？
              <a href="https://afdian.com/a/greper" target="_blank">
                爱发电赞助“VIP会员”后获取
              </a>
            </div>
          </div>
        </div>
      );
    }
  });
}
</script>

<style lang="less">
.layout-vip {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  &.isPlus {
    color: #c5913f;
  }

  .text {
    margin-left: 5px;
  }
}
</style>
