<template>
  <div class="content-section">
    <div class="invoice-container">
      <div class="add-card" @click="handleAddInvoice">
        <div class="add-text">添加</div>
      </div>
      <div class="invoice-list">
        <div 
          v-for="invoice in invoiceList" 
          :key="invoice.id" 
          class="invoice-card"
        >
          <div class="invoice-icon">
            <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <rect x="3" y="3" width="18" height="18" rx="2" stroke="#909399" stroke-width="2"/>
              <path d="M8 12H16M8 16H13" stroke="#909399" stroke-width="2" stroke-linecap="round"/>
            </svg>
          </div>
          <div class="invoice-info">
            <div class="invoice-name">{{ invoice.name }}</div>
            <div class="invoice-status">{{ invoice.status }}</div>
          </div>
          <div class="invoice-action" @click="handleDeleteInvoice(invoice)">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3 6H21M8 6V4C8 3.44772 8.44772 3 9 3H15C15.5523 3 16 3.44772 16 4V6M19 6V20C19 20.5523 18.5523 21 18 21H6C5.44772 21 5 20.5523 5 20V6H19Z" stroke="#909399" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

defineProps({
  invoiceList: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['add-invoice', 'delete-invoice'])

// 添加开票
function handleAddInvoice() {
  router.push('/invoice-header/add')
}

// 删除开票
function handleDeleteInvoice(invoice) {
  $message.info('删除开票功能开发中')
}
</script>

<style scoped>
.content-section {
  background: white;
  border-radius: 8px;
  padding: 24px;
  min-height: calc(100vh - 40px);
  position: relative;

}

.invoice-container {
  max-width: 1000px;
}

.add-card {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 80px;
  height: 32px;
  background: #A30113;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.add-card:hover {
  background: #880C22;
}

.add-text {
  color: white;
  font-size: 14px;
}

.invoice-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  margin-top: 60px;
}

.invoice-card {
  background: #F5F7FA;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.3s ease;
  border: 1px solid #EEEEEE;
}

.invoice-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(163, 1, 19, 0.1);
  border-color: #A30113;
}

.invoice-icon {
  flex-shrink: 0;
}

.invoice-info {
  flex: 1;
}

.invoice-name {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 4px;
}

.invoice-status {
  font-size: 12px;
  color: #909399;
}

.invoice-action {
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.invoice-action:hover {
  background: rgba(163, 1, 19, 0.1);
}

@media (max-width: 768px) {
  .invoice-list {
    grid-template-columns: 1fr;
  }
}
</style>
