<script lang="ts" setup>
import type { AuthApi } from '#/api/core/auth';

defineOptions({ name: 'AccountOptionList' });

const props = defineProps<{
  accounts: AuthApi.AccountOption[];
  selectedKey?: string | null;
}>();

const emit = defineEmits<{
  select: [key: string];
}>();

function accountKey(item: AuthApi.AccountOption): string {
  return `${item.account_type || 'admin'}-${item.id}-${item.store_name || ''}`;
}

function handleSelect(item: AuthApi.AccountOption) {
  emit('select', accountKey(item));
}
</script>

<template>
  <div class="flex flex-col gap-3">
    <div
      v-for="item in accounts"
      :key="accountKey(item)"
      class="border-border cursor-pointer rounded-lg border px-3.5 py-3 transition-all"
      :class="{
        'border-primary bg-primary/10': selectedKey === accountKey(item),
      }"
      @click="handleSelect(item)"
    >
      <div class="text-foreground text-[15px] font-semibold">
        {{ item.nick_name }}
        <span v-if="item.is_current" class="text-primary ml-2 text-xs font-normal">当前</span>
      </div>
      <div class="text-muted-foreground mt-1 text-[13px]">
        <span>{{ item.role_name }}</span>
        <span v-if="item.store_name"> · {{ item.store_name }}</span>
        <span v-if="item.login_account"> · {{ item.login_account }}</span>
      </div>
    </div>
  </div>
</template>
