<script setup>
import { Plus, Search } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { onMounted, reactive, ref, watch } from 'vue'
import { deletePackage, getPackages } from '@/api/packageManagement'

const props = defineProps({
  categoryId: {
    type: [String, Number],
    default: 'all',
  },
  refreshKey: {
    type: Number,
    default: 0,
  },
  style: {
    type: Object,
    default: () => ({}),
  },
})

const emit = defineEmits(['view', 'add'])

const loading = ref(false)
const packageList = ref([])
const searchName = ref('')
const currentPackage = ref(null)

const loadPackages = async () => {
  loading.value = true
  try {
    const data = await getPackages({
      category_id:
        props.categoryId && String(props.categoryId) !== 'all' ? String(props.categoryId) : '',
      name: searchName.value.trim(),
    })
    packageList.value = data
  } finally {
    loading.value = false
  }
}

const handleSearch = () => loadPackages()

const handleReset = () => {
  searchName.value = ''
  loadPackages()
}

const handleView = (row) => {
  currentPackage.value = row
  emit('view', row)
}

const handleDelete = async (row) => {
  try {
    await ElMessageBox.confirm(`确定删除数据包"${row.name}"吗？`, '提示', { type: 'warning' })
    await deletePackage(row.id)
    ElMessage.success('数据包已删除')
    if (currentPackage.value?.id === row.id) {
      currentPackage.value = null
    }
    await loadPackages()
  } catch {
    // user cancelled
  }
}

watch(() => props.categoryId, loadPackages)
watch(() => props.refreshKey, () => {
  currentPackage.value = null
  loadPackages()
})

onMounted(loadPackages)
</script>

<template>
  <el-card class="pane-card" shadow="hover" :style="props.style">
    <template #header>
      <div class="pane-header">
        <span>数据包列表</span>
        <el-button type="primary" :icon="Plus" size="small" @click="emit('add')">新增数据包</el-button>
      </div>
    </template>

    <div class="search-bar">
      <el-input
        v-model="searchName"
        placeholder="数据包名称"
        clearable
        :prefix-icon="Search"
        @keyup.enter="handleSearch"
        @clear="handleReset"
      />
      <el-button type="primary" @click="handleSearch">搜索</el-button>
      <el-button @click="handleReset">重置</el-button>
    </div>

    <el-table
      :data="packageList"
      v-loading="loading"
      border
      stripe
      highlight-current-row
      height="calc(100vh - 265px)"
      :row-class-name="({ row }) => (currentPackage?.id === row.id ? 'current-row' : '')"
    >
      <el-table-column prop="name" label="数据包名称" min-width="150" show-overflow-tooltip />
      <el-table-column prop="created_at" label="创建时间" min-width="160" />
      <el-table-column prop="data_count" label="数据量" width="80" align="center" />
      <el-table-column label="操作" width="130" fixed="right">
        <template #default="{ row }">
          <el-button link type="primary" @click="handleView(row)">查看</el-button>
          <el-button link type="danger" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<style lang="scss" scoped>
.pane-card {
  height: 100%;
  overflow: hidden;
  border-radius: 0;
  border: none;
  border-right: 1px solid var(--border-color);
  box-shadow: none !important;
  display: flex;
  flex-direction: column;
  background: var(--bg-white);

  :deep(.el-card__header) {
    padding: 0 16px;
    height: 44px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    background: #F7F8FA;
  }

  :deep(.el-card__body) {
    flex: 1;
    overflow: hidden;
    padding: 12px 16px;
  }
}

.pane-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.search-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;

  .el-input {
    flex: 1;
  }
}

:deep(.el-table .current-row > td) {
  background: var(--primary-light) !important;
}

:deep(.el-table .el-button.is-link) {
  font-size: 13px;
  padding: 0 4px;
  height: auto;
  line-height: 1;
}
</style>
