<template>
	<div class="space-y-6">
		<!-- 标题和操作按钮 -->
		<div class="flex items-center justify-between">
			<div>
			</div>
			<div class="flex gap-2">
				<Button 
							@click="refreshRecords"
							:loading="$resources.dnsRecords.loading"
							variant="outline"
							size="sm"
						>
							<RefreshCwIcon class="h-4 w-4 mr-1" />
							{{ $t('Refresh') }}
						</Button>
				<Button 
							v-if="selectedRecords.length > 0"
							@click="batchDeleteRecords"
							variant="outline"
							size="sm"
							class="text-red-600 hover:text-red-700"
						>
							<Trash2Icon class="h-4 w-4 mr-1" />
							{{ $t('Delete Selected') }} ({{ selectedRecords.length }})
						</Button>
				<Button 
							@click="addNewRow"
							variant="solid"
							size="sm"
						>
							<PlusIcon class="h-4 w-4 mr-1" />
							{{ $t('Add Record') }}
						</Button>
			</div>
		</div>

		<!-- 加载状态 -->
		<div v-if="$resources.dnsRecords.loading" class="flex items-center justify-center py-12">
			<div class="flex items-center space-x-2">
				<Loader2Icon class="h-5 w-5 animate-spin text-gray-500" />
				<span class="text-gray-500">{{ $t('Loading DNS records...') }}</span>
			</div>
		</div>

		<!-- 错误状态 -->
		<div v-else-if="$resources.dnsRecords.error" class="rounded-md border border-red-200 bg-red-50 p-4">
			<div class="flex items-center">
				<AlertCircleIcon class="h-5 w-5 text-red-400 mr-2" />
				<div>
					<h3 class="text-sm font-medium text-red-800">{{ $t('Load failed') }}</h3>
					<p class="text-sm text-red-700 mt-1">{{ $resources.dnsRecords.error }}</p>
				</div>
			</div>
		</div>

		<!-- DNS记录列表 -->
		<div v-else-if="!$resources.dnsRecords.loading && !$resources.dnsRecords.error" class="space-y-4">
			<div class="overflow-hidden rounded-md border border-gray-200">
				<table class="min-w-full divide-y divide-gray-200">
					<thead class="bg-gray-50">
						<tr>
							<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
								<input 
									type="checkbox" 
									class="rounded border-gray-300" 
									:checked="isAllSelected"
									:indeterminate="isIndeterminate"
									@change="toggleSelectAll"
								/>
							</th>
							<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
								{{ $t('Number') }}
							</th>
							<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
								{{ $t('Hostname') }} *
							</th>
							<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
								{{ $t('Type') }} *
							</th>
							<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
								{{ $t('Line') }}
							</th>
							<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
								{{ $t('Value') }} *
							</th>
							<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
								{{ $t('TTL') }}
							</th>
							<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
								{{ $t('Priority') }}
							</th>
							<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
								{{ $t('Status') }}
							</th>
							<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
								{{ $t('Actions') }}
							</th>
						</tr>
					</thead>
					<tbody class="bg-white divide-y divide-gray-200">
						<!-- 现有记录 -->
						<tr v-for="(record, index) in dnsRecords" :key="record.id || `temp-${index}`" class="hover:bg-gray-50">
							<td class="px-4 py-4 whitespace-nowrap">
								<input 
									type="checkbox" 
									class="rounded border-gray-300" 
									:checked="selectedRecords.includes(String(record.id))"
									@change="toggleRecordSelection(record.id)"
									:disabled="record.isNew"
								/>
							</td>
							<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-900">
								{{ record.isNew ? '-' : (dnsRecords.filter(r => !r.isNew).findIndex(r => r.id === record.id) + 1) }}
							</td>
							<td class="px-4 py-4 whitespace-nowrap">
								<!-- 主机名编辑 -->
								<div v-if="record.editing" class="flex items-center space-x-2">
									<input 
										v-model="record.host" 
										type="text" 
										class="w-24 px-2 py-1 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
										:class="{ 'bg-gray-100 text-gray-500 cursor-not-allowed': !record.isNew }"
										:placeholder="$t('Hostname')"
										:disabled="!record.isNew"
									/>
								</div>
								<div v-else class="text-sm text-gray-900">
									{{ record.host || '-' }}
								</div>
							</td>
							<td class="px-4 py-4 whitespace-nowrap">
								<!-- 类型编辑 -->
								<div v-if="record.editing" class="flex items-center space-x-2">
									<select 
										v-model="record.type" 
										@change="handleRecordTypeChange(record)"
										class="w-20 px-2 py-1 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
										:class="{ 'bg-gray-100 text-gray-500 cursor-not-allowed': !record.isNew }"
										:disabled="!record.isNew"
									>
										<option value="A">A</option>
										<option value="AAAA">AAAA</option>
										<option value="CNAME">CNAME</option>
										<option value="MX">MX</option>
										<option value="NS">NS</option>
										<option value="TXT">TXT</option>
										<option value="SRV">SRV</option>
									</select>
								</div>
								<div v-else>
									<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium" 
										:class="{
											'bg-green-100 text-green-800': record.type === 'A',
											'bg-blue-100 text-blue-800': record.type === 'AAAA',
											'bg-yellow-100 text-yellow-800': record.type === 'CNAME',
											'bg-purple-100 text-purple-800': record.type === 'MX',
											'bg-indigo-100 text-indigo-800': record.type === 'NS',
											'bg-gray-100 text-gray-800': record.type === 'TXT',
											'bg-orange-100 text-orange-800': record.type === 'SRV',
											'bg-gray-100 text-gray-800': !record.type
										}">
										{{ record.type || $t('Unknown') }}
									</span>
								</div>
							</td>
							<td class="px-4 py-4 whitespace-nowrap">
								<!-- 线路编辑 -->
								<div v-if="record.editing" class="flex items-center space-x-2">
									<select 
										v-model="record.line" 
										class="w-20 px-2 py-1 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
									>
										<option value="">{{ $t('Default') }}</option>
										<option value="LTEL">{{ $t('Telecom') }}</option>
										<option value="LCNC">{{ $t('Unicom') }}</option>
										<option value="LMOB">{{ $t('Mobile') }}</option>
										<option value="LEDU">{{ $t('Education Network') }}</option>
										<option value="LSEO">{{ $t('Search Engine') }}</option>
									</select>
								</div>
								<div v-else class="text-sm text-gray-500">
									{{ getLineDisplayName(record.line) }}
								</div>
							</td>
							<td class="px-4 py-4 whitespace-nowrap">
								<!-- 对应值编辑 -->
								<div v-if="record.editing" class="flex items-center space-x-2">
									<input 
										v-model="record.value" 
										type="text" 
										class="w-32 px-2 py-1 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
										:placeholder="$t('Record Value')"
									/>
								</div>
								<div v-else class="text-sm text-gray-900 max-w-xs truncate" :title="record.value">
									{{ record.value || '-' }}
								</div>
							</td>
							<td class="px-4 py-4 whitespace-nowrap">
								<!-- TTL编辑 -->
								<div v-if="record.editing" class="flex items-center space-x-2">
									<input 
										v-model="record.ttl" 
										type="number" 
										min="60" 
										max="86400"
										class="w-20 px-2 py-1 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
									/>
								</div>
								<div v-else class="text-sm text-gray-500">
									{{ record.ttl || '600' }}
								</div>
							</td>
							<td class="px-4 py-4 whitespace-nowrap">
								<!-- 优先级编辑 -->
								<div v-if="record.editing && (record.type === 'MX' || record.type === 'SRV')" class="flex items-center space-x-2">
									<input 
										v-model="record.level" 
										type="number" 
										min="1" 
										max="100"
										class="w-16 px-2 py-1 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
									/>
								</div>
								<div v-else class="text-sm text-gray-500">
									{{ (record.type === 'MX' || record.type === 'SRV') && record.level ? record.level : '-' }}
								</div>
							</td>
							<td class="px-4 py-4 whitespace-nowrap text-sm">
								<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
									{{ $t('Normal') }}
								</span>
							</td>
							<td class="px-4 py-4 whitespace-nowrap text-sm">
								<div class="flex items-center space-x-1">
									<Button 
										v-if="!record.editing"
										@click="editRecord(record)"
										variant="ghost"
										size="sm"
										class="text-blue-600 hover:text-blue-700"
									>
										{{ $t('Edit') }}
									</Button>
									<Button 
										v-if="record.editing"
										@click="saveRecord(record)"
										variant="ghost"
										size="sm"
										class="text-green-600 hover:text-green-700"
									>
										{{ $t('Save') }}
									</Button>
									<Button 
										v-if="record.editing"
										@click="cancelEdit(record)"
										variant="ghost"
										size="sm"
										class="text-gray-600 hover:text-gray-700"
									>
										{{ $t('Cancel') }}
									</Button>
									<Button 
										v-if="!record.editing && !record.isNew"
										@click="deleteRecord(record)"
										variant="ghost"
										size="sm"
										class="text-red-600 hover:text-red-700"
									>
										{{ $t('Delete') }}
									</Button>
								</div>
							</td>
						</tr>
					</tbody>
				</table>
			</div>

			<!-- 分页 -->
			<div v-if="pagination.total > pagination.limit" class="flex flex-col items-center space-y-4">
				<div class="text-sm text-gray-700">
					{{ $t('Showing') }} {{ (pagination.pageno - 1) * pagination.limit + 1 }} - 
					{{ Math.min(pagination.pageno * pagination.limit, pagination.total) }} {{ $t('of') }} 
					{{ pagination.total }} {{ $t('records') }}
				</div>
				<div class="flex items-center space-x-2">
					<Button 
						@click="changePage(pagination.pageno - 1)"
						:disabled="pagination.pageno <= 1"
						variant="outline"
						size="sm"
						class="px-3"
					>
						←
					</Button>
					<div class="flex items-center space-x-1">
						<Button 
							v-for="page in getVisiblePages()" 
							:key="page"
							@click="changePage(page)"
							:class="[
								'px-3 py-1 text-sm rounded',
								page === pagination.pageno 
									? '!bg-[#1fc76f] text-white' 
									: 'bg-white text-gray-700 border border-gray-300 hover:bg-gray-50'
							]"
							:disabled="page === pagination.pageno"
						>
							{{ page }}
						</Button>
					</div>
					<Button 
						@click="changePage(pagination.pageno + 1)"
						:disabled="pagination.pageno >= pagination.pagecount"
						variant="outline"
						size="sm"
						class="px-3"
					>
						→
					</Button>
				</div>
			</div>
		</div>

		<!-- 空状态 -->
		<div v-else-if="!$resources.dnsRecords.loading && !$resources.dnsRecords.error && dnsRecords.length === 0" class="text-center py-12">
			<GlobeIcon class="mx-auto h-12 w-12 text-gray-400" />
			<h3 class="mt-2 text-sm font-medium text-gray-900">{{ $t('No DNS records yet') }}</h3>
			<p class="mt-1 text-sm text-gray-500">{{ $t('Start adding your first DNS record') }}</p>
			<div class="mt-6">
				<Button @click="addNewRow" variant="solid">
					<PlusIcon class="h-4 w-4 mr-1" />
					{{ $t('Add Record') }}
				</Button>
			</div>
		</div>
	</div>
</template>

<script>
import { getCachedDocumentResource, Badge, Button, createResource } from 'jingrow-ui';
import { h, defineAsyncComponent } from 'vue';
import { toast } from 'vue-sonner';
import { getToastErrorMessage } from '../utils/toast';
import { renderDialog, confirmDialog } from '../utils/components';
import RefreshCwIcon from '~icons/lucide/refresh-cw';
import PlusIcon from '~icons/lucide/plus';
import Loader2Icon from '~icons/lucide/loader-2';
import AlertCircleIcon from '~icons/lucide/alert-circle';
import EditIcon from '~icons/lucide/edit';
import Trash2Icon from '~icons/lucide/trash-2';
import GlobeIcon from '~icons/lucide/globe';
import SettingsIcon from '~icons/lucide/settings';

export default {
	name: 'JsiteDomainDNSRecords',
	props: ['domain'],
	data() {
		return {
			dnsRecords: [],
			pagination: {
				pageno: 1,
				limit: 10,
				total: 0,
				pagecount: 0
			},
			selectedRecords: [] // 用于存储选中的记录ID
		};
	},
	resources: {
		dnsRecords() {
			return {
				url: 'jcloud.api.domain_west.get_jingrow_domain_dns_records',
				params: {
					domain: this.$domain.pg?.domain,
					limit: this.pagination.limit,
					pageno: this.pagination.pageno
				},
				auto: true,
				onSuccess: (response) => {
					if (response.status === 'success' && response.data) {
						// 为每个记录添加编辑状态
						this.dnsRecords = (response.data.items || []).map(record => ({
							...record,
							editing: false,
							isNew: false
						}));
						
						this.pagination = {
							pageno: response.data.pageno || 1,
							limit: response.data.limit || 20,
							total: response.data.total || 0,
							pagecount: response.data.pagecount || 0
						};
					} else {
						this.error = response.message || '获取DNS记录失败';
					}
				},
				onError: (error) => {
					this.error = getToastErrorMessage(error);
				}
			};
		}
	},
	methods: {
		// 刷新记录
		refreshRecords() {
			// 更新资源参数并立即重新加载
			this.$resources.dnsRecords.update({
				params: {
					domain: this.$domain.pg?.domain,
					limit: this.pagination.limit,
					pageno: this.pagination.pageno
				}
			});
			this.$resources.dnsRecords.reload();
		},

		// 切换页面
		changePage(page) {
			if (page >= 1 && page <= this.pagination.pagecount) {
				this.pagination.pageno = page;
				// 更新资源参数并立即重新加载
				this.$resources.dnsRecords.update({
					params: {
						domain: this.$domain.pg?.domain,
						limit: this.pagination.limit,
						pageno: this.pagination.pageno
					}
				});
				this.$resources.dnsRecords.reload();
			}
		},

		// 获取记录类型样式
		getRecordTypeVariant(type) {
			const variantMap = {
				'A': 'success',
				'AAAA': 'info',
				'CNAME': 'warning',
				'MX': 'primary',
				'NS': 'info',
				'TXT': 'secondary',
				'SRV': 'warning'
			};
			return variantMap[type] || 'default';
		},

		// 获取线路显示名称
		getLineDisplayName(line) {
			const lineMap = {
				'LTEL': this.$t('Telecom'),
				'LCNC': this.$t('Unicom'),
				'LMOB': this.$t('Mobile'),
				'LEDU': this.$t('Education Network'),
				'LSEO': this.$t('Search Engine'),
				'': this.$t('Default')
			};
			return lineMap[line] || line;
		},

		// 添加新行
		addNewRow() {
			const newRecord = {
				id: null, // 新增记录没有ID
				host: '',
				type: 'A',
				line: '',
				value: '',
				ttl: 600,
				level: null, // 默认不设置优先级
				editing: true, // 新增记录直接进入编辑模式
				isNew: true
			};
			
			// 添加新记录到最前面
			this.dnsRecords.unshift(newRecord);
			
			// 如果默认类型是MX或SRV，设置默认优先级
			this.handleRecordTypeChange(newRecord);
		},

		// 处理记录类型变化时的优先级设置
		handleRecordTypeChange(record) {
			if (record.type === 'MX' || record.type === 'SRV') {
				// 如果是MX或SRV类型且优先级为空，则设置为默认值10
				if (!record.level) {
					record.level = 10;
				}
			} else {
				// 其他类型不设置优先级
				record.level = null;
			}
		},

		// 编辑记录
		editRecord(record) {
			// 保存原始值用于取消编辑
			record._original = { ...record };
			record.editing = true;
			record.isNew = false; // 确保不是新增记录
		},

		// 保存记录
		async saveRecord(record) {
			if (!record.host || !record.type || !record.value) {
				toast.error('主机名、类型和记录值不能为空');
				return;
			}

			// 验证TTL值
			if (record.ttl < 60 || record.ttl > 86400) {
				toast.error('TTL值必须在60~86400秒之间');
				return;
			}

			// 验证优先级 - 只在MX或SRV类型时验证
			if ((record.type === 'MX' || record.type === 'SRV') && (record.level < 1 || record.level > 100)) {
				toast.error('优先级必须在1~100之间');
				return;
			}

			try {
				let url, params;

				if (record.isNew) {
					// 新增记录
					url = 'jcloud.api.domain_west.west_domain_add_dns_record';
					params = {
						domain: this.$domain.pg.domain,
						record_type: record.type,
						host: record.host,
						value: record.value,
						ttl: record.ttl,
						line: record.line
					};
					// 只在MX或SRV类型时添加level参数
					if (record.type === 'MX' || record.type === 'SRV') {
						params.level = record.level;
					}
				} else {
					// 修改记录 - 只传递可修改的字段
					url = 'jcloud.api.domain_west.west_domain_modify_dns_record';
					params = {
						domain: this.$domain.pg.domain,
						record_id: record.id,
						value: record.value,
						ttl: record.ttl,
						line: record.line
					};
					// 只在MX或SRV类型时添加level参数
					if (record.type === 'MX' || record.type === 'SRV') {
						params.level = record.level;
					}
				}

				const request = createResource({
					url: url,
					params: params,
					onSuccess: (response) => {
						if (response.status === 'success') {
							toast.success('DNS记录保存成功');
							record.editing = false;
							record.isNew = false;
							// 重新加载记录列表（等待异步操作完成）
							setTimeout(() => {
								this.$resources.dnsRecords.update({
									params: {
										domain: this.$domain.pg?.domain,
										limit: this.pagination.limit,
										pageno: this.pagination.pageno
									}
								});
								this.$resources.dnsRecords.reload();
							}, 1000);
						} else {
							toast.error(response.message || '保存DNS记录失败');
						}
					},
					onError: (error) => {
						toast.error(getToastErrorMessage(error));
					}
				});
				request.submit();
			} catch (error) {
				toast.error('保存DNS记录失败');
				console.error('保存DNS记录失败:', error);
			}
		},

		// 取消编辑
		cancelEdit(record) {
			if (record.isNew) {
				// 如果是新增记录，直接删除
				const index = this.dnsRecords.indexOf(record);
				if (index > -1) {
					this.dnsRecords.splice(index, 1);
				}
			} else {
				// 如果是编辑中的记录，恢复其原始值
				if (record._original) {
					Object.assign(record, record._original);
					delete record._original;
				}
				record.editing = false;
			}
		},

		// 删除记录
		deleteRecord(record) {
			confirmDialog({
				title: '删除DNS记录',
				message: `确定要删除这条DNS记录吗？\n类型: ${record.type}\n主机记录: ${record.host}\n记录值: ${record.value}`,
				primaryAction: {
					label: '确定',
					variant: 'solid',
					class: 'bg-black text-white hover:bg-gray-800',
					onClick: ({ hide }) => {
						this.performDeleteRecord(record, hide);
					}
				}
			});
		},

		// 执行删除记录
		async performDeleteRecord(record, hide) {
			try {
				const request = createResource({
					url: 'jcloud.api.domain_west.west_domain_delete_dns_record',
					params: {
						domain: this.$domain.pg.domain,
						record_id: record.id
					},
					onSuccess: (response) => {
						if (response.status === 'success') {
							toast.success('DNS记录删除成功');
							hide();
							setTimeout(() => {
								this.$resources.dnsRecords.update({
									params: {
										domain: this.$domain.pg?.domain,
										limit: this.pagination.limit,
										pageno: this.pagination.pageno
									}
								});
								this.$resources.dnsRecords.reload();
							}, 1000);
						} else {
							toast.error(response.message || '删除DNS记录失败');
						}
					},
					onError: (error) => {
						toast.error(getToastErrorMessage(error));
					}
				});
				request.submit();
			} catch (error) {
				toast.error('删除DNS记录失败');
				console.error('删除DNS记录失败:', error);
			}
		},

		// 批量删除记录
		async batchDeleteRecords() {
			if (this.selectedRecords.length === 0) {
				toast.info('请选择要删除的记录');
				return;
			}

			confirmDialog({
				title: '批量删除DNS记录',
				message: `确定要删除选中的 ${this.selectedRecords.length} 条DNS记录吗？`,
				primaryAction: {
					label: '确定',
					variant: 'solid',
					class: 'bg-black text-white hover:bg-gray-800',
					onClick: ({ hide }) => {
						this.performBatchDeleteRecords(this.selectedRecords, hide);
					}
				}
			});
		},

		// 执行批量删除记录
		async performBatchDeleteRecords(recordIds, hide) {
			// 过滤出有效的记录ID
			const validRecordIds = recordIds
				.filter(id => id)
				.map(id => String(id))
				.filter(id => !id.startsWith('temp-'));
			
			if (validRecordIds.length === 0) {
				toast.error('没有有效的记录可以删除');
				return;
			}
			
			try {
				const request = createResource({
					url: 'jcloud.api.domain_west.west_domain_delete_dns_records',
					params: {
						domain: this.$domain.pg.domain,
						record_ids: validRecordIds
					},
					onSuccess: (response) => {
						if (response.status === 'success') {
							toast.success(response.message || `批量删除 ${validRecordIds.length} 条DNS记录成功`);
							hide();
							setTimeout(() => {
								this.$resources.dnsRecords.update({
									params: {
										domain: this.$domain.pg?.domain,
										limit: this.pagination.limit,
										pageno: this.pagination.pageno
									}
								});
								this.$resources.dnsRecords.reload();
							}, 1000);
							this.selectedRecords = []; // 清空选中
						} else if (response.status === 'partial_success') {
							toast.success(response.message || '批量删除部分成功');
							hide();
							setTimeout(() => {
								this.$resources.dnsRecords.update({
									params: {
										domain: this.$domain.pg?.domain,
										limit: this.pagination.limit,
										pageno: this.pagination.pageno
									}
								});
								this.$resources.dnsRecords.reload();
							}, 1000);
							this.selectedRecords = []; // 清空选中
						} else {
							toast.error(response.message || '批量删除DNS记录失败');
						}
					},
					onError: (error) => {
						toast.error(getToastErrorMessage(error));
					}
				});
				request.submit();
			} catch (error) {
				toast.error('批量删除DNS记录失败');
				console.error('批量删除DNS记录失败:', error);
			}
		},

		// 切换记录选中状态
		toggleRecordSelection(recordId) {
			// 只允许选择有效的记录ID（排除新增记录和空ID）
			if (!recordId) {
				return;
			}
			
			// 确保recordId是字符串类型
			const recordIdStr = String(recordId);
			if (recordIdStr.startsWith('temp-')) {
				return;
			}
			
			const index = this.selectedRecords.indexOf(recordIdStr);
			if (index > -1) {
				this.selectedRecords.splice(index, 1);
			} else {
				this.selectedRecords.push(recordIdStr);
			}
		},

		// 全选/取消全选
		toggleSelectAll(event) {
			const checkbox = event.target;
			if (checkbox.checked) {
				// 只选择有真实ID的记录（排除新增的记录）
				this.selectedRecords = this.dnsRecords
					.filter(record => record.id && !record.isNew)
					.map(record => String(record.id));
			} else {
				this.selectedRecords = [];
			}
		},



		// 获取可见的页码
		getVisiblePages() {
			const current = this.pagination.pageno;
			const total = this.pagination.pagecount;
			const pages = [];
			
			// 如果总页数小于等于5，显示所有页码
			if (total <= 5) {
				for (let i = 1; i <= total; i++) {
					pages.push(i);
				}
			} else {
				// 显示当前页附近的页码
				const start = Math.max(1, current - 2);
				const end = Math.min(total, current + 2);
				
				for (let i = start; i <= end; i++) {
					pages.push(i);
				}
			}
			
			return pages;
		}
	},
	computed: {
		$domain() {
			return getCachedDocumentResource('Jsite Domain', this.domain);
		},
		
		// 判断是否全选
		isAllSelected() {
			return this.dnsRecords.length > 0 && this.selectedRecords.length === this.dnsRecords.length;
		},

		// 判断是否半选
		isIndeterminate() {
			return this.selectedRecords.length > 0 && this.selectedRecords.length < this.dnsRecords.length;
		}
	},
	mounted() {
		// 组件会自动加载DNS记录，因为resources设置了auto: true
	}
};
</script>