<template>
  <el-dialog v-model="visible" title="选择用户商品" width="780px" append-to-body destroy-on-close @close="handleClose">
    <div class="selector-toolbar">
      <el-input v-model.trim="keyword" placeholder="搜索商品名称、备注或 ID" clearable @keyup.enter="handleSearch" @clear="handleSearch">
        <template #prefix><el-icon><Search /></el-icon></template>
      </el-input>
      <el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
      <el-button :icon="Refresh" @click="handleReset">重置</el-button>
    </div>
    <el-alert v-if="userId" :title="`仅显示用户 #${userId} 的商品`" type="info" :closable="false" show-icon class="user-alert" />
    <el-table :data="list" v-loading="loading" highlight-current-row stripe height="340" @current-change="selected = $event">
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column label="商品" min-width="180" show-overflow-tooltip>
        <template #default="{ row }">{{ goodsName(row) }}</template>
      </el-table-column>
      <el-table-column label="用户" min-width="140" show-overflow-tooltip>
        <template #default="{ row }">{{ userName(row) }} <span class="muted">#{{ row.user_id || row.userId || '-' }}</span></template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="100"><template #default="{ row }">{{ row.status || '-' }}</template></el-table-column>
      <el-table-column prop="note" label="备注" min-width="140" show-overflow-tooltip><template #default="{ row }">{{ row.note || '-' }}</template></el-table-column>
    </el-table>
    <el-empty v-if="!loading && !list.length" description="暂无用户商品" :image-size="60" />
    <div class="pagination"><span v-if="selected">已选：{{ goodsName(selected) }} (#{{ selected.id }})</span><el-pagination v-model:current-page="page" v-model:page-size="count" :page-sizes="[10,20,50]" :total="total" layout="total,sizes,prev,pager,next" small @current-change="loadList" @size-change="handleSizeChange" /></div>
    <template #footer><el-button @click="handleClose">取消</el-button><el-button type="primary" :disabled="!selected" @click="handleConfirm">确定选择</el-button></template>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from 'vue'
import { Search, Refresh } from '@element-plus/icons-vue'
import { getUserGoodsList } from '@/api/admin/userVm'

const props = defineProps({ modelValue: { type: Boolean, default: false }, userId: { type: Number, default: 0 }, currentId: { type: Number, default: 0 } })
const emit = defineEmits(['update:modelValue', 'confirm'])
const visible = ref(false), loading = ref(false), list = ref([]), selected = ref(null), keyword = ref(''), page = ref(1), count = ref(10), total = ref(0)
const goodsName = row => row?.good?.name || row?.good_name || row?.name || `用户商品 #${row?.id || '-'}`
const userName = row => row?.user?.user_name || row?.user_name || '-'
watch(() => props.modelValue, value => { visible.value = value; if (value) { selected.value = null; page.value = 1; loadList() } })
watch(visible, value => emit('update:modelValue', value))
const loadList = async () => {
  loading.value = true
  try {
    const params = { page: page.value, count: count.value }
    if (keyword.value) params.key = keyword.value
    if (props.userId) params.user_id = props.userId
    const res = await getUserGoodsList(params)
    if (res?.data?.code === 200) {
      const data = res.data.data || {}
      list.value = data.data || (Array.isArray(data) ? data : [])
      total.value = data.meta?.count ?? data.all_count ?? data.total ?? list.value.length
      selected.value = list.value.find(row => Number(row.id) === Number(props.currentId)) || null
    } else { list.value = []; total.value = 0 }
  } catch { list.value = []; total.value = 0 } finally { loading.value = false }
}
const handleSearch = () => { page.value = 1; loadList() }
const handleReset = () => { keyword.value = ''; page.value = 1; loadList() }
const handleSizeChange = () => { page.value = 1; loadList() }
const handleClose = () => { visible.value = false }
const handleConfirm = () => { if (selected.value) { emit('confirm', selected.value); handleClose() } }
</script>

<style scoped>
.selector-toolbar{display:flex;gap:8px;margin-bottom:12px}.selector-toolbar .el-input{max-width:360px}.user-alert{margin-bottom:12px}.pagination{display:flex;align-items:center;justify-content:space-between;min-height:32px;margin-top:12px;color:#606266;font-size:13px}.muted{color:#909399;font-size:12px}
</style>
