# Hướng dẫn cập nhật CustomerReconciliationSlipDetail.vue

## Bước 1: Import component TaxInvoiceSection

Thêm vào phần import trong script:
```javascript
import TaxInvoiceSection from './components/TaxInvoiceSection.vue'
```

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

Tìm dòng 167-301 (từ `<!-- Tax Invoice Section -->` đến trước `<!-- Payment Proof Section`):

**XÓA toàn bộ phần này** và thay 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: Xóa các state và methods không cần thiết trong script

### Xóa các state variables:
```javascript
// XÓA các dòng này:
const taxInvoice = ref(null)
const processingTax = ref(false)
const taxAction = ref('')
const vatInfoOptions = ref([])
const loadingVatInfo = ref(false)
const selectedVatInfoForInvoice = ref(null)
const showCreateTaxInvoiceModal = ref(false)
const showUpdateTaxInvoiceModal = ref(false)
const showCreateVatModal = ref(false)
const taxInvoiceNote = ref('')
const updateInvoiceStatus = ref('')
const updateInvoiceNumber = ref('')
const updateInvoiceDate = ref('')
const selectedPdfFile = ref(null)
```

### Xóa các computed properties:
```javascript
// XÓA:
const canCreateTaxInvoice = computed(...)
const canUpdateTaxInvoice = computed(...)
const canDeleteTaxInvoice = computed(...)
```

### GIỮ LẠI computed property này:
```javascript
const canShowTaxInvoice = computed(() => {
  return slip.value && (slip.value.Status === 3 || slip.value.Status === 4)
})
```

### Xóa các methods:
```javascript
// XÓA tất cả các methods liên quan đến tax invoice:
- loadTaxInvoice()
- loadVatInfoByCustomer()
- getTaxInvoiceStatusBadgeClass()
- openCreateTaxInvoiceModal()
- closeCreateTaxInvoiceModal()
- openUpdateTaxInvoiceModal()
- closeUpdateTaxInvoiceModal()
- handlePdfFileChange()
- handleCreateTaxInvoice()
- submitCreateTaxInvoice()
- handleUpdateTaxInvoiceStatus()
- submitUpdateTaxInvoiceStatus()
- handleDeleteTaxInvoice()
- openCreateVatModal()
- closeCreateVatModal()
- onVatCreated()
```

## Bước 4: Xóa các imports không cần thiết

```javascript
// XÓA:
import taxService from '@/services/taxService'
import vatInfoService from '@/services/vatInfoService'
import CreateOrUpdateVatInfo from '@/views/crm/customer/detail/components/CreateOrUpdateVatInfo.vue'
```

## Bước 5: Cập nhật onMounted

```javascript
// TRƯỚC:
onMounted(async () => {
  await loadSlipDetail()
  await loadTaxInvoice()
})

// SAU:
onMounted(async () => {
  await loadSlipDetail()
})
```

## Bước 6: Xóa các modals không cần thiết

Tìm và xóa các modal sau trong template:
- Modal tạo hóa đơn thuế
- Modal cập nhật trạng thái hóa đơn
- Modal tạo VAT info

## Bước 7: Xóa CSS không cần thiết

Xóa các CSS class sau trong style section:
```css
/* Tax Invoice Section */
.tax-invoice-section { ... }
.tax-invoice-info { ... }
```

## Tóm tắt:

Component TaxInvoiceSection đã được tạo tại:
`src/views/reconciliation/components/TaxInvoiceSection.vue`

Component này đã bao gồm:
- ✅ Hiển thị thông tin hóa đơn thuế
- ✅ Tạo hóa đơn thuế mới
- ✅ Cập nhật trạng thái hóa đơn
- ✅ Xóa hóa đơn thuế
- ✅ Quản lý VAT info
- ✅ Tất cả modals và logic

Chỉ cần import và sử dụng component, không cần code phức tạp trong parent component nữa!
