<template>
  <el-dialog
    v-model="visible"
    title="用户盒柜"
    width="1000px"
    :close-on-click-modal="false"
    @close="handleClose"
    @open="handleOpen"
  >
    <div class="user-info" v-if="user">
      <el-avatar :src="user.avatar" :size="40">
        <el-icon><User /></el-icon>
      </el-avatar>
      <div class="user-detail">
        <div class="nickname">{{ user.nickname || '-' }}</div>
        <div class="uid">UID: {{ user.id }}</div>
      </div>
    </div>

    <!-- 搜索表单 -->
    <el-form :inline="true" :model="queryParams" class="search-form">
      <el-form-item label="奖品状态">
        <el-select v-model="queryParams.status" placeholder="全部" clearable style="width: 120px">
          <el-option label="待处理" :value="0" />
          <el-option label="已回收" :value="1" />
          <el-option label="已发货" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="奖品名称">
        <el-input v-model="queryParams.goodslistTitle" placeholder="奖品名称" clearable style="width: 150px" />
      </el-form-item>
      <el-form-item label="盒子名称">
        <el-input v-model="queryParams.goodTitle" placeholder="盒子名称" clearable style="width: 150px" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 盒柜列表 -->
    <el-table :data="boxList" v-loading="loading" border stripe max-height="400">
      <el-table-column label="奖品信息" min-width="200">
        <template #default="{ row }">
          <div class="prize-info">
            <el-image
              :src="row.goodslistImgurl"
              style="width: 50px; height: 50px"
              fit="cover"
              :preview-src-list="row.goodslistImgurl ? [row.goodslistImgurl] : []"
            />
            <div class="prize-detail">
              <div class="prize-title">{{ row.goodslistTitle || '-' }}</div>
              <div class="prize-price">价值: ¥{{ row.goodslistMoney?.toFixed(2) || '0.00' }}</div>
            </div>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="所属盒子" min-width="150">
        <template #default="{ row }">
          <div>{{ row.goodTitle || '-' }}</div>
          <div class="text-muted">ID: {{ row.goodsId || '-' }}</div>
        </template>
      </el-table-column>

      <el-table-column label="订单信息" min-width="150">
        <template #default="{ row }">
          <div>{{ row.orderNum || '-' }}</div>
          <div class="text-muted">ID: {{ row.orderId }}</div>
        </template>
      </el-table-column>

      <el-table-column prop="goodslistPrice" label="回收价" width="100" align="right">
        <template #default="{ row }">
          <span class="money">¥{{ row.goodslistPrice?.toFixed(2) || '0.00' }}</span>
        </template>
      </el-table-column>

      <el-table-column label="状态" width="100" align="center">
        <template #default="{ row }">
          <el-tag :type="getStatusType(row.status)" size="small">
            {{ row.statusText || getStatusText(row.status) }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column label="发货状态" width="100" align="center">
        <template #default="{ row }">
          <template v-if="row.status === 2">
            <el-tag :type="row.fhStatus === 1 ? 'success' : 'warning'" size="small">
              {{ row.fhStatus === 1 ? '已发货' : '待发货' }}
            </el-tag>
          </template>
          <span v-else class="text-muted">-</span>
        </template>
      </el-table-column>

      <el-table-column prop="addtime" label="获得时间" width="170" />
    </el-table>

    <!-- 分页 -->
    <el-pagination
      v-model:current-page="queryParams.page"
      v-model:page-size="queryParams.pageSize"
      :page-sizes="[10, 20, 50, 100]"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="fetchData"
      @current-change="fetchData"
      class="pagination"
    />

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

<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import { User } from '@element-plus/icons-vue'
import { getUserBox, type UserListItem, type UserBoxQuery, type UserBoxItem } from '@/api/business/user'

interface Props {
  modelValue: boolean
  user: UserListItem | null
}

const props = defineProps<Props>()

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

const visible = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
})

const loading = ref(false)
const boxList = ref<UserBoxItem[]>([])
const total = ref(0)

const queryParams = reactive<UserBoxQuery>({
  status: undefined,
  goodslistTitle: undefined,
  goodTitle: undefined,
  startTime: undefined,
  endTime: undefined,
  page: 1,
  pageSize: 20
})

// 获取状态标签类型
const getStatusType = (status: number) => {
  const types: Record<number, string> = {
    0: 'warning',  // 待处理
    1: 'info',     // 已回收
    2: 'success'   // 已发货
  }
  return types[status] || ''
}

// 获取状态文本
const getStatusText = (status: number) => {
  const texts: Record<number, string> = {
    0: '待处理',
    1: '已回收',
    2: '已发货'
  }
  return texts[status] || '未知'
}

// 获取数据
const fetchData = async () => {
  if (!props.user) return

  loading.value = true
  try {
    const res = await getUserBox(props.user.id, queryParams)
    boxList.value = res.data?.list || []
    total.value = res.data?.total || 0
  } catch (error) {
    console.error('获取用户盒柜失败', error)
    boxList.value = []
    total.value = 0
  } finally {
    loading.value = false
  }
}

// 搜索
const handleSearch = () => {
  queryParams.page = 1
  fetchData()
}

// 重置
const handleReset = () => {
  queryParams.status = undefined
  queryParams.goodslistTitle = undefined
  queryParams.goodTitle = undefined
  queryParams.startTime = undefined
  queryParams.endTime = undefined
  queryParams.page = 1
  fetchData()
}

// 对话框打开时
const handleOpen = () => {
  handleReset()
}

// 关闭对话框
const handleClose = () => {
  visible.value = false
}
</script>

<style scoped>
.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background-color: #f5f7fa;
  border-radius: 4px;
  margin-bottom: 16px;
}

.user-detail {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nickname {
  font-weight: 500;
  font-size: 14px;
}

.uid {
  font-size: 12px;
  color: #909399;
}

.search-form {
  margin-bottom: 16px;
}

.prize-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.prize-detail {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.prize-title {
  font-weight: 500;
}

.prize-price {
  font-size: 12px;
  color: #e6a23c;
}

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

.text-muted {
  color: #909399;
  font-size: 12px;
}

.pagination {
  margin-top: 16px;
  justify-content: flex-end;
}
</style>
