/**
 * 确认兑换商品的弹窗内容
 */
import { ShopGoodsTypeEnum, regionListOptions } from '@/constants'
import type { BackendShopItemDto, ExchangeGoodsParams } from '@/api'
import type { SetupContext } from 'vue'

type ExchangeContentProps = {
  item: BackendShopItemDto
  modelValue: ExchangeGoodsParams
}
type ExchangeContentEvents = {
  'update:modelValue'(data: ExchangeGoodsParams): void
}

export default function ExchangeContent(
  { item, modelValue }: ExchangeContentProps,
  context: SetupContext<ExchangeContentEvents>,
) {
  const totalPrice = computed(() => item.price * (modelValue.num || 1))

  return (
    <div class="py-4">
      {/* 商品信息卡片 */}
      <div class="flex gap-4 p-4 bg-gray-50 rounded-xl mb-5">
        <div
          class="w-24 h-24 bg-white rounded-xl overflow-hidden shadow-sm shrink-0
                    flex items-center justify-center p-2"
        >
          <img
            src={item.imageUrl}
            alt={item.name}
            class="max-w-full max-h-full object-contain rounded-lg"
          />
        </div>
        <div class="flex flex-col justify-center min-w-0 gap-1.5">
          <div class="text-base font-semibold text-gray-800 line-clamp-2">{item.name}</div>
          <div class="flex items-baseline gap-1">
            <span class="text-xs text-orange-400">¥</span>
            <span class="text-2xl font-bold text-orange-500">{item.price}</span>
            <span class="text-xs text-gray-400 ml-1">积分/件</span>
          </div>
          <div class="text-12px text-gray-400">
            剩余库存：<span class="text-gray-600 font-medium">{item.stock}</span> 件
          </div>
        </div>
      </div>

      {/* 表单区域 */}
      {item.itemType === ShopGoodsTypeEnum.REAL_GOODS && (
        <div class="space-y-4 mb-5">
          <div>
            <label class="text-13px text-gray-600 font-medium mb-2 block">配送办公点</label>
            <el-select
              modelValue={modelValue.deliveryInfo}
              onUpdate:modelValue={(value: string) =>
                context.emit('update:modelValue', { ...modelValue, deliveryInfo: value })
              }
              placeholder="请选择办公点"
              class="w-full"
            >
              {regionListOptions.map((office) => (
                <el-option key={office.value} label={office.label} value={office.value} />
              ))}
            </el-select>
          </div>

          <div>
            <label class="text-13px text-gray-600 font-medium mb-2 block">兑换数量</label>
            <el-input-number
              min={1}
              max={item.stock}
              modelValue={modelValue.num}
              onUpdate:modelValue={(value: number) =>
                context.emit('update:modelValue', { ...modelValue, num: value })
              }
              class="w-full!"
              controls-position="right"
            />
          </div>
        </div>
      )}

      {/* 费用汇总 */}
      <div class="border-t border-dashed border-gray-200 pt-4 mt-4">
        <div class="flex items-center justify-between">
          <span class="text-sm text-gray-500">
            合计扣除
            {modelValue.num > 1 && (
              <span class="text-gray-400 text-xs ml-1">
                ({item.price} × {modelValue.num})
              </span>
            )}
          </span>
          <div class="flex items-baseline gap-0.5">
            <span class="text-sm text-orange-400">¥</span>
            <span class="text-2xl font-bold text-orange-500">{totalPrice.value}</span>
            <span class="text-xs text-gray-400 ml-1">积分</span>
          </div>
        </div>
      </div>
    </div>
  )
}

ExchangeContent.props = {
  item: {
    type: Object as PropType<BackendShopItemDto>,
    required: true,
  },
  modelValue: {
    type: Object as PropType<ExchangeGoodsParams>,
    required: true,
  },
}

ExchangeContent.emits = {
  'update:modelValue': (value: ExchangeGoodsParams) => value,
}
