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

interface Props {
  embedded?: boolean;
  open: boolean;
  productIds: string[];
  productOptions: Array<{ label: string; value: string }>;
  sourceStoreName: string;
  submitting: boolean;
  syncPrice: boolean;
  syncStatus: boolean;
  syncStock: boolean;
  targetStoreIds: string[];
  targetStoreOptions: Array<{ label: string; value: string }>;
}

interface Emits {
  (event: 'close'): void;
  (event: 'submit'): void;
  (event: 'update:productIds', value: string[]): void;
  (event: 'update:syncPrice', value: boolean): void;
  (event: 'update:syncStatus', value: boolean): void;
  (event: 'update:syncStock', value: boolean): void;
  (event: 'update:targetStoreIds', value: string[]): void;
}

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

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

function setTargetStoreIds(value: unknown) {
  emit('update:targetStoreIds', normalizeArray(value));
}

function setProductIds(value: unknown) {
  emit('update:productIds', normalizeArray(value));
}

function setSyncPrice(value: boolean | string | undefined) {
  emit('update:syncPrice', Boolean(value));
}

function setSyncStock(value: boolean | string | undefined) {
  emit('update:syncStock', Boolean(value));
}

function setSyncStatus(value: boolean | string | undefined) {
  emit('update:syncStatus', Boolean(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>
      <Input
        :value="props.sourceStoreName"
        disabled
        class="pbt-select-narrow"
      />
    </div>

    <div class="pbt-step">
      <div class="pbt-step-label"><span class="num">2</span> 目标门店</div>
      <Select
        mode="multiple"
        :value="props.targetStoreIds"
        :options="props.targetStoreOptions"
        class="pbt-select-wide"
        placeholder="请选择目标门店"
        @update:value="setTargetStoreIds"
      />
    </div>

    <div class="pbt-step">
      <div class="pbt-step-label"><span class="num">3</span> 同步商品</div>
      <Select
        mode="multiple"
        :value="props.productIds"
        :options="props.productOptions"
        class="pbt-select-wide"
        placeholder="请选择需要同步的商品"
        @update:value="setProductIds"
      />
    </div>

    <div class="pbt-step">
      <div class="pbt-step-label"><span class="num">4</span> 同步选项</div>
      <Space>
        <Checkbox :checked="props.syncPrice" @update:checked="setSyncPrice">
          价格
        </Checkbox>
        <Checkbox :checked="props.syncStock" @update:checked="setSyncStock">
          库存
        </Checkbox>
        <Checkbox :checked="props.syncStatus" @update:checked="setSyncStatus">
          状态
        </Checkbox>
      </Space>
    </div>

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