# Hướng dẫn nhanh - Sử dụng TaxInvoiceSection Component

## ⚠️ VẤN ĐỀ HIỆN TẠI:
Component `TaxInvoiceSection` đã được tạo nhưng **CHƯA ĐƯỢC SỬ DỤNG** trong `CustomerReconciliationSlipDetail.vue`

## ✅ GIẢI PHÁP NHANH:

### Bước 1: Thêm import trong CustomerReconciliationSlipDetail.vue

Tìm phần import (khoảng dòng 625-632) và thêm:

```javascript
import TaxInvoiceSection from './components/TaxInvoiceSection.vue'
```

### Bước 2: Thay thế Tax Invoice Section trong template

Tìm dòng 167 (có comment `<!-- Tax Invoice Section -->`) và thay thế toàn bộ phần tax invoice (từ dòng 167 đến dòng 301) bằng:

```vue
<!-- Tax Invoice Section -->
<TaxInvoiceSection 
  v-if="canShowTaxInvoice" 
  :slipId="slip.Id" 
  :customerInfo="{
    id: slip.CustomerId,
    name: slip.CustomerName,
    phone: slip.CustomerPhone
  }" 
  :canCreate="canShowTaxInvoice" 
  @refresh="loadSlipDetail" 
/>
```

### Bước 3: Kiểm tra computed property `canShowTaxInvoice`

Đảm bảo computed property này tồn tại (nếu chưa có thì thêm vào):

```javascript
const canShowTaxInvoice = computed(() => {
  return slip.value && (slip.value.Status === 3 || slip.value.Status === 4)
})
```

## 🎯 SAU KHI HOÀN THÀNH:

Component sẽ tự động:
- ✅ Load thông tin hóa đơn thuế khi component mount
- ✅ Hiển thị thông tin hóa đơn nếu có
- ✅ Hiển thị nút "Tạo hóa đơn" nếu chưa có
- ✅ Quản lý tất cả logic create/update/delete

## 🔍 DEBUG:

Sau khi thêm component, mở Console trong browser và kiểm tra:
- `Loading tax invoice for slipId: X` - Component đang load
- `Tax invoice loaded: {...}` - Dữ liệu đã được load

Nếu thấy dữ liệu trong console nhưng không hiển thị UI, có thể do:
1. CSS conflict
2. Props không đúng format
3. Conditional rendering (`v-if`) bị false

## 📝 LƯU Ý:

- Component đã sẵn sàng sử dụng tại: `src/views/reconciliation/components/TaxInvoiceSection.vue`
- Không cần thay đổi gì trong component
- Chỉ cần import và sử dụng trong parent component
