<script setup lang="ts">
import type { OrderAllDetailDto } from '#/api/order';

import { Button, Drawer, Empty, Spin, Tag } from 'ant-design-vue';

import { formatCurrency } from '../composables/order-all-page/helpers';

interface Props {
  detail: null | OrderAllDetailDto;
  loading: boolean;
  open: boolean;
}

const props = defineProps<Props>();

const emit = defineEmits<{
  (event: 'close'): void;
}>();

function resolveChannelTagColor(channel: string) {
  if (channel.includes('外卖')) return 'blue';
  if (channel.includes('自提')) return 'green';
  if (channel.includes('堂食')) return 'orange';
  return 'default';
}

function resolveStatusTagColor(status: string) {
  if (status.includes('退款')) return 'red';
  if (status.includes('取消')) return 'default';
  if (status.includes('完成')) return 'green';
  if (status.includes('接单') || status.includes('取餐')) return 'orange';
  if (status.includes('制作') || status.includes('配送')) return 'blue';
  return 'default';
}
</script>

<template>
  <Drawer
    :open="props.open"
    width="560"
    :title="`订单详情 ${props.detail?.orderNo ?? ''}`"
    @close="emit('close')"
  >
    <Spin :spinning="props.loading">
      <template v-if="props.detail">
        <div class="oa-section">
          <div class="oa-section-title">基本信息</div>
          <div class="oa-info-grid">
            <div>
              <span class="label">订单号：</span>
              <span class="oa-order-no">{{ props.detail.orderNo }}</span>
            </div>
            <div>
              <span class="label">渠道：</span>
              <Tag :color="resolveChannelTagColor(props.detail.channel)">
                {{ props.detail.channel }}
              </Tag>
            </div>
            <div>
              <span class="label">状态：</span>
              <Tag :color="resolveStatusTagColor(props.detail.status)">
                {{ props.detail.status }}
              </Tag>
            </div>
            <div>
              <span class="label">支付方式：</span>
              <span>{{ props.detail.paymentMethod }}</span>
            </div>
            <div>
              <span class="label">下单时间：</span>
              <span>{{ props.detail.orderedAt }}</span>
            </div>
            <div>
              <span class="label">支付时间：</span>
              <span>{{ props.detail.paidAt || '--' }}</span>
            </div>
            <div>
              <span class="label">完成时间：</span>
              <span>{{ props.detail.finishedAt || '--' }}</span>
            </div>
          </div>
        </div>

        <div class="oa-section">
          <div class="oa-section-title">顾客信息</div>
          <div class="oa-info-grid">
            <div>
              <span class="label">姓名：</span>
              <span>{{ props.detail.customerName }}</span>
            </div>
            <div>
              <span class="label">手机号：</span>
              <span>{{ props.detail.customerPhone }}</span>
            </div>
            <div class="full">
              <span class="label">收货地址：</span>
              <span>{{ props.detail.customerAddress }}</span>
            </div>
          </div>
        </div>

        <div class="oa-section">
          <div class="oa-section-title">商品明细</div>
          <table class="oa-detail-table">
            <thead>
              <tr>
                <th>商品</th>
                <th>规格</th>
                <th>数量</th>
                <th>单价</th>
                <th class="right">小计</th>
              </tr>
            </thead>
            <tbody>
              <tr
                v-for="(item, index) in props.detail.items"
                :key="`${item.name}-${item.spec}-${index}`"
              >
                <td>{{ item.name }}</td>
                <td>{{ item.spec }}</td>
                <td>{{ item.quantity }}</td>
                <td>{{ formatCurrency(item.unitPrice) }}</td>
                <td class="right">{{ formatCurrency(item.subTotal) }}</td>
              </tr>
            </tbody>
          </table>

          <div class="oa-amount-summary">
            <div>
              <span>商品合计</span>
              <span>{{ formatCurrency(props.detail.itemsAmount) }}</span>
            </div>
            <div>
              <span>配送费</span>
              <span>{{ formatCurrency(props.detail.deliveryFee) }}</span>
            </div>
            <div>
              <span>优惠减免</span>
              <span class="discount">
                -{{ formatCurrency(props.detail.discountAmount) }}
              </span>
            </div>
            <div class="total">
              <span>实付金额</span>
              <span>{{ formatCurrency(props.detail.paidAmount) }}</span>
            </div>
          </div>
        </div>

        <div class="oa-section">
          <div class="oa-section-title">状态时间线</div>
          <div class="oa-timeline">
            <div
              v-for="(item, index) in props.detail.timeline"
              :key="`${item.time}-${index}`"
              class="oa-timeline-item"
            >
              <span class="text">{{ item.label }}</span>
              <span class="time">{{ item.time }}</span>
            </div>
          </div>
        </div>

        <div class="oa-section">
          <div class="oa-section-title">备注</div>
          <div class="oa-remark">{{ props.detail.remark || '无' }}</div>
        </div>
      </template>
      <Empty v-else description="暂无详情" />
    </Spin>

    <template #footer>
      <Button @click="emit('close')">关闭</Button>
    </template>
  </Drawer>
</template>
