<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { useRouter } from 'vue-router';

import { useUserStore } from '@vben/stores';

import { $t } from '@/locales';

import { getEnterpriseCustomersApi } from '#/api';
import { useLoginModalStore } from '#/store';

interface Props {
  jurisdiction: boolean;
}

const props = defineProps<Props>();
const userStore = useUserStore();
const isLogin = computed(() => !!userStore.userInfo);
const router = useRouter();
const loginModalStore = useLoginModalStore();
const customerList = ref<any[]>([]);

function navigateToEnterpriseCustomers() {
  if (!isLogin.value) {
    loginModalStore.open();
    return;
  }
  router.push('/enterprise-customers');
}

async function fetchEnterpriseCustomers() {
  if (!isLogin.value) {
    return;
  }

  try {
    const result = await getEnterpriseCustomersApi({
      currentPage: 1,
      pageSize: 6,
      orderByProperty: 'Id',
      Ascending: false,
      filters: [],
    });
    if (result?.result?.model) {
      customerList.value = result.result.model;
    }
  } catch {}
}

watch(
  () => isLogin.value,
  (newValue) => {
    if (newValue) {
      fetchEnterpriseCustomers();
    }
  },
  { immediate: true },
);
</script>

<template>
  <div class="info-card border-box h-[217px] w-full rounded-lg p-5 shadow-md">
    <div class="items-flex-start flex justify-between">
      <div>
        <h2 class="text-lg font-bold">
          {{ $t('homeModule.enterpriseCustomers') }}
        </h2>
        <div class="text-xs text-[#9A9BA3]">Enterprise Customers</div>
      </div>
      <img
        v-if="props.jurisdiction"
        alt="more"
        class="h-[29px] w-[29px] cursor-pointer"
        src="@/assets/image/home-more.png"
        @click="navigateToEnterpriseCustomers"
      />
    </div>
    <p
      v-if="!isLogin"
      class="mt-4 w-[249px] text-sm text-xs leading-relaxed text-[#9A9BA3]"
    >
      {{ $t('homeModule.enterpriseCustomersIntroduction') }}
    </p>
    <div v-else-if="props.jurisdiction && isLogin" class="mt-[38px]">
      <div v-if="customerList.length > 0" class="flex flex-wrap gap-[18px]">
        <div
          v-for="(item, index) in customerList"
          :key="index"
          class="flex h-[37px] cursor-pointer items-center rounded-[11px] bg-[#fff] p-[6px_10px] shadow-md"
        >
          <img
            :src="`/File/Download?fileId=${item.imgLogoFileId}`"
            alt=""
            class="h-[24px] w-auto object-contain"
          />
          <span
            class="ml-[10px] font-['Open_Sans'] text-[13px] font-medium text-[#000]"
          >
            {{ item.name }}
          </span>
        </div>
      </div>
      <div
        v-else
        class="mt-[-28px] flex w-full flex-col items-center justify-center text-center"
      >
        <img
          alt=""
          class="block h-[80px] w-[85px]"
          src="@/assets/image/jurisdiction.png"
        />
        {{ $t('auth.emptyContent') }}
      </div>
    </div>
    <div
      v-else
      class="mt-[10px] flex flex-col items-center justify-center text-center"
    >
      <img
        alt=""
        class="block h-[80px] w-[85px]"
        src="@/assets/image/empty.png"
      />
      {{ $t('auth.noPermission') }}
    </div>
  </div>
</template>

<style scoped>
.info-card {
  overflow: hidden;
  background: url('@/assets/image/Group 220307@2x.png') no-repeat center center;
  background-size: cover;
  border-radius: 26px;
}
</style>
