front/src/views/order/platformStoreOrder/PullOrdersModal.vue

<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import dayjs from 'dayjs'
import { getPlatformStoreList, pullPlatformStoreOrders } from '@/api/order/platformStore'
import { $baseMessage } from '@/utils'
import { pickField } from '@/utils/warehouseListMapper'

const props = defineProps<{
  visible: boolean
  customerId?: number
}>()

const emit = defineEmits<{
  'update:visible': [value: boolean]
  success: []
}>()

const { t } = useI18n()
const loading = ref(false)
const storeLoading = ref(false)
const storeOptions = ref<Array<{ label: string; value: number }>>([])
const storeIds = ref<number[]>([])
const orderStatuses = ref<string[]>([
  'unpaid',
  'pending',
  'canceled',
  'ready_to_ship',
  'delivered',
  'returned',
  'shipped',
  'failed',
  'topack',
  'toship',
  'shipping',
  'lost',
])
const dateRange = ref<[string, string] | undefined>()

const statusOptions = computed(() =>
  [
    'unpaid',
    'pending',
    'canceled',
    'ready_to_ship',
    'delivered',
    'returned',
    'shipped',
    'failed',
    'topack',
    'toship',
    'shipping',
    'lost',
  ].map((value) => ({ label: value, value })),
)

const modalVisible = computed({
  get: () => props.visible,
  set: (v: boolean) => emit('update:visible', v),
})

watch(
  () => props.visible,
  async (open) => {
    if (!open) return
    storeLoading.value = true
    try {
      const { items } = await getPlatformStoreList({
        page: 1,
        pageSize: 200,
        customerId: props.customerId,
      })
      storeOptions.value = (items || []).map((raw: Record<string, unknown>) => {
        const id = Number(pickField(raw, 'id', 'Id'))
        const name = String(pickField(raw, 'storeNickname', 'StoreNickname') ?? `#${id}`)
        const platform = String(pickField(raw, 'platformCode', 'PlatformCode') ?? '')
        return { label: platform ? `${name} (${platform})` : name, value: id }
      }).filter((x) => x.value > 0)
    } catch {
      storeOptions.value = []
    } finally {
      storeLoading.value = false
    }
  },
)

async function handleSubmit(): Promise<boolean> {
  if (!storeIds.value.length) {
    $baseMessage(t('order.platformStoreOrder.message.selectStore'), 'warning')
    return false
  }
  if (!orderStatuses.value.length) {
    $baseMessage(t('order.platformStoreOrder.message.selectStatus'), 'warning')
    return false
  }

  const start = dateRange.value?.[0]
    ? dayjs(dateRange.value[0]).startOf('day')
    : dayjs().startOf('day')
  const end = dateRange.value?.[1]
    ? dayjs(dateRange.value[1]).endOf('day')
    : dayjs().endOf('day')

  loading.value = true
  try {
    const result = await pullPlatformStoreOrders({
      storeIds: storeIds.value,
      orderStatuses: orderStatuses.value,
      timeStart: start.format('YYYY-MM-DD HH:mm:ss'),
      timeEnd: end.format('YYYY-MM-DD HH:mm:ss'),
      customerId: props.customerId,
    })
    $baseMessage(
      result?.message
        || t('order.platformStoreOrder.message.pullResult', {
          success: result?.successCount ?? 0,
          fail: result?.failCount ?? 0,
        }),
      (result?.failCount ?? 0) > 0 ? 'warning' : 'success',
    )
    emit('success')
    return true
  } catch (e: any) {
    $baseMessage(e?.message || t('order.platformStoreOrder.message.pullFailed'), 'error')
    return false
  } finally {
    loading.value = false
  }
}
</script>

<template>
  <a-modal
    v-model:visible="modalVisible"
    :title="t('order.platformStoreOrder.actions.pullOrders')"
    :ok-loading="loading"
    :ok-text="t('order.platformStoreOrder.actions.startPull')"
    unmount-on-close
    :on-before-ok="handleSubmit"
  >
    <a-form :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 16 }">
      <a-form-item :label="t('order.platformStoreOrder.pull.store')" required>
        <a-select
          v-model="storeIds"
          multiple
          allow-clear
          :loading="storeLoading"
          :options="storeOptions"
          :placeholder="t('order.platformStoreOrder.pull.storePlaceholder')"
          :max-tag-count="3"
        />
      </a-form-item>
      <a-form-item :label="t('order.platformStoreOrder.pull.status')" required>
        <a-checkbox-group v-model="orderStatuses" :options="statusOptions" />
      </a-form-item>
      <a-form-item :label="t('order.platformStoreOrder.pull.time')">
        <a-range-picker v-model="dateRange" style="width: 100%" />
        <div class="hint">{{ t('order.platformStoreOrder.pull.timeHint') }}</div>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<style scoped lang="less">
.hint {
  margin-top: 8px;
  color: var(--color-text-3);
  font-size: 12px;
}
</style>