<script setup lang="ts">
import { computed, ref } from 'vue'
import GiftPackList from './components/gift-pack-list.vue'
import PointRechargeModal from './components/point-recharge-modal.vue'
import PaySidebar from './components/pay-sidebar.vue'
import { useUserStore } from '@/store/modules/user'
import { formatDateTime } from '@/utils/date-formatter'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

const userStore = useUserStore()

const isShowPointRechargeModal = ref(false)
const currentSelectVersion = ref<
  'BasicVersion' | 'ProfessionalVersion' | 'FlagshipVersion' | 'EnterpriseVersion' | null
>(null)

const equityInfo = computed(() => {
  return userStore.equityInfo
})

/* created */
;(function () {
  userStore.fetchUpdateEquityInfo()
})()

function handlePointRecharge() {
  currentSelectVersion.value = null

  isShowPointRechargeModal.value = true
}
</script>

<template>
  <div class="flex h-full min-w-[1200px] overflow-x-auto">
    <div class="relative mr-[28px] flex-1 overflow-hidden overflow-y-auto rounded-[20px] bg-white p-[38px] pr-0">
      <n-scrollbar>
        <div class="pr-[38px]">
          <span
            class="absolute right-[-30px] top-1/2 inline-block h-[30px] w-[30px] -translate-x-1/3 -translate-y-1/2 rotate-45 rounded-[6px] bg-[#f3f6f9]"
          ></span>

          <div class="flex items-end">
            <h2 class="font-600 mr-[10px] text-[18px]">{{ userStore.equityLevelName }}</h2>
            <div class="text-[12px] text-[#999]">
              {{ t('equity_module.time_limit') }}：
              <span class="text-[12px] text-[#333]">
                {{
                  equityInfo.expireTime ? formatDateTime(equityInfo.expireTime) : t('common_module.unlimited_duration')
                }}</span
              >
            </div>
          </div>

          <div
            class="mt-[20px] grid grid-flow-row-dense gap-[20px]"
            style="grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))"
          >
            <section
              class="flex h-[170px] flex-1 flex-col justify-between rounded-[10px] bg-[#F8F9FB] px-[30px] py-[24px]"
            >
              <div>
                <div class="flex">
                  <img class="h-[44px] w-[44px]" src="@/assets/images/equity/gift.png" alt="integral_quantity" />
                  <div class="font-600 ml-[14px] flex items-center">
                    <span class="text-[16px]">{{ t('equity_module.integral_quantity') }}</span>
                    <n-popover trigger="hover" :width="400">
                      <template #trigger>
                        <i class="iconfont icon-yiwen-yuan ml-[5px] text-[14px] text-[#999]"></i>
                      </template>
                      <span>
                        {{ t('equity_module.integral_quantity_doc') }}
                      </span>
                    </n-popover>
                  </div>
                </div>
                <div class="ml-[58px] mt-[4px] flex items-end">
                  <div class="font-600 text-[24px]">
                    <n-number-animation :from="0" :to="equityInfo.points" :precision="2" />
                  </div>
                  <span class="font-600 mb-[3px] ml-[7px] text-[14px]">{{ t('equity_module.points') }}</span>
                </div>
              </div>

              <div class="flex select-none items-center justify-end text-[15px] text-[#0B7DFF]">
                <span class="cursor-pointer" @click="handlePointRecharge">
                  <span>{{ t('equity_module.top_up_immediately') }}</span>
                  <i class="iconfont icon-left ml-[2px] inline-block rotate-180 text-[12px]"></i>
                </span>
              </div>
            </section>
            <section
              class="flex h-[170px] flex-1 flex-col justify-between rounded-[10px] bg-[#F8F9FB] px-[30px] py-[24px]"
            >
              <div class="flex">
                <img class="h-[44px] w-[44px]" src="@/assets/images/equity/applications.png" alt="applications" />

                <div class="font-600 ml-[14px] flex items-center">
                  <span class="text-[16px]">{{ t('equity_module.number_of_applications') }}</span>
                  <n-popover trigger="hover">
                    <template #trigger>
                      <i class="iconfont icon-yiwen-yuan ml-[5px] text-[14px] text-[#999]"></i>
                    </template>
                    <span>{{ t('equity_module.number_of_applications_doc') }}</span>
                  </n-popover>
                </div>
              </div>

              <div>
                <div class="mb-[13px] text-[14px]">
                  <n-number-animation :from="0" :to="equityInfo.usedAgentCount" />
                  <span
                    >/{{ equityInfo.maxAgentCount === 0 ? '∞' : equityInfo.maxAgentCount }}
                    {{ t('equity_module.individual') }}</span
                  >
                </div>
                <div>
                  <n-progress
                    v-if="equityInfo.maxAgentCount"
                    type="line"
                    :percentage="(equityInfo.usedAgentCount / equityInfo.maxAgentCount) * 100"
                    :show-indicator="false"
                    :height="6"
                  />
                </div>
              </div>
            </section>
            <section
              class="flex h-[170px] flex-1 flex-col justify-between rounded-[10px] bg-[#F8F9FB] px-[30px] py-[24px]"
            >
              <div class="flex">
                <img class="h-[44px] w-[44px]" src="@/assets/images/equity/knowledge-base.png" alt="knowledge-base" />

                <div class="font-600 ml-[14px] flex items-center">
                  <span class="text-[16px]">{{ t('equity_module.number_of_knowledge_base_files') }}</span>
                  <n-popover trigger="hover">
                    <template #trigger>
                      <i class="iconfont icon-yiwen-yuan ml-[5px] text-[14px] text-[#999]"></i>
                    </template>
                    <span>{{ t('equity_module.number_of_knowledge_base_files_doc') }}</span>
                  </n-popover>
                </div>
              </div>

              <div>
                <div class="mb-[13px] text-[14px]">
                  <n-number-animation :from="0" :to="equityInfo.usedKnowledgeCount" />
                  <span>/{{ equityInfo.maxKnowledgeCount }} {{ t('equity_module.individual') }}</span>
                </div>
                <div>
                  <n-progress
                    type="line"
                    :percentage="(equityInfo.usedKnowledgeCount / equityInfo.maxKnowledgeCount) * 100"
                    :show-indicator="false"
                    :height="6"
                  />
                </div>
              </div>
            </section>
          </div>

          <GiftPackList v-model:current-select-version="currentSelectVersion" />
        </div>
      </n-scrollbar>
    </div>

    <div class="relative w-[360px]">
      <span
        class="absolute left-0 top-1/2 inline-block h-[30px] w-[30px] -translate-x-1/3 -translate-y-1/2 rotate-45 rounded-[6px] bg-white"
      ></span>

      <div class="absolute inset-0 rounded-[20px] bg-white">
        <PaySidebar :current-select-version="currentSelectVersion" />
      </div>
    </div>

    <PointRechargeModal v-model:is-show-point-recharge-modal="isShowPointRechargeModal" />
  </div>
</template>
