<template>
  <el-dialog
    v-model="showDialog"
    title="开票"
    width="600"
    destroy-on-close
  >
    <div class="success-container">
      <!-- 成功图标 -->
      <div class="success-icon">
        <el-icon :size="80" color="#67c23a">
          <CircleCheck />
        </el-icon>
      </div>
      
      <!-- 成功标题 -->
      <h1 class="success-title">发票申请提交成功！</h1>
      
      <!-- 成功信息 -->
      <div class="success-message">
        <p>您的发票申请已成功提交，我们将在1-7个工作日内为您处理。</p>
        <!--        <p>您可以通过以下方式查看申请状态：</p>-->
      </div>
      
      <!-- 发票信息卡片 -->
      <!--      <el-card class="invoice-info-card" shadow="hover">-->
      <!--        <template #header>-->
      <!--          <div class="card-header">-->
      <!--            <span class="card-title">申请信息</span>-->
      <!--            <el-tag type="info" size="small">处理中</el-tag>-->
      <!--          </div>-->
      <!--        </template>-->
      <!--        -->
      <!--        <el-descriptions :column="1" border>-->
      <!--          <el-descriptions-item label="申请编号">-->
      <!--            <span class="info-value">{{ invoiceInfo.id }}</span>-->
      <!--          </el-descriptions-item>-->
      <!--          -->
      <!--          <el-descriptions-item label="订单编号">-->
      <!--            <span class="info-value">{{ invoiceInfo.orderNo }}</span>-->
      <!--          </el-descriptions-item>-->
      <!--          -->
      <!--          <el-descriptions-item label="申请时间">-->
      <!--            <span class="info-value">-->
      <!--              <el-icon><Timer /></el-icon>-->
      <!--              {{ invoiceInfo.createdAt }}-->
      <!--            </span>-->
      <!--          </el-descriptions-item>-->
      <!--          -->
      <!--          <el-descriptions-item label="预计完成时间">-->
      <!--            <span class="info-value">-->
      <!--              <el-icon><Clock /></el-icon>-->
      <!--              {{ invoiceInfo.estimatedTime }}-->
      <!--            </span>-->
      <!--          </el-descriptions-item>-->
      <!--          -->
      <!--          <el-descriptions-item label="发票类型">-->
      <!--            <span class="info-value">-->
      <!--              <el-tag :type="invoiceInfo.invoiceType === 'enterprise' ? 'primary' : 'info'">-->
      <!--                {{ invoiceInfo.invoiceType === 'enterprise' ? '增值税发票' : '普通发票' }}-->
      <!--              </el-tag>-->
      <!--            </span>-->
      <!--          </el-descriptions-item>-->
      <!--          -->
      <!--          <el-descriptions-item label="接收方式">-->
      <!--            <span class="info-value">-->
      <!--              <el-tag :type="invoiceInfo.deliveryMethod === 'email' ? 'success' : 'warning'">-->
      <!--                {{ invoiceInfo.deliveryMethod === 'email' ? '电子发票' : '纸质发票' }}-->
      <!--              </el-tag>-->
      <!--            </span>-->
      <!--          </el-descriptions-item>-->
      <!--        </el-descriptions>-->
      <!--      </el-card>-->
      
      <!-- 操作按钮 -->
      <div class="action-buttons">
        <el-space :size="20">
          <el-button
            type="primary"
            con="List"
            round
            size="large"
            style="width: 120px;"
            @click="handelOk"
          >
            确定
          </el-button>
          
          <!--          <el-button-->
          <!--            type="primary"-->
          <!--            con="List"-->
          <!--            size="large"-->
          <!--            @click="goToHistory"-->
          <!--          >-->
          <!--            查看开票记录-->
          <!--          </el-button>-->
          <!--          -->
          <!--          <el-button-->
          <!--            type="default"-->
          <!--            icon="Printer"-->
          <!--            size="large"-->
          <!--            @click="handlePrint"-->
          <!--          >-->
          <!--            打印申请单-->
          <!--          </el-button>-->
        
        </el-space>
      </div>
      
      <!-- 温馨提示 -->
      <!--      <el-alert-->
      <!--        title="温馨提示"-->
      <!--        type="info"-->
      <!--        :closable="false"-->
      <!--        show-icon-->
      <!--        class="tips-alert"-->
      <!--      >-->
      <!--        <ul class="tips-list">-->
      <!--          <li>发票开具进度将通过短信和邮件通知，请注意查收</li>-->
      <!--          <li>如需修改发票信息，请及时联系客服 400-888-8888</li>-->
      <!--          <li>电子发票开具后，可通过邮件中的链接下载</li>-->
      <!--          <li>纸质发票将通过顺丰快递寄出，请注意查收</li>-->
      <!--          <li>如有疑问，可随时联系在线客服</li>-->
      <!--        </ul>-->
      <!--      </el-alert>-->
    </div>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const emit = defineEmits(['handelHistory'])

const router = useRouter()
const route = useRoute()

// 发票信息
const invoiceInfo = ref({
  id: '',
  orderNo: '',
  createdAt: '',
  estimatedTime: '',
  invoiceType: '',
  deliveryMethod: '',
  status: 'pending'
})

const showDialog = ref(false)

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

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

const handelOk = () => {
  showDialog.value = false
}

defineExpose({
  open
})

// 方法
// const loadInvoiceInfo = () => {
//   const invoiceId = route.query.invoiceId
//   if (!invoiceId) {
//     // 如果没有发票ID，从localStorage获取最新的一条
//     const invoices = JSON.parse(localStorage.getItem('invoices') || '[]')
//     if (invoices.length > 0) {
//       const latestInvoice = invoices[invoices.length - 1]
//       formatInvoiceInfo(latestInvoice)
//     } else {
//       // 如果没有数据，显示默认信息
//       invoiceInfo.value = {
//         id: 'INV' + Date.now().toString().slice(-8),
//         orderNo: 'OD2026022812345678',
//         createdAt: formatDate(new Date()),
//         estimatedTime: '3-7个工作日',
//         invoiceType: 'personal',
//         deliveryMethod: 'email',
//         status: 'pending'
//       }
//     }
//   } else {
//     // 如果有发票ID，从localStorage查找
//     const invoices = JSON.parse(localStorage.getItem('invoices') || '[]')
//     const foundInvoice = invoices.find(inv => inv.id === invoiceId)
//     if (foundInvoice) {
//       formatInvoiceInfo(foundInvoice)
//     } else {
//       ElMessage.warning('未找到对应的发票申请信息')
//       router.push('/invoice/apply')
//     }
//   }
// }

// const formatInvoiceInfo = (invoice) => {
//   invoiceInfo.value = {
//     id: invoice.id || 'INV' + Date.now().toString().slice(-8),
//     orderNo: invoice.orderInfo?.orderNo || '未知',
//     createdAt: formatDate(new Date(invoice.createdAt || Date.now())),
//     estimatedTime: '3-7个工作日',
//     invoiceType: invoice.invoiceType || 'personal',
//     deliveryMethod: invoice.deliveryMethod || 'email',
//     status: invoice.status || 'pending'
//   }
// }

const formatDate = (date) => {
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false
  })
}

const goToHistory = () => {
  // router.push('/invoice/history')
  // proxy.$refs[''].open()
  
  emit('handelHistory')
}

const handlePrint = () => {
  window.print()
}

const goToHome = () => {
  router.push('/')
}
</script>

<style scoped>
.success-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 40px 20px;
  text-align: center;
}

.success-icon {
  margin-bottom: 20px;
  animation: bounceIn 0.8s ease;
}

.success-title {
  font-size: 28px;
  font-weight: 600;
  color: #67c23a;
  margin-bottom: 20px;
  animation: fadeInUp 0.6s ease 0.2s both;
}

.success-message {
  font-size: 16px;
  color: #606266;
  line-height: 1.8;
  margin-bottom: 30px;
  animation: fadeInUp 0.6s ease 0.4s both;
}

.success-message p {
  margin: 10px 0;
}

.invoice-info-card {
  margin-bottom: 30px;
  animation: fadeInUp 0.6s ease 0.6s both;
}

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

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.info-value {
  font-weight: 500;
  color: #606266;
  display: flex;
  align-items: center;
  gap: 8px;
}

.action-buttons {
  margin-bottom: 30px;
  animation: fadeInUp 0.6s ease 0.8s both;
}

.tips-alert {
  text-align: left;
  animation: fadeInUp 0.6s ease 1s both;
}

.tips-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: #606266;
}

.tips-list li {
  padding: 4px 0;
  position: relative;
  padding-left: 16px;
}

.tips-list li:before {
  content: "•";
  color: #409eff;
  position: absolute;
  left: 0;
  font-size: 16px;
}

/* 动画 */
@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 打印样式 */
@media print {
  .action-buttons,
  .tips-alert {
    display: none;
  }
  
  .success-container {
    padding: 0;
  }
  
  .invoice-info-card {
    box-shadow: none;
    border: 1px solid #000;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .success-container {
    padding: 20px 10px;
  }
  
  .success-title {
    font-size: 24px;
  }
  
  .action-buttons .el-space {
    flex-direction: column;
    width: 100%;
  }
  
  .action-buttons .el-button {
    width: 100%;
  }
}
</style>