<template>
  <div class="suppliers-page">
    <div class="page-header">
      <el-button type="primary" @click="showAdd = true">创建供应商</el-button>
    </div>
    <div class="table-card">
      <el-table :data="paginatedSuppliers">
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="username" label="用户名" />
        <el-table-column prop="email" label="邮箱" />
        <el-table-column label="操作" width="120">
          <template #default="{ row }">
            <el-button link type="primary" size="small" @click="authorize(row.id)">授权</el-button>
            <el-button link type="danger" size="small" @click="deleteSupplier(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-wrap">
        <el-pagination
          v-model:current-page="page"
          :page-size="pageSize"
          :total="total"
          layout="total, prev, pager, next"
          @current-change="handlePageChange"
        />
      </div>
    </div>
    <el-dialog v-model="showAdd" title="创建供应商" width="400px">
      <el-form :model="form" label-width="80px">
        <el-form-item label="用户名"><el-input v-model="form.username" /></el-form-item>
        <el-form-item label="邮箱"><el-input v-model="form.email" /></el-form-item>
        <el-form-item label="密码"><el-input v-model="form.password" type="password" /></el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showAdd = false">取消</el-button>
        <el-button type="primary" @click="addSupplier">保存</el-button>
      </template>
    </el-dialog>
    <el-dialog v-model="showAuth" title="授权管理" width="400px">
      <el-form :model="authForm" label-width="80px">
        <el-form-item label="类型">
          <el-select v-model="authForm.type" popper-class="dark-select-dropdown"><el-option value="category" label="分类" /><el-option value="product" label="商品" /></el-select>
        </el-form-item>
        <el-form-item label="关联ID"><el-input-number v-model="authForm.ref_id" /></el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showAuth = false">取消</el-button>
        <el-button type="primary" @click="saveAuth">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { adminApi } from '../../api'

const suppliers = ref<any[]>([])
const showAdd = ref(false)
const showAuth = ref(false)
const authSupplierId = ref(0)
const page = ref(1)
const pageSize = 20
const total = computed(() => suppliers.value.length)
const paginatedSuppliers = computed(() => {
  const start = (page.value - 1) * pageSize
  return suppliers.value.slice(start, start + pageSize)
})
const form = reactive({ username: '', email: '', password: '' })
const authForm = reactive({ type: 'category', ref_id: 0 })

function handlePageChange() {
  window.scrollTo({ top: 0, behavior: 'smooth' })
}

async function fetchSuppliers() {
  const res: any = await adminApi.getSuppliers()
  suppliers.value = res.data || []
}

async function addSupplier() {
  await adminApi.createSupplier(form)
  ElMessage.success('创建成功')
  showAdd.value = false
  await fetchSuppliers()
}

function authorize(id: number) {
  authSupplierId.value = id
  showAuth.value = true
}

async function saveAuth() {
  await adminApi.authorizeSupplier(authSupplierId.value, authForm)
  ElMessage.success('授权成功')
  showAuth.value = false
}

async function deleteSupplier(id: number) {
  await adminApi.deleteSupplier(id)
  ElMessage.success('删除成功')
  await fetchSuppliers()
}

onMounted(fetchSuppliers)
</script>

<style scoped lang="scss">
.suppliers-page { padding: 0; }
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.table-card { background: #2d2d44; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; padding: 20px; }

.pagination-wrap {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.pagination-wrap :deep(.el-pagination) {
  --el-pagination-bg-color: rgba(255, 255, 255, 0.06);
  --el-pagination-text-color: rgba(255, 255, 255, 0.6);
  --el-pagination-button-disabled-bg-color: rgba(255, 255, 255, 0.04);
  --el-pagination-button-bg-color: rgba(255, 255, 255, 0.06);
  --el-pagination-hover-color: #4e6ef2;
}

.pagination-wrap :deep(.el-pagination .el-pager li) {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.6);
  border-radius: 6px;
  margin: 0 4px;
}

.pagination-wrap :deep(.el-pagination .el-pager li:hover),
.pagination-wrap :deep(.el-pagination .el-pager li.is-active) {
  background: #4e6ef2;
  color: #fff;
}

.pagination-wrap :deep(.el-pagination .btn-prev),
.pagination-wrap :deep(.el-pagination .btn-next) {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.6);
  border-radius: 6px;
}

.pagination-wrap :deep(.el-pagination .btn-prev:hover),
.pagination-wrap :deep(.el-pagination .btn-next:hover) {
  background: rgba(78, 110, 242, 0.2);
  color: #4e6ef2;
}

.pagination-wrap :deep(.el-pagination__total) {
  color: rgba(255, 255, 255, 0.5);
}
</style>
