<template>
  <div class="invoice-manage-container">
    <div class="page-title"><i class="title-bar"></i><span>发票管理</span></div>
    <!-- 搜索栏 -->
    <div class="search-bar">
      <el-input v-model="queryParams.keyword" placeholder="搜索" style="width: 200px" clearable>
        <template #prefix><el-icon><Search /></el-icon></template>
      </el-input>
      <el-select v-model="queryParams.searchType" placeholder="账户名称" style="width: 120px">
        <el-option label="账户名称" value="accountName" />
        <el-option label="发票抬头" value="invoiceTitle" />
        <el-option label="纳税人识别号" value="taxNo" />
      </el-select>
      <div class="search-right"><el-button type="danger" @click="handleAdd">新增开票信息</el-button></div>
    </div>
    <!-- 表格 -->
    <el-table :data="tableData" border style="width: 100%" :resizable="false">
      <el-table-column prop="invoiceTitle" label="发票抬头" width="140" show-overflow-tooltip :resizable="false" />
      <el-table-column prop="taxNo" label="纳税人识别号" width="130" :resizable="false" />
      <el-table-column prop="bankName" label="开户银行" width="120" :resizable="false" />
      <el-table-column prop="bankAccount" label="开户账户" width="140" :resizable="false" />
      <el-table-column prop="address" label="地址" min-width="140" show-overflow-tooltip :resizable="false" />
      <el-table-column prop="phone" label="电话" width="120" :resizable="false" />
      <el-table-column label="操作" width="120" fixed="right" :resizable="false">
        <template #default="{ row }">
          <div style="display: flex; gap: 8px; justify-content: center;">
            <el-button type="primary" link @click="handleEdit(row)">修改</el-button>
            <el-button type="danger" link @click="handleDelete(row)">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="pagination-wrap">
      <span class="total-text">共计 {{ total }} 条</span>
      <el-pagination v-model:current-page="queryParams.pageNum" v-model:page-size="queryParams.pageSize"
        :page-sizes="[10, 20, 50]" :total="total" layout="prev, pager, next, sizes, jumper"
        @size-change="handleQuery" @current-change="handleQuery" />
    </div>
    <!-- 新增/编辑弹窗 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="550px">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="发票抬头" prop="invoiceTitle"><el-input v-model="form.invoiceTitle" placeholder="请输入发票抬头" /></el-form-item>
        <el-form-item label="纳税人识别号" prop="taxNo"><el-input v-model="form.taxNo" placeholder="请输入纳税人识别号" /></el-form-item>
        <el-form-item label="开户银行" prop="bankName"><el-input v-model="form.bankName" placeholder="请输入开户银行" /></el-form-item>
        <el-form-item label="开户账户" prop="bankAccount"><el-input v-model="form.bankAccount" placeholder="请输入开户账户" /></el-form-item>
        <el-form-item label="地址" prop="address"><el-input v-model="form.address" placeholder="请输入地址" /></el-form-item>
        <el-form-item label="电话" prop="phone"><el-input v-model="form.phone" placeholder="请输入电话" /></el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="danger" @click="handleSave">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const dialogVisible = ref(false)
const dialogTitle = ref('新增开票信息')
const formRef = ref()
const editingId = ref<number | null>(null)
const total = ref(0)

const queryParams = reactive({ pageNum: 1, pageSize: 10, keyword: '', searchType: 'accountName' })
const form = reactive({ invoiceTitle: '', taxNo: '', bankName: '', bankAccount: '', address: '', phone: '' })
const rules = {
  invoiceTitle: [{ required: true, message: '请输入发票抬头', trigger: 'blur' }],
  taxNo: [{ required: true, message: '请输入纳税人识别号', trigger: 'blur' }],
  bankName: [{ required: true, message: '请输入开户银行', trigger: 'blur' }],
  bankAccount: [{ required: true, message: '请输入开户账户', trigger: 'blur' }]
}

const tableData = ref([
  { id: 1, invoiceTitle: '北京吉浪文化传...', taxNo: '23455a2121', bankName: '湖北交通银行', bankAccount: '3273237283723', address: '福建省泉州市金...', phone: '18525220957' },
  { id: 2, invoiceTitle: '北京志荣煤拓科...', taxNo: '23455a2121', bankName: '中国银行', bankAccount: '3273237283723', address: '陕西省榆林市神...', phone: '13513660470' },
  { id: 3, invoiceTitle: '高诚美恒公司', taxNo: '23455a2121', bankName: '中国建设银行', bankAccount: '3273237283723', address: '宁夏回族自治区...', phone: '13881559836' }
])

onMounted(() => { total.value = 500 })
const handleQuery = () => {}
const resetForm = () => { form.invoiceTitle = ''; form.taxNo = ''; form.bankName = ''; form.bankAccount = ''; form.address = ''; form.phone = ''; editingId.value = null }
const handleAdd = () => { resetForm(); dialogTitle.value = '新增开票信息'; dialogVisible.value = true }
const handleEdit = (row: any) => { editingId.value = row.id; form.invoiceTitle = row.invoiceTitle; form.taxNo = row.taxNo; form.bankName = row.bankName; form.bankAccount = row.bankAccount; form.address = row.address; form.phone = row.phone; dialogTitle.value = '编辑开票信息'; dialogVisible.value = true }
const handleSave = async () => { const valid = await formRef.value?.validate(); if (!valid) return; ElMessage.success(editingId.value ? '修改成功' : '新增成功'); dialogVisible.value = false }
const handleDelete = (row: any) => { ElMessageBox.confirm('确定要删除该开票信息吗？', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { const index = tableData.value.findIndex(i => i.id === row.id); if (index > -1) tableData.value.splice(index, 1); ElMessage.success('删除成功') }) }
</script>

<style scoped lang="scss">
.invoice-manage-container { padding: 20px; background: #fff; min-height: 100%; }
.page-title { font-size: 16px; font-weight: bold; display: flex; align-items: center; gap: 8px; margin-bottom: 20px; }
.title-bar { display: inline-block; width: 3px; height: 16px; background: #e60012; border-radius: 2px; }
.search-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; .search-right { flex: 1; display: flex; justify-content: flex-end; } }
.pagination-wrap { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; .total-text { font-size: 14px; color: #666; } }
</style>
