<template>
  <div>
    <el-tabs v-model="tab">
      <el-tab-pane label="开票申请" name="apply">
        <el-card shadow="never">
          <el-form :model="form" label-width="100" size="large">
            <el-form-item label="发票类型">
              <el-radio-group v-model="form.type">
                <el-radio value="individual">个人发票</el-radio>
                <el-radio value="enterprise">企业发票</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="抬头"><el-input v-model="form.title" /></el-form-item>
            <el-form-item label="税号" v-if="form.type === 'enterprise'"><el-input v-model="form.tax_id" /></el-form-item>
            <el-form-item label="金额"><el-input-number v-model="form.amount" :min="1" style="width:200px" /></el-form-item>
            <el-form-item>
              <el-button type="primary" :loading="loading" @click="apply">提交申请</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="开票记录" name="history">
        <el-card shadow="never">
          <el-table :data="list" v-loading="loadingList" stripe style="width:100%">
            <el-table-column label="类型" width="100">
              <template #default="{ row }">{{ row.type === 'individual' ? '个人' : '企业' }}</template>
            </el-table-column>
            <el-table-column prop="title" label="抬头" min-width="140" />
            <el-table-column label="金额" width="120">
              <template #default="{ row }">{{ row.amount }} 元</template>
            </el-table-column>
            <el-table-column label="状态" width="100">
              <template #default="{ row }">
                <el-tag :type="statusType(row.status)" size="small">{{ statusLabel(row.status) }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="created_at" label="申请时间" width="170" />
            <el-table-column v-if="rejectedReason" label="驳回原因" min-width="140">
              <template #default="{ row }">{{ row.reason || '-' }}</template>
            </el-table-column>
          </el-table>
          <el-empty v-if="!loadingList && !list.length" description="暂无开票记录" />
        </el-card>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { applyInvoice, listInvoices } from '@/api'
import { ElMessage } from 'element-plus'

const tab = ref('apply')
const loading = ref(false)
const loadingList = ref(false)
const list = ref([])
const form = ref({ type: 'individual', title: '', tax_id: '', amount: 0 })

function statusType(s) { return { pending: 'warning', issued: 'success', rejected: 'danger' }[s] || 'info' }
function statusLabel(s) { return { pending: '处理中', issued: '已开票', rejected: '已驳回' }[s] || s }

onMounted(loadList)

async function apply() {
  if (!form.value.title || !form.value.amount) { ElMessage.warning('请填写完整'); return }
  loading.value = true
  try {
    await applyInvoice(form.value)
    ElMessage.success('申请已提交')
    form.value = { type: 'individual', title: '', tax_id: '', amount: 0 }
    loadList()
  } catch (e) { ElMessage.error(e?.detail || '提交失败') }
  finally { loading.value = false }
}

async function loadList() {
  loadingList.value = true
  try {
    const res = await listInvoices({ page: 1, size: 50 })
    const d = res.data || res
    list.value = d.items || d.rows || d.data || d || []
  } catch { /* ignore */ }
  finally { loadingList.value = false }
}
</script>
