<template>
  <div class="goods-detail-page">
    <div class="page-header">
      <div class="header-left">
        <el-button @click="goBack" link class="back-btn">
          <el-icon><ArrowLeft /></el-icon> 返回所有商品列表
        </el-button>
        <el-divider direction="vertical" />
        <span class="page-title">所有商品详情</span>
      </div>
      <div class="header-right">
        <el-button type="primary" plain @click="loadDetail" :loading="loading">
          <el-icon><Refresh /></el-icon> 刷新
        </el-button>
      </div>
    </div>


    <div class="main-content" v-loading="loading">
      <!-- 空状态 -->
      <el-empty v-if="!loading && !detail" description="未找到商品数据" :image-size="160">
        <el-button type="primary" @click="loadDetail">重新加载</el-button>
      </el-empty>

      <el-card class="profile-card" shadow="hover" v-if="detail">
        <div class="profile-header">
          <div class="profile-basic">
            <div class="icon-wrapper">
              <el-icon :size="48" color="#409eff"><Monitor /></el-icon>
            </div>
            <div class="identity">
              <div class="name-row">
                <h1 class="name">{{ detail.good?.name || '用户商品 #' + goodsId }}</h1>
                <el-button size="small" type="primary" plain @click="openEdit">编辑</el-button>
                <el-button size="small" type="danger" plain @click="handleDelete">删除</el-button>
              </div>
              <div class="id-row">
                <span class="label">ID:</span>
                <span class="value">{{ detail.id || goodsId }}</span>
                <el-divider direction="vertical" />
                <span class="label">用户ID:</span>
                <span class="value">{{ detail.userId || detail.user_id || '-' }}</span>
                <el-divider direction="vertical" />
                <span class="label">到期:</span>
                <span class="value">{{ formatExpireTime(detail.expireTime || detail.expire_time) }}</span>
                <el-divider direction="vertical" />
                <span class="label">续费价:</span>
                <span class="value">{{ detail.renewPrice ? '¥' + (detail.renewPrice / 100).toFixed(2) : '-' }}</span>
              </div>
            </div>
          </div>
          <div class="profile-stats">
            <div class="stat-item">
              <div class="stat-label">套餐ID</div>
              <div class="stat-value">{{ detail.goodPlanId || detail.good_plan_id || '-' }}</div>
            </div>
            <div class="stat-item">
              <div class="stat-label">备注</div>
              <div class="stat-value note-value">{{ detail.note || '-' }}</div>
            </div>
          </div>
        </div>
        <el-divider style="margin: 16px 0 12px" />
        <el-descriptions :column="3" border size="small" style="width:100%">
          <el-descriptions-item label="商品ID">{{ detail.goodId || '-' }}</el-descriptions-item>
          <el-descriptions-item label="订单ID">{{ detail.orderId || '-' }}</el-descriptions-item>
          <el-descriptions-item label="归属项ID">{{ detail.itemId || '-' }}</el-descriptions-item>
          <el-descriptions-item label="基础价格">{{ (detail.basePrice || detail.base_price) ? '¥' + ((detail.basePrice || detail.base_price) / 100).toFixed(2) : '-' }}</el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ formatTime(detail.CreatedAt) }}</el-descriptions-item>
          <el-descriptions-item label="更新时间">{{ formatTime(detail.UpdatedAt) }}</el-descriptions-item>
        </el-descriptions>
      </el-card>

      <el-card shadow="hover" v-if="detail" class="related-card">
        <template #header>
          <span class="card-title">关联信息</span>
        </template>
        <el-descriptions :column="2" border size="small">
          <el-descriptions-item label="商品名称">{{ detail.good?.name || '-' }}</el-descriptions-item>
          <el-descriptions-item label="商品Table">{{ detail.good?.table || '-' }}</el-descriptions-item>
          <el-descriptions-item label="商品标签">{{ detail.good?.tag || detail.tag || '-' }}</el-descriptions-item>
          <el-descriptions-item label="订单名称">{{ detail.order?.name || '-' }}</el-descriptions-item>
          <el-descriptions-item label="订单状态">
            <el-tag v-if="detail.order" :type="detail.order.state === 1 ? 'success' : detail.order.state === 0 ? 'warning' : 'info'" size="small">
              {{ detail.order.state === 1 ? '已支付' : detail.order.state === 0 ? '待支付' : '已失效' }}
            </el-tag>
            <span v-else>-</span>
          </el-descriptions-item>
          <el-descriptions-item label="用户ID">{{ detail.userId || '-' }}</el-descriptions-item>
        </el-descriptions>
      </el-card>
    </div>

    <el-dialog v-model="editVisible" title="编辑用户商品" width="520px" destroy-on-close>
      <el-form :model="editForm" label-width="110px">
        <el-form-item label="备注"><el-input v-model="editForm.note" /></el-form-item>
        <el-form-item label="续费价格">
          <div class="unit-input-row">
            <el-input-number v-model="editForm.renew_price" :min="0" :precision="2" controls-position="right" style="flex:1" />
            <span class="unit-text">元</span>
          </div>
        </el-form-item>
        <el-form-item label="基础价格">
          <div class="unit-input-row">
            <el-input-number v-model="editForm.base_price" :min="0" :precision="2" controls-position="right" style="flex:1" />
            <span class="unit-text">元</span>
          </div>
        </el-form-item>
        <el-form-item label="到期时间"><el-date-picker v-model="editForm.expire_time" type="datetime" placeholder="选择到期时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" style="width:100%" /></el-form-item>
        <el-form-item label="归属项">
          <div style="width:100%">
            <template v-if="detail?.good?.table === 'kvm_service'">
              <div class="selector-row" style="margin-bottom:8px">
                <el-input :model-value="editForm._serviceName || (editForm._serviceId ? `主控服务 #${editForm._serviceId}` : '')"
                  readonly placeholder="1. 选择主控服务" style="flex:1" />
                <el-button type="primary" @click="showServiceSelector = true" style="margin-left:8px">选择</el-button>
                <el-button v-if="editForm._serviceId" @click="editForm._serviceId = 0; editForm._serviceName = ''; editForm.item_id = 0; editForm._itemName = ''" style="margin-left:4px">清除</el-button>
              </div>
              <div class="selector-row">
                <el-input :model-value="editForm._itemName || (editForm.item_id ? `虚拟机 #${editForm.item_id}` : '')"
                  readonly placeholder="2. 选择虚拟机" style="flex:1" />
                <el-button type="primary" @click="showVmSelector = true" :disabled="!editForm._serviceId" style="margin-left:8px">选择</el-button>
                <el-button v-if="editForm.item_id" @click="editForm.item_id = 0; editForm._itemName = ''" style="margin-left:4px">清除</el-button>
              </div>
              <div style="font-size:12px;color:#909399;margin-top:4px">归属项为虚拟机ID，需先选择主控服务</div>
            </template>
            <el-input-number v-else v-model="editForm.item_id" :min="0" controls-position="right" style="width:100%" />
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="editVisible = false">取消</el-button>
        <el-button type="primary" :loading="submitLoading" @click="submitEdit">确定</el-button>
      </template>
    </el-dialog>

    <VmSelectorPopup v-model="showVmSelector" :service-id="editForm._serviceId || 0"
      @confirm="vm => { editForm.item_id = vm.id; editForm._itemName = vm.name }" />
    <KvmServiceSelector v-model="showServiceSelector"
      @confirm="s => { editForm._serviceId = s.id; editForm._serviceName = s.name; editForm.item_id = 0; editForm._itemName = '' }" />
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ArrowLeft, Refresh, Monitor } from '@element-plus/icons-vue'
import { getUserGoodsDetail, updateUserGoods, deleteUserGoods } from '@/api/admin/userVm'
import { extractApiError } from '@/utils/kvmErrorUtil'
import VmSelectorPopup from '@/components/admin/VmSelectorPopup.vue'
import KvmServiceSelector from '@/components/admin/KvmServiceSelector.vue'
import dayjs from 'dayjs'

const route = useRoute()
const router = useRouter()
const goodsId = computed(() => parseInt(route.params.id) || 0)

const loading = ref(false)
const submitLoading = ref(false)
const detail = ref(null)

const formatTime = (t) => t ? dayjs(t).format('YYYY-MM-DD HH:mm:ss') : '-'
const formatExpireTime = (t) => {
  if (!t) return '-'
  const d = dayjs(t)
  if (d.year() < 2000) return '永久'
  return d.format('YYYY-MM-DD HH:mm:ss')
}

const goBack = () => router.push('/user-goods/list')

const loadDetail = async () => {
  if (!goodsId.value) return
  loading.value = true
  try {
    const res = await getUserGoodsDetail({ id: goodsId.value })
    if (res?.data?.code === 200 && res?.data?.data) {
      detail.value = res.data.data.data ?? res.data.data
    } else ElMessage.error(extractApiError(res?.data, '加载失败'))
  } catch (e) { ElMessage.error(extractApiError(e?.response?.data, '加载失败')) }
  finally { loading.value = false }
}

const editVisible = ref(false)
const editForm = reactive({ note: '', renew_price: 0, base_price: 0, expire_time: '', item_id: 0, _serviceId: 0, _serviceName: '', _itemName: '' })
const showVmSelector = ref(false)
const showServiceSelector = ref(false)

const openEdit = () => {
  const rawRenew = detail.value?.renewPrice || detail.value?.renew_price || 0
  const rawBase = detail.value?.basePrice || detail.value?.base_price || 0
  Object.assign(editForm, {
    note: detail.value?.note || '',
    renew_price: rawRenew / 100,
    base_price: rawBase / 100,
    expire_time: detail.value?.expireTime || detail.value?.expire_time
      ? dayjs(detail.value?.expireTime || detail.value?.expire_time).format('YYYY-MM-DD HH:mm:ss')
      : '',
    item_id: detail.value?.itemId || detail.value?.item_id || 0,
    _serviceId: 0,
    _serviceName: '',
    _itemName: detail.value?.itemId ? `虚拟机 #${detail.value.itemId}` : ''
  })
  if (detail.value?.good?.table === 'kvm_service') { /* 通过选择器弹窗选择，无需预加载 */ }
  editVisible.value = true
}

const submitEdit = async () => {
  submitLoading.value = true
  try {
    const data = { id: goodsId.value }
    if (editForm.note !== undefined) data.note = editForm.note
    if (editForm.renew_price) data.renew_price = Math.round(editForm.renew_price * 100)
    if (editForm.base_price) data.base_price = Math.round(editForm.base_price * 100)
    if (editForm.expire_time) data.expire_time = editForm.expire_time
    if (editForm.item_id) data.item_id = editForm.item_id
    const res = await updateUserGoods(data)
    if (res?.data?.code === 200) { ElMessage.success('修改成功'); editVisible.value = false; loadDetail() }
    else ElMessage.error(extractApiError(res?.data, '修改失败'))
  } catch (e) { ElMessage.error(extractApiError(e?.response?.data, '修改失败')) }
  finally { submitLoading.value = false }
}

const handleDelete = () => {
  ElMessageBox.confirm('确定删除该用户商品吗？', '删除确认', { type: 'warning' })
    .then(async () => {
      try {
        const res = await deleteUserGoods({ id: goodsId.value })
        if (res?.data?.code === 200) { ElMessage.success('删除成功'); goBack() }
        else ElMessage.error(extractApiError(res?.data, '删除失败'))
      } catch (e) { ElMessage.error(extractApiError(e?.response?.data, '删除失败')) }
    }).catch(() => {})
}

onMounted(loadDetail)
watch(goodsId, (newId, oldId) => {
  if (newId && newId !== oldId) { detail.value = null; loadDetail() }
})
</script>

<style scoped>
.goods-detail-page {
  padding: 0;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: #fff;
  border-bottom: 1px solid #e1e8ed;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 0;
}

.back-btn {
  font-size: 14px;
  color: #606266;
}

.back-btn:hover {
  color: #409eff;
}

.page-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.header-right {
  display: flex;
  gap: 8px;
}

.main-content {
  padding: 20px;
  min-height: 300px;
}

.profile-card {
  margin-bottom: 0;
  border: 1px solid #e1e8ed;
  border-radius: 8px;
  transition: box-shadow 0.2s;
}

.profile-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
}

.profile-basic {
  display: flex;
  align-items: center;
  gap: 20px;
}

.icon-wrapper {
  width: 80px;
  height: 80px;
  border-radius: 12px;
  background: linear-gradient(135deg, #e8f4fd 0%, #d6eaff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.15);
}

.identity {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.name-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.name {
  font-size: 22px;
  font-weight: 600;
  color: #303133;
  margin: 0;
}

.id-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #909399;
  flex-wrap: wrap;
}

.id-row .label {
  color: #909399;
}

.id-row .value {
  color: #606266;
  font-weight: 500;
}

.profile-stats {
  display: flex;
  gap: 24px;
  flex-shrink: 0;
}

.stat-item {
  text-align: center;
  min-width: 80px;
  padding: 10px 16px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #ebeef5;
}

.stat-label {
  font-size: 12px;
  color: #909399;
  margin-bottom: 6px;
}

.stat-value {
  font-size: 15px;
  font-weight: 600;
  color: #303133;
}

.note-value {
  font-weight: 400;
  font-size: 13px;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.related-card {
  margin-top: 20px;
  border: 1px solid #e1e8ed;
  border-radius: 8px;
}

.card-title {
  font-size: 15px;
  font-weight: 600;
  color: #303133;
}

.selector-row {
  display: flex;
  align-items: center;
  width: 100%;
}

:deep(.el-descriptions__label) {
  font-weight: 500;
  color: #606266;
}

.unit-input-row { display: flex; align-items: center; gap: 6px; width: 100%; }
.unit-text { font-size: 13px; color: #606266; flex-shrink: 0; white-space: nowrap; }
</style>
