<script setup lang="ts">
/**
 * 文件职责：商品标签管理页面主视图。
 * 1. 还原原型工具栏、统计条、表格卡片与右侧抽屉。
 * 2. 通过真实 TenantApi 完成标签增删改与启停。
 */
import { Page } from '@vben/common-ui';

import { Button, Empty, Input, Select, Spin } from 'ant-design-vue';

import LabelEditorDrawer from './components/LabelEditorDrawer.vue';
import LabelListTable from './components/LabelListTable.vue';
import { LABEL_COLOR_OPTIONS } from './composables/labels-page/constants';
import { useProductLabelsPage } from './composables/useProductLabelsPage';

const {
  disableLabel,
  drawerSubmitText,
  drawerTitle,
  enableLabel,
  filteredRows,
  form,
  isDrawerOpen,
  isDrawerSubmitting,
  isLoading,
  isStoreLoading,
  keyword,
  labelCount,
  openCreateDrawer,
  openEditDrawer,
  relatedProductCount,
  removeLabel,
  selectedStoreId,
  setDrawerOpen,
  setFormColor,
  setFormName,
  setFormSort,
  setKeyword,
  setSelectedStoreId,
  storeOptions,
  submitDrawer,
  toggleFormStatus,
  enabledCount,
} = useProductLabelsPage();
</script>

<template>
  <Page title="商品标签" content-class="page-product-labels">
    <div class="plbl-page">
      <div class="plbl-toolbar">
        <Select
          class="plbl-store-select"
          :value="selectedStoreId"
          :options="storeOptions"
          :loading="isStoreLoading"
          placeholder="请选择门店"
          @update:value="(value) => setSelectedStoreId(String(value ?? ''))"
        />
        <Input
          class="plbl-search"
          :value="keyword"
          placeholder="搜索标签名称…"
          @update:value="(value) => setKeyword(String(value ?? ''))"
        />
        <span class="plbl-spacer"></span>
        <Button type="primary" @click="openCreateDrawer">+ 添加标签</Button>
      </div>

      <div v-if="selectedStoreId" class="plbl-stats">
        <span>
          标签总数 <strong>{{ labelCount }}</strong>
        </span>
        <span>
          启用 <strong>{{ enabledCount }}</strong>
        </span>
        <span>
          关联商品 <strong>{{ relatedProductCount }}</strong>
        </span>
      </div>

      <div v-if="!selectedStoreId" class="plbl-empty">
        暂无门店，请先创建门店
      </div>

      <Spin v-else :spinning="isLoading">
        <div v-if="filteredRows.length > 0" class="plbl-card">
          <LabelListTable
            :rows="filteredRows"
            @edit="openEditDrawer"
            @enable="enableLabel"
            @disable="disableLabel"
            @remove="removeLabel"
          />
        </div>
        <div v-else class="plbl-empty">
          <Empty description="暂无标签" />
        </div>
      </Spin>
    </div>

    <LabelEditorDrawer
      :open="isDrawerOpen"
      :title="drawerTitle"
      :submit-text="drawerSubmitText"
      :submitting="isDrawerSubmitting"
      :form="form"
      :color-options="LABEL_COLOR_OPTIONS"
      @close="setDrawerOpen(false)"
      @set-name="setFormName"
      @set-color="setFormColor"
      @set-sort="setFormSort"
      @toggle-status="toggleFormStatus"
      @submit="submitDrawer"
    />
  </Page>
</template>

<style lang="less">
@import './styles/index.less';
</style>
