# Insurance Navigation Specification

## Overview

This specification defines the insurance navigation functionality for the bank side, including insurance application list, company/product selection flows, and dashboard shortcuts.

## ADDED Requirements

### Requirement: Insurance Application List Page

The bank side MUST provide a dedicated page to list all insurance applications with search and pagination support.

#### Scenario: Display insurance application list

**Given** the user navigates to `/pagesBank/insurance/application/list`

**When** the page loads

**Then** the system SHALL display a list of all insurance applications with:
- Application ID
- Company name
- Product name
- Insurance amount
- Insurance term
- Status (pending/approved/rejected)
- Created timestamp
- Clickable items that navigate to application detail

#### Scenario: Filter insurance applications by status

**Given** the user is on the insurance application list page

**When** the user selects a status filter (All, Pending, Approved, Rejected)

**Then** the system SHALL display only applications matching the selected status

#### Scenario: Search insurance applications

**Given** the user is on the insurance application list page

**When** the user enters a search term in the search box

**Then** the system SHALL filter applications by:
- Application ID
- Company name
- Product name
- Policy number

**And** display only matching applications in real-time

#### Scenario: Paginate insurance applications

**Given** the user is on the insurance application list page with more than 20 applications

**When** the user scrolls to the bottom of the list

**Then** the system SHALL load the next page of applications automatically

**And** display a loading indicator while fetching

### Requirement: Company and Product Selection Flow

The audit detail page MUST support a multi-step navigation flow for selecting insurance company and product with search functionality.

#### Scenario: Navigate from audit detail to company selection

**Given** a loan application with status `DISBURSED` and no insurance

**When** the user clicks "购买保险" button

**Then** the system SHALL navigate to `/pagesBank/insurance/company/select` with parameters:
- `loanId`: The loan application ID
- `loanAmount`: The loan amount in yuan
- `loanTerm`: The loan term in months

#### Scenario: Search and select insurance company

**Given** the user is on the insurance company selection page

**When** the user enters a search term in the search box

**Then** the system SHALL filter companies by:
- Company name
- Contact information

**And** display only matching companies in real-time

#### Scenario: Select insurance company

**Given** the user selects a company from the list

**When** the selection is confirmed

**Then** the system SHALL navigate to `/pagesBank/insurance/product/select` with parameters:
- `loanId`: The loan application ID
- `companyId`: The selected company ID
- `loanAmount`: The loan amount in yuan
- `loanTerm`: The loan term in months

#### Scenario: Search and select insurance product

**Given** the user is on the insurance product selection page

**When** the user enters a search term in the search box

**Then** the system SHALL filter products by:
- Product name
- Product description
- Product type

**And** display only matching products in real-time

#### Scenario: Select insurance product

**Given** the user selects a product from the list

**When** the selection is confirmed

**Then** the system SHALL navigate to `/pagesBank/insurance/application/create` with parameters:
- `loanId`: The loan application ID
- `companyId`: The selected company ID
- `productId`: The selected product ID
- `loanAmount`: The loan amount in yuan
- `loanTerm`: The loan term in months

### Requirement: Dashboard Shortcuts Navigation

The dashboard shortcuts MUST navigate to the correct insurance management pages.

#### Scenario: Navigate to insurance application list

**Given** the user is on the bank dashboard

**When** the user clicks the "投保管理" shortcut

**Then** the system SHALL navigate to `/pagesBank/insurance/application/list`

#### Scenario: Navigate to claim application list

**Given** the user is on the bank dashboard

**When** the user clicks the "理赔管理" shortcut

**Then** the system SHALL navigate to `/pagesBank/insurance/claim/list`

## Implementation Notes

### File Locations

- `src/pagesBank/insurance/application/list.vue`: Insurance application list page with search and pagination
- `src/pagesBank/insurance/company/select.vue`: Company selection page with search
- `src/pagesBank/insurance/product/select.vue`: Product selection page with search
- `src/pagesBank/audit/detail.vue`: Updated with multi-step navigation
- `src/pagesBank/dashboard/index.vue`: Verified shortcuts configuration

### Key Functions

```typescript
// Navigate to company selection
function handleBuyInsurance() {
  uni.navigateTo({
    url: `/pagesBank/insurance/company/select?loanId=${id.value}&loanAmount=${amount}&loanTerm=${term}`,
  })
}

// Company selection handler
function handleSelectCompany(company: InsuranceCompany) {
  uni.navigateTo({
    url: `/pagesBank/insurance/product/select?loanId=${loanId.value}&companyId=${company.id}&loanAmount=${loanAmount.value}&loanTerm=${loanTerm.value}`,
  })
}

// Product selection handler
function handleSelectProduct(product: InsuranceProduct) {
  uni.navigateTo({
    url: `/pagesBank/insurance/application/create?loanId=${loanId.value}&companyId=${companyId.value}&productId=${product.id}&loanAmount=${loanAmount.value}&loanTerm=${loanTerm.value}`,
  })
}

// Search handler for lists
function handleSearch(keyword: string) {
  searchKeyword.value = keyword
  loadData(1) // Reset to first page
}

// Pagination handler
function handleLoadMore() {
  if (!loading.value && hasMore.value) {
    loadData(currentPage.value + 1)
  }
}
```

### Page Flow Diagram

```
/pagesBank/audit/detail
    │
    ├─→ "购买保险" button
    │
    ▼
/pagesBank/insurance/company/select (NEW)
    │
    ├─→ Search companies by name/contact
    │
    ├─→ Select company
    │
    ▼
/pagesBank/insurance/product/select (NEW)
    │
    ├─→ Search products by name/description/type
    │
    ├─→ Select product
    │
    ▼
/pagesBank/insurance/application/create (existing)
    │
    └─→ Submit application

/pagesBank/dashboard/index
    │
    ├─→ "投保管理" → /pagesBank/insurance/application/list (NEW)
    │   ├─→ Search by ID/company/product/policy
    │   ├─→ Filter by status
    │   └─→ Pagination support
    │
    └─→ "理赔管理" → /pagesBank/insurance/claim/list (existing)
```

### UI Components

#### Search Bar Component

```vue
<template>
  <view class="search-bar">
    <input
      v-model="keyword"
      placeholder="搜索公司名称、联系人..."
      @input="handleSearch"
    />
    <text v-if="keyword" class="clear-btn" @click="clearSearch">×</text>
  </view>
</template>
```

#### Status Filter Component

```vue
<template>
  <view class="status-filter">
    <view
      v-for="status in statusOptions"
      :key="status.value"
      class="filter-item"
      :class="{ active: currentStatus === status.value }"
      @click="selectStatus(status.value)"
    >
      {{ status.label }}
    </view>
  </view>
</template>
```

## Related Capabilities

- `bank-insurance-integration`: Core insurance integration functionality
- `bank-insurance-ui`: Insurance UI requirements