<template>
  <el-dialog
    v-model="showDialog"
    title="开票"
    width="1000"
    destroy-on-close
  >
    <div class="history-container">
      <h1 class="page-title">开票记录</h1>
      
      <!-- 过滤条件 -->
      <el-card class="filter-card" shadow="never">
        <el-form :model="filterForm" inline label-width="80px">
          <el-form-item label="发票状态">
            <el-select
              v-model="filterForm.status"
              placeholder="全部状态"
              clearable
              @change="handleFilter"
            >
              <el-option label="全部" value="" />
              <el-option label="待处理" value="pending" />
              <el-option label="处理中" value="processing" />
              <el-option label="已完成" value="completed" />
              <el-option label="已取消" value="cancelled" />
            </el-select>
          </el-form-item>
          
          <el-form-item label="发票类型">
            <el-select
              v-model="filterForm.invoiceType"
              placeholder="全部类型"
              clearable
              @change="handleFilter"
            >
              <el-option label="全部" value="" />
              <el-option label="普通发票" value="personal" />
              <el-option label="增值税发票" value="enterprise" />
            </el-select>
          </el-form-item>
          
          <el-form-item label="申请时间">
            <el-date-picker
              v-model="filterForm.dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              @change="handleFilter"
            />
          </el-form-item>
          
          <el-form-item>
            <el-button
              type="primary"
              icon="Search"
              @click="handleFilter"
            >
              筛选
            </el-button>
            <el-button
              type="default"
              icon="Refresh"
              @click="handleResetFilter"
            >
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
      
      <!-- 开票记录表格 -->
      <el-card class="table-card" shadow="never">
        <template #header>
          <div class="table-header">
            <span class="table-title">开票记录列表</span>
            <el-button
              type="primary"
              icon="Plus"
              size="small"
              @click="goToApply"
            >
              申请开票
            </el-button>
          </div>
        </template>
        
        <el-table
          v-loading="loading"
          :data="filteredInvoices"
          stripe
          style="width: 100%"
          empty-text="暂无开票记录"
          @row-click="handleRowClick"
        >
          <el-table-column
            prop="id"
            label="申请编号"
            width="180"
          >
            <template #default="{ row }">
              <span class="invoice-id">{{ row.id }}</span>
            </template>
          </el-table-column>
          
          <el-table-column
            prop="orderNo"
            label="订单编号"
            width="180"
          />
          
          <el-table-column
            prop="createdAt"
            label="申请时间"
            width="180"
          >
            <template #default="{ row }">
              <span>{{ formatDate(row.createdAt) }}</span>
            </template>
          </el-table-column>
          
          <el-table-column
            prop="invoiceType"
            label="发票类型"
            width="120"
          >
            <template #default="{ row }">
              <el-tag
                :type="row.invoiceType === 'enterprise' ? 'primary' : 'info'"
                size="small"
              >
                {{ row.invoiceType === 'enterprise' ? '增值税发票' : '普通发票' }}
              </el-tag>
            </template>
          </el-table-column>
          
          <el-table-column
            prop="deliveryMethod"
            label="接收方式"
            width="120"
          >
            <template #default="{ row }">
              <el-tag
                :type="row.deliveryMethod === 'email' ? 'success' : 'warning'"
                size="small"
              >
                {{ row.deliveryMethod === 'email' ? '电子发票' : '纸质发票' }}
              </el-tag>
            </template>
          </el-table-column>
          
          <el-table-column
            prop="status"
            label="状态"
            width="120"
          >
            <template #default="{ row }">
              <el-tag
                :type="getStatusType(row.status)"
                size="small"
              >
                {{ getStatusText(row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          
          <el-table-column
            prop="amount"
            label="金额"
            width="120"
          >
            <template #default="{ row }">
              <span class="amount">{{ row.orderInfo?.paymentAmount || '¥ 0.00' }}</span>
            </template>
          </el-table-column>
          
          <el-table-column
            label="操作"
            width="200"
            fixed="right"
          >
            <template #default="{ row }">
              <el-space :size="8">
                <el-button
                  type="primary"
                  icon="View"
                  size="small"
                  @click.stop="handleViewDetail(row)"
                >
                  查看
                </el-button>
                
                <el-button
                  v-if="row.status === 'pending'"
                  type="warning"
                  icon="Edit"
                  size="small"
                  @click.stop="handleEdit(row)"
                >
                  修改
                </el-button>
                
                <el-button
                  v-if="row.status === 'completed' && row.deliveryMethod === 'email'"
                  type="success"
                  icon="Download"
                  size="small"
                  @click.stop="handleDownload(row)"
                >
                  下载
                </el-button>
              </el-space>
            </template>
          </el-table-column>
        </el-table>
        
        <!-- 分页 -->
        <div class="pagination-wrapper">
          <el-pagination
            v-model:current-page="pagination.currentPage"
            v-model:page-size="pagination.pageSize"
            :page-sizes="[10, 20, 50, 100]"
            :total="filteredInvoices.length"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-card>
      
      <!-- 发票详情抽屉 -->
      <el-drawer
        v-model="detailDrawerVisible"
        title="发票申请详情"
        :size="600"
        direction="rtl"
      >
        <InvoiceDetail
          v-if="selectedInvoice"
          :invoice="selectedInvoice"
          @refresh="loadInvoices"
        />
      </el-drawer>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import InvoiceDetail from './InvoiceDetail.vue'

const showDialog = ref(false)
// 导入组件

const router = useRouter()

// 响应式数据
const invoices = ref([])
const filteredInvoices = ref([])
const loading = ref(false)
const detailDrawerVisible = ref(false)
const selectedInvoice = ref(null)

// 过滤表单
const filterForm = ref({
  status: '',
  invoiceType: '',
  dateRange: []
})

// 分页配置
const pagination = ref({
  currentPage: 1,
  pageSize: 10
})

// 计算属性 - 分页后的数据
const pagedInvoices = computed(() => {
  const start = (pagination.value.currentPage - 1) * pagination.value.pageSize
  const end = start + pagination.value.pageSize
  return filteredInvoices.value.slice(start, end)
})

// 生命周期钩子
onMounted(() => {
  loadInvoices()
})

const open = () => {
  showDialog.value = true
}

defineExpose({
  open
})

// 方法
const loadInvoices = async() => {
  loading.value = true
  try {
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 800))
    
    // 从localStorage获取数据
    const storedInvoices = JSON.parse(localStorage.getItem('invoices') || '[]')
    
    // 如果没有数据，创建一些示例数据
    if (storedInvoices.length === 0) {
      invoices.value = generateSampleInvoices()
    } else {
      invoices.value = storedInvoices
    }
    
    // 应用过滤
    applyFilter()
  } catch (error) {
    console.error('加载开票记录失败:', error)
    invoices.value = []
    filteredInvoices.value = []
  } finally {
    loading.value = false
  }
}

const generateSampleInvoices = () => {
  const sampleStatuses = ['pending', 'processing', 'completed', 'cancelled']
  const sampleInvoices = []
  
  for (let i = 0; i < 8; i++) {
    sampleInvoices.push({
      id: `INV${Date.now() - i * 86400000}`.slice(-8),
      orderNo: `OD2026022${80000 + i}`,
      createdAt: new Date(Date.now() - i * 86400000).toISOString(),
      invoiceType: i % 2 === 0 ? 'personal' : 'enterprise',
      deliveryMethod: i % 3 === 0 ? 'paper' : 'email',
      status: sampleStatuses[i % sampleStatuses.length],
      orderInfo: {
        paymentAmount: `¥ ${(1000 + i * 100).toFixed(2)}`,
        serviceType: '企业基础版（1年）'
      },
      invoiceTitle: i % 2 === 0 ? '个人发票' : '示例科技有限公司',
      taxNumber: i % 2 === 1 ? '91440101MA5ABCD123' : '',
      email: 'user@example.com',
      remark: '示例备注信息'
    })
  }
  
  return sampleInvoices
}

const formatDate = (dateString) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    hour12: false
  })
}

const getStatusType = (status) => {
  const statusMap = {
    'pending': 'info',
    'processing': 'warning',
    'completed': 'success',
    'cancelled': 'danger'
  }
  return statusMap[status] || 'info'
}

const getStatusText = (status) => {
  const statusMap = {
    'pending': '待处理',
    'processing': '处理中',
    'completed': '已完成',
    'cancelled': '已取消'
  }
  return statusMap[status] || '未知'
}

const applyFilter = () => {
  let result = [...invoices.value]
  
  // 按状态过滤
  if (filterForm.value.status) {
    result = result.filter(invoice => invoice.status === filterForm.value.status)
  }
  
  // 按发票类型过滤
  if (filterForm.value.invoiceType) {
    result = result.filter(invoice => invoice.invoiceType === filterForm.value.invoiceType)
  }
  
  // 按日期过滤
  if (filterForm.value.dateRange && filterForm.value.dateRange.length === 2) {
    const [startDate, endDate] = filterForm.value.dateRange
    result = result.filter(invoice => {
      const invoiceDate = new Date(invoice.createdAt).toISOString().split('T')[0]
      return invoiceDate >= startDate && invoiceDate <= endDate
    })
  }
  
  // 按时间倒序排序
  result.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
  
  filteredInvoices.value = result
  pagination.value.currentPage = 1
}

const handleFilter = () => {
  applyFilter()
}

const handleResetFilter = () => {
  filterForm.value = {
    status: '',
    invoiceType: '',
    dateRange: []
  }
  applyFilter()
}

const handleSizeChange = (size) => {
  pagination.value.pageSize = size
  pagination.value.currentPage = 1
}

const handleCurrentChange = (page) => {
  pagination.value.currentPage = page
}

const handleRowClick = (row) => {
  handleViewDetail(row)
}

const handleViewDetail = (invoice) => {
  selectedInvoice.value = invoice
  detailDrawerVisible.value = true
}

const handleEdit = (invoice) => {
  ElMessage.info('修改功能开发中...')
  // 实际开发中可以跳转到编辑页面
  // router.push(`/invoice/edit/${invoice.id}`)
}

const handleDownload = (invoice) => {
  ElMessage.success(`开始下载发票 ${invoice.id}`)
  // 实际开发中这里应该是下载PDF的代码
}

const goToApply = () => {
  router.push('/invoice/apply')
}
</script>

<style scoped>
.history-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 20px;
  text-align: center;
}

.filter-card {
  margin-bottom: 20px;
  background-color: #f8f9fa;
}

.table-card {
  margin-bottom: 20px;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.table-title {
  font-size: 16px;
}
</style>