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

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

interface Props {
  action: 'off' | 'on';
  categoryOptions: Array<{ label: string; value: string }>;
  embedded?: boolean;
  estimatedCount: number;
  open: boolean;
  productOptions: Array<{ label: string; value: string }>;
  scopeCategoryIds: string[];
  scopeProductIds: string[];
  scopeType: BatchScopeType;
  submitting: boolean;
}

interface Emits {
  (event: 'close'): void;
  (event: 'submit'): void;
  (event: 'update:action', value: 'off' | 'on'): void;
  (event: 'update:scopeCategoryIds', value: string[]): void;
  (event: 'update:scopeProductIds', value: string[]): void;
  (event: 'update:scopeType', value: BatchScopeType): void;
}

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

const scopePills = [
  { label: '全部商品', value: 'all' as const },
  { label: '按分类', value: 'category' as const },
  { label: '手动选择', value: 'manual' as const },
];

const actionPills = [
  { label: '上架', value: 'on' as const },
  { label: '下架', value: 'off' as const },
];

function normalizeArray(value: unknown) {
  if (!Array.isArray(value)) {
    return [];
  }
  return value.map(String);
}

function setScopeCategoryIds(value: unknown) {
  emit('update:scopeCategoryIds', normalizeArray(value));
}

function setScopeProductIds(value: unknown) {
  emit('update:scopeProductIds', normalizeArray(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>
      <div class="pbt-pills">
        <button
          v-for="item in scopePills"
          :key="item.value"
          type="button"
          class="pbt-pill"
          :class="{ active: props.scopeType === item.value }"
          @click="emit('update:scopeType', item.value)"
        >
          {{ item.label }}
        </button>
      </div>

      <Select
        v-if="props.scopeType === 'category'"
        mode="multiple"
        :value="props.scopeCategoryIds"
        :options="props.categoryOptions"
        class="pbt-select-wide"
        placeholder="选择分类"
        @update:value="setScopeCategoryIds"
      />

      <Select
        v-if="props.scopeType === 'manual'"
        mode="multiple"
        :value="props.scopeProductIds"
        :options="props.productOptions"
        class="pbt-select-wide"
        placeholder="选择商品"
        @update:value="setScopeProductIds"
      />
    </div>

    <div class="pbt-step">
      <div class="pbt-step-label"><span class="num">2</span> 操作类型</div>
      <div class="pbt-pills">
        <button
          v-for="item in actionPills"
          :key="item.value"
          type="button"
          class="pbt-pill"
          :class="{ active: props.action === item.value }"
          @click="emit('update:action', item.value)"
        >
          {{ item.label }}
        </button>
      </div>
    </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>
