<script setup>
import { ref, reactive, onMounted } from 'vue'
import { getSupplierList, createSupplier, updateSupplier, deleteSupplier } from '@/api/supplier'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, Refresh } from '@element-plus/icons-vue'

const query = reactive({ page: 1, size: 10, name: '', phone: '' })
const tableData = ref([])
const total = ref(0)
const dialogVisible = ref(false)
const dialogTitle = ref('新增供应商')
const formRef = ref(null)
const form = reactive({ id: null, name: '', contactPerson: '', phone: '', email: '', address: '', bankAccount: '', bankName: '', taxId: '', licenseNumber: '', status: 1, remark: '' })

async function loadData() {
  try { const res = await getSupplierList(query); tableData.value = res.data?.records || []; total.value = res.data?.total || 0 } catch { /* */ }
}
function handleAdd() { dialogTitle.value = '新增供应商'; Object.keys(form).forEach(k => form[k] = k === 'status' ? 1 : null); form.id = null; dialogVisible.value = true }
function handleEdit(row) { dialogTitle.value = '编辑供应商'; Object.assign(form, row); dialogVisible.value = true }
async function handleDelete(row) { await ElMessageBox.confirm('确定删除？', '确认', { type: 'warning' }); await deleteSupplier(row.id); ElMessage.success('删除成功'); loadData() }
async function handleSubmit() { const data = { ...form }; delete data.id; if (form.id) { await updateSupplier(form.id, data); ElMessage.success('编辑成功') } else { await createSupplier(data); ElMessage.success('新增成功') }; dialogVisible.value = false; loadData() }
async function toggleStatus(row) { await updateSupplier(row.id, { status: row.status }); ElMessage.success('状态已更新') }

onMounted(loadData)
</script>

<template>
  <div class="page-container">
    <div class="page-header">
      <span class="page-title">供应商管理</span>
    </div>
    <div class="search-bar">
      <el-input v-model="query.name" placeholder="供应商名称" clearable @keyup.enter="loadData" />
      <el-button type="primary" :icon="Search" @click="loadData">搜索</el-button>
      <el-button :icon="Refresh" @click="query.name = ''; loadData()">重置</el-button>
    </div>
    <div class="tool-bar">
      <el-button type="primary" v-permission="'supplier:add'" @click="handleAdd">+ 新增供应商</el-button>
    </div>
    <el-table :data="tableData" border stripe>
      <el-table-column prop="name" label="供应商名称" min-width="180" />
      <el-table-column prop="contactPerson" label="联系人" width="100" />
      <el-table-column prop="phone" label="电话" width="130" />
      <el-table-column prop="email" label="邮箱" width="180" show-overflow-tooltip />
      <el-table-column prop="status" label="状态" width="80" align="center">
        <template #default="{ row }">
          <el-switch v-model="row.status" :active-value="1" :inactive-value="0" @change="toggleStatus(row)" />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="160" fixed="right">
        <template #default="{ row }">
          <div class="table-actions">
            <el-button size="small" v-permission="'supplier:edit'" @click="handleEdit(row)">编辑</el-button>
            <el-button size="small" type="danger" v-permission="'supplier:delete'" @click="handleDelete(row)">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div style="display:flex;justify-content:flex-end;margin-top:16px">
      <el-pagination v-model:current-page="query.page" v-model:page-size="query.size" :total="total" :page-sizes="[10,20,50]" layout="total,sizes,prev,pager,next" @current-change="loadData" @size-change="query.page=1;loadData()" />
    </div>

    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="550px">
      <el-form ref="formRef" :model="form" label-width="90px">
        <el-row :gutter="16">
          <el-col :span="12"><el-form-item label="名称" required><el-input v-model="form.name" /></el-form-item></el-col>
          <el-col :span="12"><el-form-item label="联系人"><el-input v-model="form.contactPerson" /></el-form-item></el-col>
          <el-col :span="12"><el-form-item label="电话"><el-input v-model="form.phone" /></el-form-item></el-col>
          <el-col :span="12"><el-form-item label="邮箱"><el-input v-model="form.email" /></el-form-item></el-col>
          <el-col :span="12"><el-form-item label="银行账号"><el-input v-model="form.bankAccount" /></el-form-item></el-col>
          <el-col :span="12"><el-form-item label="开户银行"><el-input v-model="form.bankName" /></el-form-item></el-col>
          <el-col :span="12"><el-form-item label="税号"><el-input v-model="form.taxId" /></el-form-item></el-col>
          <el-col :span="12"><el-form-item label="许可证号"><el-input v-model="form.licenseNumber" /></el-form-item></el-col>
          <el-col :span="24"><el-form-item label="地址"><el-input v-model="form.address" /></el-form-item></el-col>
          <el-col :span="24"><el-form-item label="备注"><el-input v-model="form.remark" type="textarea" :rows="2" /></el-form-item></el-col>
        </el-row>
      </el-form>
      <template #footer><el-button @click="dialogVisible=false">取消</el-button><el-button type="primary" @click="handleSubmit">确定</el-button></template>
    </el-dialog>
  </div>
</template>
