<template>
  <view class="reservation-page">
    <view class="fixed-nav">
      <NavBar title="发票管理">
      </NavBar>
    </view>
    <view class="content-area">
      <view v-for="item in invoiceList" :key="item.id" class="invoice-card">
        <view class="invoice-header">
          <view :class="['status-tag', item.status === 'issued' ? 'issued' : 'pending']">
            {{ item.status === 'issued' ? '已开具' : '待开具' }}
          </view>
          <view class="invoice-date">{{ item.date }}</view>
        </view>
        <view class="invoice-title">{{ item.name }}</view>
        <view class="invoice-amount">￥{{ item.amount.toFixed(2) }}</view>
        <view class="invoice-batch">批次号：{{ item.batchNo }}</view>
        <view class="invoice-actions single-btn">
          <button
            class="invoice-detail-btn"
            :class="{ 'issue': item.status === 'pending' }"
            @click="item.status === 'issued' ? viewInvoice(item) : issueInvoice(item)"
          >
            {{ item.status === 'issued' ? '查看发票' : '开发票' }}
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import NavBar from '@/components/NavBar.vue'
export default {
  name: 'InvoiceManagePage',
  components: { NavBar },
  data() {
    return {
      invoiceList: [
        {
          id: 1,
          status: 'issued', // 'issued' 已开具, 'pending' 待开具
          date: '2024-01-15',
          name: '北向南过闸',
          amount: 120.00,
          batchNo: '2025040101'
        },
        {
          id: 2,
          status: 'pending',
          date: '2024-01-15',
          name: '北向南过闸',
          amount: 120.00,
          batchNo: '2025040101'
        }
      ]
    }
  },
  methods: {
    viewInvoice(item) {
      // 跳转到发票详情页
      uni.navigateTo({ url: `/pages/index/invoice_detail?id=${item.id}` })
    },
    issueInvoice(item) {
      // 跳转到开发票页面
      uni.navigateTo({ url: `/pages/index/invoice_issue?id=${item.id}` })
    }
  }
}
</script>

<style scoped>
.reservation-page {
  background: linear-gradient(180deg, #eaf3ff 0%, #f6faff 100%);
  min-height: 100vh;
  padding-bottom: 40rpx;
}
.fixed-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: linear-gradient(180deg, #cbe6ff 0%, #f6faff 100%);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.content-area {
  padding: 220rpx 24rpx 24rpx 24rpx;
}
.invoice-card {
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
  padding: 32rpx 28rpx;
  margin-bottom: 32rpx;
  border: 1rpx solid #e5e5e5;
}
.invoice-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}
.status-tag {
  padding: 6rpx 24rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  color: #fff;
}
.status-tag.issued {
  background: #2ecc71;
}
.status-tag.pending {
  background: #ffa940;
}
.invoice-date {
  color: #888;
  font-size: 24rpx;
}
.invoice-title {
  font-size: 30rpx;
  font-weight: bold;
  margin-bottom: 12rpx;
}
.invoice-amount {
  font-size: 32rpx;
  color: #222;
  font-weight: bold;
  margin-bottom: 8rpx;
}
.invoice-batch {
  font-size: 24rpx;
  color: #888;
  margin-bottom: 16rpx;
}
.invoice-actions {
  display: flex;
  justify-content: flex-end;
}
.invoice-actions.single-btn .invoice-detail-btn {
  flex: 0 0 auto;
  width: 153px;
}
.invoice-detail-btn {
  background: #e4f3fe;
  color: #217aff;
  height: 69rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  margin-right: 24rpx;
  border-radius: 4px;
  padding: 8px 0;
  font-weight: 500;
  border: none;
  outline: none;
}
.invoice-detail-btn.issue {
  background: #217aff;
  color: #fff;
}
.invoice-btn {
  display: none;
}
</style> 