<script setup lang="ts">
import { Button, Select } from 'ant-design-vue';

interface Props {
  categoryOptions: Array<{ label: string; value: string }>;
  embedded?: boolean;
  estimatedCount: number;
  open: boolean;
  sourceCategoryId: string;
  submitting: boolean;
  targetCategoryId: string;
}

interface Emits {
  (event: 'close'): void;
  (event: 'submit'): void;
  (event: 'update:sourceCategoryId', value: string): void;
  (event: 'update:targetCategoryId', value: string): void;
}

const props = withDefaults(defineProps<Props>(), {
  embedded: false,
});
const emit = defineEmits<Emits>();

function setSourceCategory(value: unknown) {
  emit('update:sourceCategoryId', String(value ?? ''));
}

function setTargetCategory(value: unknown) {
  emit('update:targetCategoryId', String(value ?? ''));
}
</script>

<template>
  <section
    v-if="props.open"
    class="pbt-panel"
    :class="{ 'pbt-panel-embedded': props.embedded }"
  >
    <header v-if="!props.embedded" class="pbt-panel-hd">
      <h3>批量移动分类</h3>
      <button type="button" class="pbt-close" @click="emit('close')">×</button>
    </header>

    <div class="pbt-step">
      <div class="pbt-step-label">
        <span class="num">1</span> 源分类（可选）
      </div>
      <Select
        :value="props.sourceCategoryId"
        allow-clear
        class="pbt-select-narrow"
        :options="props.categoryOptions"
        placeholder="请选择源分类"
        @update:value="setSourceCategory"
      />
    </div>

    <div class="pbt-step">
      <div class="pbt-step-label"><span class="num">2</span> 目标分类</div>
      <Select
        :value="props.targetCategoryId"
        class="pbt-select-narrow"
        :options="props.categoryOptions"
        placeholder="请选择目标分类"
        @update:value="setTargetCategory"
      />
    </div>

    <div class="pbt-info">
      预计移动 <strong>{{ props.estimatedCount }}</strong> 个商品
    </div>

    <footer class="pbt-actions">
      <Button
        type="primary"
        :loading="props.submitting"
        @click="emit('submit')"
      >
        确认移动
      </Button>
      <Button @click="emit('close')">取消</Button>
    </footer>
  </section>
</template>
