<script setup lang="ts">
import type { ChannelFilter } from '../types';

/**
 * 文件职责：分类左侧列表组件。
 */
import type { ProductCategoryManageDto } from '#/api/product';

import { IconifyIcon } from '@vben/icons';

import { Input } from 'ant-design-vue';

import { CATEGORY_CHANNEL_META, CATEGORY_CHANNEL_ORDER } from '../types';

interface Props {
  categories: ProductCategoryManageDto[];
  channelFilter: ChannelFilter;
  keyword: string;
  loading: boolean;
  selectedCategoryId: string;
  totalCount: number;
}

interface Emits {
  (event: 'select', id: string): void;
  (event: 'update:channelFilter', value: ChannelFilter): void;
  (event: 'update:keyword', value: string): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

function setKeyword(value: string | undefined) {
  emit('update:keyword', value ?? '');
}

function getDisplayChannels(channels: ProductCategoryManageDto['channels']) {
  return CATEGORY_CHANNEL_ORDER.filter((channel) => channels.includes(channel));
}
</script>

<template>
  <div class="pcat-left">
    <div class="pcat-left-hd">
      <div class="pcat-left-title">
        全部分类
        <span>共 {{ props.totalCount }} 个</span>
      </div>
      <div class="pcat-ch-filter">
        <span
          class="pcat-ch-pill"
          :class="{ active: props.channelFilter === 'all' }"
          @click="emit('update:channelFilter', 'all')"
        >
          全部
        </span>
        <span
          class="pcat-ch-pill"
          :class="{ active: props.channelFilter === 'wm' }"
          @click="emit('update:channelFilter', 'wm')"
        >
          外卖
        </span>
        <span
          class="pcat-ch-pill"
          :class="{ active: props.channelFilter === 'pickup' }"
          @click="emit('update:channelFilter', 'pickup')"
        >
          自提
        </span>
        <span
          class="pcat-ch-pill"
          :class="{ active: props.channelFilter === 'dine_in' }"
          @click="emit('update:channelFilter', 'dine_in')"
        >
          堂食
        </span>
      </div>
      <div class="pcat-search">
        <Input
          :value="props.keyword"
          allow-clear
          placeholder="搜索分类名称…"
          @update:value="setKeyword"
        >
          <template #prefix>
            <IconifyIcon icon="lucide:search" class="pcat-search-icon" />
          </template>
        </Input>
      </div>
    </div>

    <div class="pcat-left-list">
      <div v-if="props.loading" class="pcat-left-empty">分类加载中...</div>
      <div v-else-if="props.categories.length === 0" class="pcat-left-empty">
        暂无分类
      </div>
      <template v-else>
        <div
          v-for="item in props.categories"
          :key="item.id"
          class="pcat-cat-item"
          :class="{
            active: item.id === props.selectedCategoryId,
            disabled: item.status === 'disabled',
          }"
          @click="emit('select', item.id)"
        >
          <span class="pcat-drag-handle">
            <IconifyIcon icon="lucide:grip-vertical" />
          </span>
          <span class="pcat-cat-name">{{ item.name }}</span>
          <span class="pcat-cat-tags">
            <span
              v-for="channel in getDisplayChannels(item.channels)"
              :key="`${item.id}-${channel}`"
              class="pcat-ch-mini"
              :class="CATEGORY_CHANNEL_META[channel].filterClass"
            >
              {{ CATEGORY_CHANNEL_META[channel].shortLabel }}
            </span>
          </span>
          <span class="pcat-cat-badge">{{ item.productCount }}</span>
        </div>
      </template>
    </div>
  </div>
</template>
