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

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

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

import { getDeliveryPartnersApi, type UserApi } from '#/api';

const userStore = useUserStore();
const isLogin = computed(() => !!userStore.userInfo);

const deliveryPartnersList = ref<UserApi.DeliveryPartnerModel[]>([]);
const loading = ref(false);

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

  try {
    loading.value = true;
    const result = await getDeliveryPartnersApi({
      currentPage: 1,
      pageSize: 12,
      orderByProperty: 'name',
      Ascending: true,
      totalPage: 1,
      totalCount: 2,
      filters: [
        { name: 'name' },
        { name: 'account' },
        { name: 'status', value: 1 },
      ],
    });
    if (result?.result?.model) {
      deliveryPartnersList.value = result.result.model;
    }
  } catch (error) {
    console.error('获取交付伙伴列表失败:', error);
  } finally {
    loading.value = false;
  }
}

watch(
  () => isLogin.value,
  (newValue) => {
    if (newValue) {
      fetchDeliveryPartnersList();
    }
  },
  { 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.deliveryPartners') }}
        </h2>
        <div class="text-xs text-[#9A9BA3]">Delivery Partners</div>
      </div>
      <img
        alt="more"
        class="h-[29px] w-[29px] cursor-pointer"
        src="@/assets/image/home-more.png"
      />
    </div>
    <p
      v-if="!isLogin"
      class="mt-4 w-[174px] text-sm text-xs leading-relaxed text-[#9A9BA3]"
    >
      {{ $t('homeModule.deliveryPartnersIntroduction') }}
    </p>

    <div v-if="isLogin" class="mt-[63px] flex gap-[18px]">
      <img
        v-for="index in 4"
        :key="index"
        :src="`/src/assets/image/user${index}.png`"
        :style="{ marginLeft: index !== 1 ? '-35px' : '0' }"
        :text="index"
        alt=""
        class="h-[46px] w-[46px]"
      />
    </div>
  </div>
</template>

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