<script setup lang="ts">
import { useSystemLanguageStore } from '@/store/modules/system-language'
import { useUserStore } from '@/store/modules/user'
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'

type VersionName = 'BasicVersion' | 'ProfessionalVersion' | 'FlagshipVersion' | 'EnterpriseVersion' | null

const currentSelectVersion = defineModel<VersionName>('currentSelectVersion', { required: true })

const { t } = useI18n()

const userStore = useUserStore()
const systemLanguageStore = useSystemLanguageStore()

const isEnglishLanguage = computed(() => systemLanguageStore.currentLanguageInfo.key === 'en')

function handleVersionSwitch(version: VersionName) {
  if (
    userStore.equityInfo.equityLevel === 'ultimate' &&
    version &&
    ['ProfessionalVersion', 'BasicVersion'].includes(version)
  ) {
    window.$message.warning(t('equity_module.current_version_is_higher'))
    return
  }

  currentSelectVersion.value = version
}
</script>

<template>
  <div class="mt-[30px]">
    <h2 class="font-600 text-[18px]">{{ t('equity_module.gift_package_list_title') }}</h2>

    <div
      class="mt-[31px] grid grid-flow-row-dense gap-[29px]"
      style="grid-template-columns: repeat(auto-fill, minmax(255px, 1fr))"
    >
      <section
        class="relative h-[452px] rounded-[10px] border border-[#CFD3D4] bg-[#FBFCFF]"
        :class="[isEnglishLanguage ? 'h-[492px]' : 'h-[452px]']"
      >
        <div
          v-if="userStore.equityInfo.equityLevel === 'normal'"
          class="z-1 absolute left-[-1px] top-0 -translate-y-1/2 rounded-[2px_16px_2px_2px] px-[10px] py-[6px] text-[12px] text-white"
          style="background-image: linear-gradient(45deg, #fa9079, #f25744)"
        >
          {{ t('equity_module.current_version') }}
        </div>

        <div
          class="h-[190px] overflow-hidden rounded-[10px] border-b border-solid border-[#CFD3D4] text-center"
          style="background-image: linear-gradient(45deg, #d5daf1, #fafafa, #bfc6e2)"
        >
          <div class="font-600 mt-[24px] text-center text-[16px] text-[#010448]">
            {{ t('equity_module.basic_version') }}
          </div>
          <div class="font-600 mt-[18px] text-center text-[24px] text-[#010448]">{{ t('equity_module.free_use') }}</div>

          <button
            class="mx-auto mt-[24px] !cursor-not-allowed rounded-[5px] bg-[#A8B2FF] px-[10px] py-[6px] text-[14px] text-[#fff] transition"
          >
            {{ t('applications_square_module.immediate_use_btn_text') }}
          </button>
        </div>

        <div class="mt-[12px]">
          <ul class="pr-[8px]" :class="isEnglishLanguage ? 'ml-[12px]' : 'ml-[42px]'">
            <li class="mb-[14px] flex text-[14px] text-[#010448]">
              <span class="mr-[5px] mt-[8px] inline-block h-[6px] w-[6px] shrink-0 rounded-full bg-[#D8D8D8]"></span>
              <div>{{ t('equity_module.points2') }}：<span class="font-600">50</span></div>
            </li>
            <li class="mb-[14px] flex text-[14px] text-[#010448]">
              <span class="mr-[5px] mt-[8px] inline-block h-[6px] w-[6px] shrink-0 rounded-full bg-[#D8D8D8]"></span>
              <div>
                {{ t('equity_module.upper_application_limit') }}：
                <span class="font-600">5 {{ t('equity_module.individual') }}</span>
              </div>
            </li>
            <li class="mb-[14px] flex text-[14px] text-[#010448]">
              <span class="mr-[5px] mt-[8px] inline-block h-[6px] w-[6px] shrink-0 rounded-full bg-[#D8D8D8]"></span>
              <div>
                {{ t('equity_module.number_of_knowledge_base_files') }}：
                <span class="font-600">5 {{ t('equity_module.individual') }}</span>
              </div>
            </li>
            <li class="mb-[14px] flex text-[14px] text-[#010448]">
              <span class="mr-[5px] mt-[8px] inline-block h-[6px] w-[6px] shrink-0 rounded-full bg-[#D8D8D8]"></span>
              <div>
                {{ t('equity_module.support_ai_model') }}：<span class="font-600">{{ t('common_module.all') }}</span>
              </div>
            </li>
          </ul>
        </div>
      </section>

      <section
        class="relative h-[452px] rounded-[10px] border border-[#F4DEC5] bg-[#FFFDFB] transition-all"
        :class="[
          currentSelectVersion === 'ProfessionalVersion' ? 'border-[#FFC07B] !bg-[#FFF7ED]' : '',
          isEnglishLanguage ? 'h-[492px]' : 'h-[452px]',
        ]"
      >
        <div
          v-if="userStore.equityInfo.equityLevel === 'professional'"
          class="z-1 absolute left-[-1px] top-0 -translate-y-1/2 rounded-[2px_16px_2px_2px] px-[10px] py-[6px] text-[12px] text-white"
          style="background-image: linear-gradient(45deg, #fa9079, #f25744)"
        >
          {{ t('equity_module.current_version') }}
        </div>

        <div
          class="h-[190px] overflow-hidden rounded-[10px] border-b border-solid border-b-[#F4DEC5] text-center"
          :class="currentSelectVersion === 'ProfessionalVersion' ? 'border-b-[#FFC07B]' : ''"
          :style="
            currentSelectVersion === 'ProfessionalVersion'
              ? 'background-image: linear-gradient(45deg, #FFD063, #FFF1D5, #FEBB57)'
              : 'background-image: linear-gradient(45deg, #ffe9cd, #fffbf2, #ffefd1)'
          "
        >
          <div class="font-600 mt-[24px] text-center text-[16px] text-[#482801]">
            {{ t('equity_module.professional_version') }}
          </div>
          <div class="font-600 mt-[18px] text-center text-[24px] text-[#482801]">
            <span class="font-600 text-[24px]">19.9</span>
            <span class="text-[14px]">￥/{{ t('equity_module.month') }}</span>

            <span class="font-600 ml-[10px] text-[24px]">199</span>
            <span class="text-[14px]">￥/{{ t('equity_module.year') }}</span>
          </div>

          <button
            class="mx-auto mt-[24px] rounded-[5px] bg-[#FFBD79] px-[10px] py-[6px] text-[14px] text-[#fff] transition hover:bg-[#F1B273]"
            :style="
              currentSelectVersion === 'ProfessionalVersion'
                ? 'background-image: linear-gradient(to bottom, #FFF598, #FFAA00)'
                : ''
            "
            @click="handleVersionSwitch('ProfessionalVersion')"
          >
            {{ t('equity_module.open_immediately') }}
          </button>
        </div>

        <div class="mt-[12px]">
          <ul :class="isEnglishLanguage ? 'ml-[12px]' : 'ml-[42px]'">
            <li class="mb-[14px] flex text-[14px] text-[#482801]">
              <span class="mr-[5px] mt-[8px] inline-block h-[6px] w-[6px] shrink-0 rounded-full bg-[#EBD8BE]"></span>
              <div>
                {{ t('equity_module.points2') }}：
                <span class="font-600"
                  >{{ t('equity_module.monthly_pass') }} 100/{{ t('equity_module.annual_card') }} 1500</span
                >
              </div>
            </li>
            <li class="mb-[14px] flex text-[14px] text-[#482801]">
              <span class="mr-[5px] mt-[8px] inline-block h-[6px] w-[6px] shrink-0 rounded-full bg-[#EBD8BE]"></span>
              <div>
                {{ t('equity_module.upper_application_limit') }}：
                <span class="font-600">30{{ t('equity_module.individual') }}</span>
              </div>
            </li>
            <li class="mb-[14px] flex text-[14px] text-[#482801]">
              <span class="mr-[5px] mt-[8px] inline-block h-[6px] w-[6px] shrink-0 rounded-full bg-[#EBD8BE]"></span>
              <div>
                {{ t('equity_module.number_of_knowledge_base_files') }}：
                <span class="font-600">50{{ t('equity_module.individual') }}</span>
              </div>
            </li>
            <li class="mb-[14px] flex text-[14px] text-[#482801]">
              <span class="mr-[5px] mt-[8px] inline-block h-[6px] w-[6px] shrink-0 rounded-full bg-[#EBD8BE]"></span>
              <div>
                {{ t('equity_module.support_ai_model') }}：<span class="font-600">{{ t('common_module.all') }}</span>
              </div>
            </li>
          </ul>
        </div>
      </section>

      <section
        class="relative h-[452px] rounded-[10px] border border-[#F4DEC5] bg-[#FFFDFB]"
        :class="[
          currentSelectVersion === 'FlagshipVersion' ? 'border-[#FFC07B] !bg-[#FFF7ED]' : '',
          isEnglishLanguage ? 'h-[492px]' : 'h-[452px]',
        ]"
      >
        <div
          v-if="userStore.equityInfo.equityLevel === 'ultimate'"
          class="z-1 absolute left-[-1px] top-0 -translate-y-1/2 rounded-[2px_16px_2px_2px] px-[10px] py-[6px] text-[12px] text-white"
          style="background-image: linear-gradient(45deg, #fa9079, #f25744)"
        >
          {{ t('equity_module.current_version') }}
        </div>

        <div
          class="h-[190px] overflow-hidden rounded-[10px] border-b border-solid border-[#F4DEC5] text-center"
          :class="currentSelectVersion === 'FlagshipVersion' ? 'border-b-[#FFC07B]' : ''"
          :style="
            currentSelectVersion === 'FlagshipVersion'
              ? 'background-image: linear-gradient(45deg, #FFD063, #FFF1D5, #FEBB57)'
              : 'background-image: linear-gradient(45deg, #ffe9cd, #fffbf2, #ffefd1)'
          "
        >
          <div class="font-600 mt-[24px] text-center text-[16px] text-[#482801]">
            {{ t('equity_module.flagship_version') }}
          </div>
          <div class="font-600 mt-[18px] text-center text-[24px] text-[#482801]">
            <span class="font-600 text-[24px]">29.9</span>
            <span class="text-[14px]">￥/{{ t('equity_module.month') }}</span>

            <span class="font-600 ml-[10px] text-[24px]">299</span>
            <span class="text-[14px]">￥/{{ t('equity_module.year') }}</span>
          </div>

          <button
            class="mx-auto mt-[24px] rounded-[5px] bg-[#FFBD79] px-[10px] py-[6px] text-[14px] text-[#fff] transition hover:bg-[#F1B273]"
            :style="
              currentSelectVersion === 'FlagshipVersion'
                ? 'background-image: linear-gradient(to bottom, #FFF598, #FFAA00)'
                : ''
            "
            @click="handleVersionSwitch('FlagshipVersion')"
          >
            {{ t('equity_module.open_immediately') }}
          </button>
        </div>

        <div class="mt-[12px]">
          <ul class="pr-[8px]" :class="isEnglishLanguage ? 'ml-[12px]' : 'ml-[42px]'">
            <li class="mb-[14px] flex text-[14px] text-[#482801]">
              <span class="mr-[5px] mt-[8px] inline-block h-[6px] w-[6px] shrink-0 rounded-full bg-[#EBD8BE]"></span>
              <div>
                {{ t('equity_module.points2') }}：
                <span class="font-600">
                  {{ t('equity_module.monthly_pass') }} 200/{{ t('equity_module.annual_card') }} 3000
                </span>
              </div>
            </li>
            <li class="mb-[14px] flex text-[14px] text-[#482801] before:mr-[5px]">
              <span class="mr-[5px] mt-[8px] inline-block h-[6px] w-[6px] shrink-0 rounded-full bg-[#EBD8BE]"></span>
              <div>
                {{ t('equity_module.upper_application_limit') }}：
                <span class="font-600">{{ t('common_module.unlimited_amount') }}</span>
              </div>
            </li>
            <li class="mb-[14px] flex text-[14px] text-[#482801]">
              <span class="mr-[5px] mt-[8px] inline-block h-[6px] w-[6px] shrink-0 rounded-full bg-[#EBD8BE]"></span>
              <div>
                {{ t('equity_module.number_of_knowledge_base_files') }}：
                <span class="font-600">100{{ t('equity_module.individual') }}</span>
              </div>
            </li>
            <li class="mb-[14px] flex text-[14px] text-[#482801]">
              <span class="mr-[5px] mt-[8px] inline-block h-[6px] w-[6px] shrink-0 rounded-full bg-[#EBD8BE]"></span>
              <div>
                {{ t('equity_module.support_ai_model') }}：<span class="font-600">{{ t('common_module.all') }}</span>
              </div>
            </li>
          </ul>
        </div>
      </section>

      <section
        class="relative rounded-[10px] border border-[#D2D2D0] bg-[#F8F8F8]"
        :class="[
          currentSelectVersion === 'EnterpriseVersion' ? 'border-[#000000] !bg-[#86785B]' : '',
          isEnglishLanguage ? 'h-[492px]' : 'h-[452px]',
        ]"
      >
        <!-- <div
          v-if="userStore.equityInfo.equityLevel === 'ultimate'"
          class="z-1 absolute left-[-1px] top-0 -translate-y-1/2 rounded-[2px_16px_2px_2px] px-[10px] py-[6px] text-[12px] text-white"
          style="background-image: linear-gradient(45deg, #fa9079, #f25744)"
        >
           {{ t('equity_module.current_version') }}
        </div> -->

        <div
          class="h-[190px] overflow-hidden rounded-[10px] border-b border-solid border-[#555554] text-center"
          :class="currentSelectVersion === 'EnterpriseVersion' ? 'border-b-[#000000]' : ''"
          :style="
            currentSelectVersion === 'EnterpriseVersion'
              ? 'background-image: linear-gradient(45deg, #3B3B3B, #655741, #000000)'
              : 'background-image: linear-gradient(45deg, #6e6e6e, #4f4f4f)'
          "
        >
          <div class="font-600 mt-[24px] text-center text-[16px] text-[#FFF0D4]">
            {{ t('equity_module.enterprise_version') }}
          </div>
          <div class="font-600 mt-[18px] text-center text-[22px] text-[#FFF0D4]">
            {{ t('equity_module.consultation_for_details') }}
          </div>

          <button
            class="mx-auto mt-[24px] rounded-[5px] bg-[#F8E6C9] px-[10px] py-[6px] text-[14px] text-[#453A3A] transition hover:bg-[#E4D3B7]"
            :style="
              currentSelectVersion === 'EnterpriseVersion'
                ? 'background-image: linear-gradient(to bottom,#FFEE84, #FFAA00)'
                : ''
            "
            @click="handleVersionSwitch('EnterpriseVersion')"
          >
            {{ t('equity_module.consult_now') }}
          </button>
        </div>
        <div class="mt-[12px]">
          <ul class="pr-[8px]" :class="isEnglishLanguage ? 'ml-[12px]' : 'ml-[42px]'">
            <li
              class="mb-[14px] flex text-[14px] text-[#482801]"
              :class="currentSelectVersion === 'EnterpriseVersion' ? 'text-[#FFFAF6]' : ''"
            >
              <span class="mr-[5px] mt-[8px] inline-block h-[6px] w-[6px] shrink-0 rounded-full bg-[#C7C2AB]"></span>
              <div>
                {{ t('equity_module.points2') }}：
                <span class="font-600 text-[#FFE0A0]">{{ t('common_module.unlimited_amount') }}</span>
              </div>
            </li>
            <li
              class="mb-[14px] flex text-[14px] text-[#482801]"
              :class="currentSelectVersion === 'EnterpriseVersion' ? 'text-[#FFFAF6]' : ''"
            >
              <span class="mr-[5px] mt-[8px] inline-block h-[6px] w-[6px] shrink-0 rounded-full bg-[#C7C2AB]"></span>
              <div>
                {{ t('equity_module.upper_application_limit') }}：
                <span class="font-600 text-[#FFE0A0]">{{ t('common_module.unlimited_amount') }}</span>
              </div>
            </li>
            <li
              class="mb-[14px] flex text-[14px] text-[#482801]"
              :class="currentSelectVersion === 'EnterpriseVersion' ? 'text-[#FFFAF6]' : ''"
            >
              <span class="mr-[5px] mt-[8px] inline-block h-[6px] w-[6px] shrink-0 rounded-full bg-[#C7C2AB]"></span>
              <div>
                {{ t('equity_module.number_of_knowledge_base_files') }}：
                <span class="font-600 text-[#FFE0A0]">{{ t('common_module.unlimited_amount') }}</span>
              </div>
            </li>
            <li
              class="mb-[14px] flex text-[14px] text-[#482801]"
              :class="currentSelectVersion === 'EnterpriseVersion' ? 'text-[#FFFAF6]' : ''"
            >
              <span class="mr-[5px] mt-[8px] inline-block h-[6px] w-[6px] shrink-0 rounded-full bg-[#C7C2AB]"></span>
              <div>
                {{ t('equity_module.support_ai_model') }}：
                <span class="font-600 text-[#FFE0A0]">{{ t('common_module.all') }}</span>
              </div>
            </li>
            <li
              class="mb-[14px] flex text-[14px] text-[#482801]"
              :class="currentSelectVersion === 'EnterpriseVersion' ? 'text-[#FFFAF6]' : ''"
            >
              <span class="mr-[5px] mt-[8px] inline-block h-[6px] w-[6px] shrink-0 rounded-full bg-[#C7C2AB]"></span>
              <div>
                {{ t('equity_module.custom_digital_person') }}：
                <span class="font-600 text-[#FFE0A0]">{{ t('common_module.support') }}</span>
              </div>
            </li>
            <li
              class="mb-[14px] flex text-[14px] text-[#482801]"
              :class="currentSelectVersion === 'EnterpriseVersion' ? 'text-[#FFFAF6]' : ''"
            >
              <span class="mr-[5px] mt-[8px] inline-block h-[6px] w-[6px] shrink-0 rounded-full bg-[#C7C2AB]"></span>
              <div>
                {{ t('equity_module.ai_training_tuning_service') }}：
                <span class="font-600 text-[#FFE0A0]">{{ t('common_module.support') }}</span>
              </div>
            </li>
            <li
              class="mb-[14px] flex text-[14px] text-[#482801]"
              :class="currentSelectVersion === 'EnterpriseVersion' ? 'text-[#FFFAF6]' : ''"
            >
              <span class="mr-[5px] mt-[8px] inline-block h-[6px] w-[6px] shrink-0 rounded-full bg-[#C7C2AB]"></span>
              <div>
                {{ t('equity_module.private_deployment') }}：
                <span class="font-600 text-[#FFE0A0]">{{ t('common_module.support') }}</span>
              </div>
            </li>
          </ul>
        </div>
      </section>
    </div>
  </div>
</template>
