<script setup lang="ts">
/**
 * 文件职责：商品快速编辑抽屉。
 * 1. 快速调整价格、库存、在售状态。
 * 2. 支持跳转商品详情页。
 */
import type { ProductQuickEditFormState } from '../types';

import type { ProductListItemDto } from '#/api/product';

import { Button, Drawer, InputNumber, Switch } from 'ant-design-vue';

import { resolveStatusMeta } from '../composables/product-list-page/helpers';

interface Props {
  form: ProductQuickEditFormState;
  isSaving: boolean;
  onSetIsOnSale: (value: boolean) => void;
  onSetOriginalPrice: (value: null | number) => void;
  onSetPrice: (value: number) => void;
  onSetStock: (value: number) => void;
  open: boolean;
  product: null | ProductListItemDto;
}

const props = defineProps<Props>();

const emit = defineEmits<{
  (event: 'detail'): void;
  (event: 'submit'): void;
  (event: 'update:open', value: boolean): void;
}>();

/** 数值输入归一化。 */
function toNumber(value: null | number | string, fallback = 0) {
  const parsed = Number(value);
  return Number.isFinite(parsed) ? parsed : fallback;
}
</script>

<template>
  <Drawer
    class="product-quick-edit-drawer"
    :open="props.open"
    title="快速编辑"
    :width="500"
    :mask-closable="true"
    @update:open="(value) => emit('update:open', value)"
  >
    <div v-if="props.product" class="product-quick-card">
      <div class="product-quick-cover">
        {{ props.product.name.slice(0, 1) }}
      </div>
      <div class="product-quick-meta">
        <div class="name">{{ props.product.name }}</div>
        <div class="sub">
          {{ props.product.spuCode }} · {{ props.product.categoryName }}
        </div>
      </div>
      <span
        class="product-status-pill"
        :class="resolveStatusMeta(props.product.status).badgeClass"
      >
        {{ resolveStatusMeta(props.product.status).label }}
      </span>
    </div>

    <div class="product-drawer-section">
      <div class="product-drawer-section-title">价格</div>
      <div class="drawer-form-grid">
        <div class="drawer-form-item">
          <label class="drawer-form-label">售价</label>
          <InputNumber
            :value="props.form.price"
            class="full-width"
            :min="0"
            :precision="2"
            :step="1"
            :controls="false"
            @update:value="
              (value) => props.onSetPrice(toNumber(value, props.form.price))
            "
          />
        </div>
        <div class="drawer-form-item">
          <label class="drawer-form-label">原价</label>
          <InputNumber
            :value="props.form.originalPrice ?? undefined"
            class="full-width"
            :min="0"
            :precision="2"
            :step="1"
            :controls="false"
            placeholder="选填"
            @update:value="
              (value) =>
                props.onSetOriginalPrice(
                  value === null || value === undefined
                    ? null
                    : toNumber(value, 0),
                )
            "
          />
        </div>
      </div>
    </div>

    <div class="product-drawer-section">
      <div class="product-drawer-section-title">库存</div>
      <div class="drawer-form-item compact">
        <InputNumber
          :value="props.form.stock"
          :min="0"
          :precision="0"
          :step="1"
          :controls="false"
          class="stock-input"
          @update:value="
            (value) => props.onSetStock(toNumber(value, props.form.stock))
          "
        />
        <span class="unit">份</span>
      </div>
    </div>

    <div class="product-drawer-section">
      <div class="product-drawer-section-title">商品状态</div>
      <div class="switch-row">
        <Switch
          :checked="props.form.isOnSale"
          checked-children="在售"
          un-checked-children="下架"
          @update:checked="(value) => props.onSetIsOnSale(Boolean(value))"
        />
        <span class="hint">关闭后商品将下架</span>
      </div>
    </div>

    <template #footer>
      <div class="product-drawer-footer">
        <Button v-if="props.product" type="link" @click="emit('detail')">
          前往详情页
        </Button>
        <div class="product-drawer-footer-right">
          <Button @click="emit('update:open', false)">取消</Button>
          <Button
            type="primary"
            :loading="props.isSaving"
            @click="emit('submit')"
          >
            保存修改
          </Button>
        </div>
      </div>
    </template>
  </Drawer>
</template>
