<template>
  <el-dialog
    v-model="dialogVisible"
    title="回收订单详情"
    width="800px"
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <div class="recovery-detail">
      <template v-if="recoveryData">
        <!-- 订单基本信息 -->
        <el-descriptions :column="2" border class="order-info">
          <el-descriptions-item label="回收单号">{{ recoveryData.recoveryNum }}</el-descriptions-item>
          <el-descriptions-item label="回收数量">
            <el-tag type="info" size="small">{{ recoveryData.count }} 件</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="用户昵称">{{ recoveryData.userNickname || '-' }}</el-descriptions-item>
          <el-descriptions-item label="用户ID">{{ recoveryData.userId }}</el-descriptions-item>
          <el-descriptions-item label="手机号">{{ recoveryData.userMobile || '-' }}</el-descriptions-item>
          <el-descriptions-item label="用户UID">{{ recoveryData.userUid || '-' }}</el-descriptions-item>
          <el-descriptions-item label="回收金额">
            <span class="money">¥{{ recoveryData.money?.toFixed(2) || '0.00' }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="回收时间">{{ recoveryData.createdAt }}</el-descriptions-item>
        </el-descriptions>

        <!-- 回收奖品列表 -->
        <div class="prize-section" v-if="recoveryData.prizes && recoveryData.prizes.length > 0">
          <h4 class="section-title">回收奖品明细</h4>
          <el-table :data="recoveryData.prizes" border size="small">
            <el-table-column label="奖品图片" width="80" align="center">
              <template #default="{ row }">
                <el-image
                  v-if="row.imgUrl"
                  :src="row.imgUrl"
                  :preview-src-list="[row.imgUrl]"
                  fit="cover"
                  class="prize-img"
                  lazy
                >
                  <template #error>
                    <div class="image-error">
                      <el-icon><Picture /></el-icon>
                    </div>
                  </template>
                </el-image>
                <div v-else class="image-error">
                  <el-icon><Picture /></el-icon>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="title" label="奖品名称" min-width="180">
              <template #default="{ row }">
                <span>{{ row.title || '-' }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="prizeCode" label="奖品编码" min-width="120">
              <template #default="{ row }">
                <span class="prize-code">{{ row.prizeCode || '-' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="奖品价值" width="120" align="right">
              <template #default="{ row }">
                <span class="price">¥{{ row.price?.toFixed(2) || '0.00' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="回收金额" width="120" align="right">
              <template #default="{ row }">
                <span class="recovery-money">¥{{ row.recoveryMoney?.toFixed(2) || '0.00' }}</span>
              </template>
            </el-table-column>
          </el-table>

          <!-- 汇总信息 -->
          <div class="summary-bar">
            <span>共 <strong>{{ recoveryData.prizes.length }}</strong> 件奖品</span>
            <span>总价值: <span class="price">¥{{ totalPrice.toFixed(2) }}</span></span>
            <span>回收总额: <span class="recovery-money">¥{{ recoveryData.money?.toFixed(2) || '0.00' }}</span></span>
          </div>
        </div>
        <el-empty v-else description="暂无回收奖品记录" />
      </template>
    </div>

    <template #footer>
      <el-button @click="handleClose">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch, computed } from 'vue'
import { Picture } from '@element-plus/icons-vue'
import type { RecoveryOrderResponse } from '@/api/business/order'

interface Props {
  modelValue: boolean
  recoveryData: RecoveryOrderResponse | null
}

const props = defineProps<Props>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void
  (e: 'close'): void
}>()

const dialogVisible = ref(props.modelValue)

// 计算奖品总价值
const totalPrice = computed(() => {
  if (!props.recoveryData?.prizes) return 0
  return props.recoveryData.prizes.reduce((sum, prize) => sum + (prize.price || 0), 0)
})

watch(() => props.modelValue, (val) => {
  dialogVisible.value = val
})

watch(dialogVisible, (val) => {
  emit('update:modelValue', val)
})

const handleClose = () => {
  dialogVisible.value = false
  emit('close')
}
</script>

<style scoped>
.recovery-detail {
  min-height: 200px;
}

.order-info {
  margin-bottom: 20px;
}

.money {
  color: #67c23a;
  font-weight: 600;
  font-size: 16px;
}

.prize-section {
  margin-top: 20px;
}

.section-title {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

.prize-img {
  width: 50px;
  height: 50px;
  border-radius: 4px;
}

.image-error {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f7fa;
  color: #909399;
  border-radius: 4px;
}

.prize-code {
  font-family: monospace;
  font-size: 12px;
  color: #909399;
}

.price {
  color: #e6a23c;
  font-weight: 500;
}

.recovery-money {
  color: #67c23a;
  font-weight: 600;
}

.summary-bar {
  display: flex;
  justify-content: flex-end;
  gap: 24px;
  margin-top: 16px;
  padding: 12px 16px;
  background: #f5f7fa;
  border-radius: 4px;
  font-size: 14px;
}

.summary-bar strong {
  color: #409eff;
}
</style>
