<template>
  <view class="order-card" @click="handleClick">
    <!-- 订单头部：商家名称 + 状态 -->
    <view class="order-header">
      <view class="merchant-info">
        <u-icon name="home" :size="20" color="#0086F6"></u-icon>
        <text class="merchant-name">{{ order.merchantName }}</text>
      </view>
      <status-badge :status="order.status" size="small"></status-badge>
    </view>

    <!-- 订单内容：图片 + 房源信息 + 价格 -->
    <view class="order-body">
      <image
        v-if="order.roomImage"
        :src="order.roomImage"
        class="room-image"
        mode="aspectFill"
      ></image>
      <view class="room-info">
        <view class="info-top">
          <view class="room-content">
            <text class="room-name">{{ order.roomName }}</text>
            <text class="room-type">{{ order.nights }}间, 共{{ order.nights }}晚</text>
          </view>
          <price-tag :price="order.totalAmount" size="large" type="primary"></price-tag>
        </view>
        <text class="date-text">{{ formatFullDate(order.checkInDate) }} - {{ formatFullDate(order.checkOutDate) }}</text>
      </view>
    </view>

    <!-- 订单底部操作 -->
    <view v-if="showActions && actions.length > 0" class="order-footer">
      <view class="footer-actions">
        <base-button
          v-for="action in actions"
          :key="action.type"
          :type="action.buttonType || 'outline'"
          size="small"
          :text="action.text"
          @click.stop="handleAction(action.type)"
        ></base-button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import StatusBadge from '../base/StatusBadge.vue'
import BaseButton from '../base/BaseButton.vue'
import PriceTag from './PriceTag.vue'

interface Order {
  orderNo: string
  status: string
  roomName: string
  roomImage?: string
  merchantName: string
  checkInDate: string
  checkOutDate: string
  nights: number
  totalAmount: number
  userName?: string
  createTime?: string
  payTime?: string
  confirmTime?: string
  checkInTime?: string
  completeTime?: string
  cancelTime?: string
  [key: string]: any
}

interface Action {
  type: string
  text: string
  buttonType?: 'primary' | 'secondary' | 'outline' | 'text' | 'danger'
}

interface Props {
  order: Order
  mode?: 'user' | 'merchant'  // 用户端/商家端
  clickable?: boolean
  showActions?: boolean
  compact?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  mode: 'user',
  clickable: true,
  showActions: true,
  compact: false
})

const emit = defineEmits<{
  (e: 'click', order: Order): void
  (e: 'action', type: string, order: Order): void
}>()

// 操作按钮配置
const actions = computed<Action[]>(() => {
  const status = props.order.status
  const mode = props.mode

  if (mode === 'user') {
    // 用户端操作
    switch (status) {
      case 'pending_pay':
        return [
          { type: 'cancel', text: '取消订单', buttonType: 'text' },
          { type: 'pay', text: '立即支付', buttonType: 'primary' }
        ]
      case 'pending_confirm':
        return [
          { type: 'cancel', text: '取消订单', buttonType: 'text' },
          { type: 'contact', text: '联系商家', buttonType: 'outline' }
        ]
      case 'confirmed':
        return [
          { type: 'cancel', text: '申请退款', buttonType: 'text' },
          { type: 'contact', text: '联系商家', buttonType: 'outline' }
        ]
      case 'completed':
        return [
          { type: 'review', text: '评价', buttonType: 'primary' }
        ]
      default:
        return []
    }
  } else {
    // 商家端操作
    switch (status) {
      case 'pending_confirm':
        return [
          { type: 'reject', text: '拒绝', buttonType: 'danger' },
          { type: 'confirm', text: '确认', buttonType: 'primary' }
        ]
      case 'confirmed':
        return [
          { type: 'contact', text: '联系客户', buttonType: 'outline' }
        ]
      default:
        return []
    }
  }
})

// 格式化日期为完整格式
const formatFullDate = (date: string) => {
  if (!date) return ''
  const d = new Date(date)
  const year = d.getFullYear()
  const month = String(d.getMonth() + 1).padStart(2, '0')
  const day = String(d.getDate()).padStart(2, '0')
  return `${year}-${month}-${day}`
}

// 点击卡片
const handleClick = () => {
  if (props.clickable) {
    emit('click', props.order)
  }
}

// 操作按钮点击
const handleAction = (type: string) => {
  emit('action', type, props.order)
}
</script>

<style lang="scss" scoped>
@import '@/static/styles/design-tokens.scss';
@import '@/static/styles/mixins.scss';

.order-card {
  background: $bg-card;
  border-radius: $radius-lg;
  margin-bottom: $spacing-lg;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;

  &:active {
    transform: translateY(2rpx);
    box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.06);
  }
}

/* ========== 订单头部 ========== */
.order-header {
  @include flex-between;
  padding: $spacing-xl;
  border-bottom: 1rpx solid $border-light;
}

.merchant-info {
  @include flex-row(flex-start, center);
  gap: $spacing-sm;
  flex: 1;
  min-width: 0;
}

.merchant-name {
  font-size: $font-lg;
  color: $text-primary;
  font-weight: $font-semibold;
  @include text-ellipsis;
}

/* ========== 订单内容 ========== */
.order-body {
  display: flex;
  gap: $spacing-lg;
  padding: $spacing-xl;
}

.room-image {
  width: 180rpx;
  height: 180rpx;
  border-radius: $radius-lg;
  flex-shrink: 0;
  background: $bg-page;
  object-fit: cover;
}

.room-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}

.info-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: $spacing-md;
  margin-bottom: $spacing-md;
}

.room-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6rpx;
  min-width: 0;
}

.room-name {
  font-size: $font-base;
  color: $text-secondary;
  line-height: 1.5;
  @include text-ellipsis-multi(2);
}

.room-type {
  font-size: $font-sm;
  color: $text-tertiary;
  line-height: 1.4;
}

.date-text {
  font-size: $font-sm;
  color: $text-tertiary;
  margin-top: auto;
}

/* ========== 订单底部 ========== */
.order-footer {
  display: flex;
  justify-content: flex-end;
  padding: $spacing-lg $spacing-xl;
  border-top: 1rpx solid $border-light;
}

.footer-actions {
  display: flex;
  gap: $spacing-sm;
}
</style>
