<template>
    <div class="vpn-policy-management">
        <el-row :gutter="20">
            <!-- 左侧服务器列表 -->
            <el-col :span="8">
                <el-card shadow="hover">
                    <template #header>
                        <div class="card-header">
                            <span>VPN服务器列表</span>
                        </div>
                    </template>
                    <div class="server-list">
                        <div 
                            v-for="server in serverList" 
                            :key="server.server_id"
                            class="server-item"
                            :class="{ active: selectedServer?.server_id === server.server_id }"
                            @click="selectServer(server)"
                        >
                            <div class="server-info">
                                <div class="server-name">
                                    <span class="status-indicator" :class="{ 'online': onlineServers.includes(server.server_id) }"></span>
                                    {{ server.name }}
                                </div>
                                <div class="server-ip">{{ server.server_ip }}</div>
                            </div>
                        </div>
                        <el-empty v-if="serverList.length === 0" description="暂无服务器配置" />
                    </div>
                </el-card>
            </el-col>

            <!-- 右侧策略管理 -->
            <el-col :span="16">
                <el-card shadow="hover" v-if="selectedServer">
                    <template #header>
                        <div class="card-header">
                            <span>{{ selectedServer.name }} - 策略管理</span>
                            <div class="header-actions">
                                <el-button type="primary" @click="showAddDialog">新增策略</el-button>
                                <el-button type="primary" @click="showMatchDialog">策略匹配</el-button>
                                <el-button type="success" @click="refreshPolicies">刷新</el-button>
                            </div>
                        </div>
                    </template>
                    
                    <!-- 搜索栏 -->
                    <div class="search-bar">
                        <el-form :model="searchForm" inline size="default">
                            <el-form-item label="源类型">
                                <el-select v-model="searchForm.src_type" placeholder="请选择源类型" clearable style="width: 120px;">
                                    <el-option label="IP地址" :value="0" />
                                    <el-option label="网段" :value="1" />
                                    <el-option label="用户ID" :value="2" />
                                    <el-option label="组ID" :value="3" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="目标类型">
                                <el-select v-model="searchForm.dst_type" placeholder="请选择目标类型" clearable style="width: 120px;">
                                    <el-option label="IP地址" :value="0" />
                                    <el-option label="网段" :value="1" />
                                    <el-option label="用户ID" :value="2" />
                                    <el-option label="组ID" :value="3" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="协议">
                                <el-select v-model="searchForm.protocol" placeholder="请选择协议" clearable style="width: 120px;">
                                    <el-option 
                                        v-for="item in protocolOptions" 
                                        :key="item.value" 
                                        :label="item.label" 
                                        :value="item.value" 
                                    />
                                </el-select>
                                <el-button 
                                    type="text" 
                                    @click="showCustomProtocolInput = !showCustomProtocolInput"
                                    style="margin-left: 8px;"
                                >
                                    {{ showCustomProtocolInput ? '取消' : '+ 自定义' }}
                                </el-button>
                                <div v-if="showCustomProtocolInput" style="margin-top: 8px;">
                                    <el-input 
                                        v-model.number="customProtocolInput" 
                                        placeholder="输入协议号(0-512)" 
                                        type="number"
                                        :min="0"
                                        :max="512"
                                        style="width: 120px;"
                                        @keyup.enter="addCustomProtocol"
                                    />
                                    <el-button type="primary" size="small" @click="addCustomProtocol" style="margin-left: 8px;">添加</el-button>
                                </div>
                            </el-form-item>
                            <el-form-item label="动作">
                                <el-select v-model="searchForm.action" placeholder="请选择动作" clearable style="width: 100px;">
                                    <el-option label="拒绝" :value="0" />
                                    <el-option label="允许" :value="1" />
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="searchPolicies">搜索</el-button>
                                <el-button @click="resetSearch">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </div>

                    <!-- 策略表格 -->
                    <el-table 
                        :data="policyList" 
                        style="width: 100%; margin-top: 20px;"
                        v-loading="loading"
                        stripe
                    >
                        <el-table-column prop="ID" label="ID" width="80" />
                        <!-- 名称 -->
                        <el-table-column prop="name" label="名称" min-width="120" show-overflow-tooltip />
                        <el-table-column label="源信息" min-width="150">
                            <template #default="scope">
                                <div>{{ getSrcTypeText(scope.row.src_type) }}</div>
                                <div class="text-secondary">{{ getSrcValue(scope.row) }}</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="目标信息" min-width="150">
                            <template #default="scope">
                                <div>{{ getDstTypeText(scope.row.dst_type) }}</div>
                                <div class="text-secondary">{{ getDstValue(scope.row) }}</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="协议/动作" width="120">
                            <template #default="scope">
                                <div>{{ getProtocolText(scope.row.protocol) }}</div>
                                <el-tag :type="scope.row.action === 1 ? 'success' : 'danger'" size="small">
                                    {{ scope.row.action === 1 ? '允许' : '拒绝' }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="info" label="描述" min-width="120" show-overflow-tooltip />
                        <el-table-column prop="created_at" label="创建时间" width="160">
                            <template #default="scope">
                                {{ formatTime(scope.row.CreatedAt) }}
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="150" fixed="right">
                            <template #default="scope">
                                <el-button type="primary" size="small" text @click="editPolicy(scope.row)">
                                    编辑
                                </el-button>
                                <el-button type="danger" size="small" text @click="deletePolicy(scope.row)">
                                    删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <!-- 分页 -->
                    <div class="pagination-wrapper">
                        <el-pagination
                            v-model:current-page="pagination.page"
                            v-model:page-size="pagination.size"
                            :page-sizes="[10, 20, 50, 100]"
                            :total="pagination.total"
                            layout="total, sizes, prev, pager, next, jumper"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                        />
                    </div>
                </el-card>

                <el-card shadow="hover" v-else>
                    <el-empty description="请选择VPN服务器以管理策略" />
                </el-card>
            </el-col>
        </el-row>

        <!-- 策略编辑对话框 -->
        <el-dialog 
            :title="dialogTitle" 
            v-model="dialogVisible" 
            width="800px"
            @close="resetForm"
        >
            <el-form 
                :model="policyForm" 
                :rules="formRules" 
                ref="policyFormRef"
                label-width="120px" 
                size="default"
            >
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="策略名称" prop="name">
                            <el-input v-model="policyForm.name"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="服务器ID" prop="server_id">
                            <el-input v-model="policyForm.server_id" disabled />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="IP类型" prop="ip_type">
                            <el-select v-model="policyForm.ip_type" placeholder="请选择IP类型">
                                <el-option label="IPv4" :value="4" />
                                <el-option label="IPv6" :value="6" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="源类型" prop="src_type">
                            <el-select v-model="policyForm.src_type" placeholder="请选择源类型" @change="onSrcTypeChange">
                                <el-option label="IP地址" :value="0" />
                                <el-option label="网段" :value="1" />
                                <el-option label="用户ID" :value="2" />
                                <el-option label="组ID" :value="3" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="源值" prop="src_value" :rules="getSrcRules()">
                            <el-input 
                                v-model="policyForm.src_value" 
                                :placeholder="getSrcPlaceholder()"
                                clearable
                            />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="目标类型" prop="dst_type">
                            <el-select v-model="policyForm.dst_type" placeholder="请选择目标类型" @change="onDstTypeChange">
                                <el-option label="IP地址" :value="0" />
                                <el-option label="网段" :value="1" />
                                <el-option label="用户ID" :value="2" />
                                <el-option label="组ID" :value="3" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="目标值" prop="dst_value" :rules="getDstRules()">
                            <el-input 
                                v-model="policyForm.dst_value" 
                                :placeholder="getDstPlaceholder()"
                                clearable
                            />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="协议" prop="protocol">
                            <el-select v-model="policyForm.protocol" placeholder="请选择协议">
                                <el-option 
                                    v-for="item in protocolOptions" 
                                    :key="item.value" 
                                    :label="item.label" 
                                    :value="item.value" 
                                />
                            </el-select>
                            <el-button 
                                type="text" 
                                @click="showCustomProtocolInput = !showCustomProtocolInput"
                                style="margin-left: 8px;"
                            >
                                {{ showCustomProtocolInput ? '取消' : '+ 自定义' }}
                            </el-button>
                            <div v-if="showCustomProtocolInput" style="margin-top: 8px;">
                                <el-input 
                                    v-model.number="customProtocolInput" 
                                    placeholder="输入协议号(0-512)" 
                                    type="number"
                                    :min="0"
                                    :max="512"
                                    style="width: 120px;"
                                    @keyup.enter="addCustomProtocol"
                                />
                                <el-button type="primary" size="small" @click="addCustomProtocol" style="margin-left: 8px;">添加</el-button>
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="动作" prop="action">
                            <el-radio-group v-model="policyForm.action">
                                <el-radio :label="1">允许</el-radio>
                                <el-radio :label="0">拒绝</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-form-item label="策略描述" prop="info">
                    <el-input 
                        v-model="policyForm.info" 
                        type="textarea" 
                        :rows="3"
                        placeholder="请输入策略描述信息"
                    />
                </el-form-item>
            </el-form>

            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="submitPolicy" :loading="submitLoading">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 策略匹配对话框 -->
        <el-dialog 
            title="策略匹配测试" 
            v-model="matchDialogVisible" 
            width="900px"
            @close="resetMatchForm"
        >
            <el-form 
                :model="matchForm" 
                ref="matchFormRef"
                label-width="120px" 
                size="default"
                class="match-form"
            >
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="服务器" prop="server_id">
                            <el-select v-model="matchForm.server_id" placeholder="请选择服务器" style="width: 100%;">
                                <el-option 
                                    v-for="server in serverList" 
                                    :key="server.server_id"
                                    :label="server.name" 
                                    :value="server.server_id"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="IP类型" prop="ip_type">
                            <el-select v-model="matchForm.ip_type" placeholder="请选择IP类型">
                                <el-option label="IPv4" :value="4" />
                                <el-option label="IPv6" :value="6" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="源类型" prop="src_type">
                            <el-select v-model="matchForm.src_type" placeholder="请选择源类型" @change="onMatchSrcTypeChange">
                                <el-option label="IP地址" :value="0" />
                                <el-option label="网段" :value="1" />
                                <el-option label="用户ID" :value="2" />
                                <el-option label="组ID" :value="3" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="源值" prop="src_value">
                            <el-input 
                                v-model="matchForm.src_value" 
                                :placeholder="getSrcPlaceholder()"
                                clearable
                            />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="目标类型" prop="dst_type">
                            <el-select v-model="matchForm.dst_type" placeholder="请选择目标类型" @change="onMatchDstTypeChange">
                                <el-option label="IP地址" :value="0" />
                                <el-option label="网段" :value="1" />
                                <el-option label="用户ID" :value="2" />
                                <el-option label="组ID" :value="3" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="目标值" prop="dst_value">
                            <el-input 
                                v-model="matchForm.dst_value" 
                                :placeholder="getDstPlaceholder()"
                                clearable
                            />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="协议" prop="protocol">
                            <el-select v-model="matchForm.protocol" placeholder="请选择协议">
                                <el-option 
                                    v-for="item in protocolOptions" 
                                    :key="item.value" 
                                    :label="item.label" 
                                    :value="item.value" 
                                />
                            </el-select>
                            <el-button 
                                type="text" 
                                @click="showCustomProtocolInput = !showCustomProtocolInput"
                                style="margin-left: 8px;"
                            >
                                {{ showCustomProtocolInput ? '取消' : '+ 自定义' }}
                            </el-button>
                            <div v-if="showCustomProtocolInput" style="margin-top: 8px;">
                                <el-input 
                                    v-model.number="customProtocolInput" 
                                    placeholder="输入协议号(0-512)" 
                                    type="number"
                                    :min="0"
                                    :max="512"
                                    style="width: 120px;"
                                    @keyup.enter="addCustomProtocol"
                                />
                                <el-button type="primary" size="small" @click="addCustomProtocol" style="margin-left: 8px;">添加</el-button>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <div class="match-actions">
                <el-button type="primary" @click="matchPolicy" :loading="matchLoading">匹配策略</el-button>
                <el-button @click="resetMatchForm">重置</el-button>
            </div>

            <!-- 匹配结果 -->
            <div v-if="matchResult" class="match-result">
                <h4>匹配结果:</h4>
                <div class="match-result-item">
                    <span>策略ID:</span>
                    <span>{{ matchResult.ID>0? matchResult.ID : '未匹配到策略，使用服务器配置'}}</span>
                </div>
                <div class="match-result-item" v-if="matchResult.ID>0">
                    <span>策略名称:</span>
                    <span>{{ matchResult.name }}</span>
                </div>
                <div class="match-result-item">
                    <span>处置动作:</span>
                    <el-tag :type="matchResult.action === 1 ? 'success' : 'danger'" size="small">
                                    {{ matchResult.action === 1 ? '允许' : '拒绝' }}
                                </el-tag>
                </div>

            </div>

            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="matchDialogVisible = false">关闭</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { 
    GetVPNServerConfigHandler, 
    GetVPNServerOnlineListHandler,
    GetMyVPNPolicyHandler,
    CreateMyVPNPolicyHandler,
    UpdateMyVPNPolicyHandler,
    DeleteMyVPNPolicyHandler,
    MatchVPNPolicyHandler
} from '@/api/vpn';

// 全局协议选项数组
const protocolOptions = ref([
    { label: '全部协议', value: 0 },
    { label: 'ICMP', value: 1 },
    { label: 'IGMP', value: 2},
    { label: 'TCP', value: 6 },
    { label: 'EGP', value: 8 },
    { label: 'IGP', value: 9 },
    { label: 'UDP', value: 17 },
    { label: 'GRE', value: 47 },
    { label: 'ESP', value: 50 },
    { label:"AH", value: 51},
    { label: 'IPv6-ICMP', value: 58},
]);

// 自定义协议输入
const customProtocolInput = ref('');
const showCustomProtocolInput = ref(false);

// 添加自定义协议
const addCustomProtocol = () => {
    const value = parseInt(customProtocolInput.value);
    if (isNaN(value) || value < 0 || value > 512) {
        ElMessage.error('协议号必须在0-512范围内');
        return;
    }
    
    // 检查是否已存在
    const exists = protocolOptions.value.some(item => item.value === value);
    if (exists) {
        ElMessage.warning('该协议号已存在');
        return;
    }
    
    protocolOptions.value.push({ label: `自定义(${value})`, value });
    customProtocolInput.value = '';
    showCustomProtocolInput.value = false;
    ElMessage.success('添加自定义协议成功');
};

// VPN策略基础接口定义
interface VPNPolicyBase {
    name: string;
    server_id: string;
    ip_type: number;    // 4, 6
    src_type: number;   // 0-ip,1-network, 2-userID, 3-groupID
    src_ip: string;     // type 1, set 0.0.0.0/0 is all
    src_user_id: number; // 0-all, more than 0, user
    dst_type: number;   // 0-ip,1-network, 2-userID, 3-groupID
    dst_ip: string;
    dst_user_id: number;
    protocol: number;   // 0:is all, 1-ICMP, 17-UDP etc.
    action: number;     // 0-deny, 1-permit
    info: string;
    src_value: string;
    dst_value: string;
}

// VPN策略完整接口定义
interface VPNPolicy extends VPNPolicyBase {
    ID: number;
    CreatedAt: string;
    UpdatedAt: string;
}

// 服务器配置接口
interface ServerConfig {
    name: string;
    server_id: string;
    server_ip: string;
    server_ipv6: string;
    server_ip_type: number;
    server_info: string;
    udp_port: number;
    tcp_port: number;
    protocol: number;
    ip_type: number;
    ipv4_address_pool: string;
    ipv6_address_pool: string;
    dns_server: string;
    tunnel: string;
    allow_user_id: Array<{id: number}>;
    encryption: string;
    hash: string;
    no_policy_action: number;
    user_max_device: number;
    duration_time: number;
    ipv4_router: Array<{type: number, ip: string, prefix: number}>;
    ipv6_router: Array<{type: number, ip: string, prefix: number}>;
}

// 响应式数据
const serverList = ref<ServerConfig[]>([]);
const selectedServer = ref<ServerConfig | null>(null);
const policyList = ref<VPNPolicy[]>([]);
const onlineServers = ref<string[]>([]);
const loading = ref(false);
const submitLoading = ref(false);
const dialogVisible = ref(false);
const matchDialogVisible = ref(false);
const isEdit = ref(false);
const policyFormRef = ref();

// 匹配表单
const matchForm = reactive({
    server_id: '',
    ip_type: 4,
    src_type: 0,
    src_value: '',
    dst_type: 0,
    dst_value: '',
    protocol: 0,
    src_ip: '',
    src_user_id: 0,
    dst_ip: '',
    dst_user_id: 0
});

// 匹配结果
const matchResult = ref<VPNPolicy>();
const matchLoading = ref(false);

// 搜索表单
const searchForm = reactive({
    src_type: undefined as number | undefined,
    dst_type: undefined as number | undefined,
    protocol: undefined as number | undefined,
    action: undefined as number | undefined
});

// 分页信息
const pagination = reactive({
    page: 1,
    size: 20,
    total: 0
});

// 策略表单
const policyForm = reactive<VPNPolicyBase & { id?: number }>({
    name: '',
    id: undefined,
    server_id: '',
    ip_type: 4,
    src_type: 0,
    src_value: '',
    dst_value: '',
    src_ip: '',
    src_user_id: 0,
    dst_type: 0,
    dst_ip: '',
    dst_user_id: 0,
    protocol: 0,
    action: 1,
    info: ''
});

// 表单验证规则
const formRules = {
    server_id: [{ required: true, message: '服务器ID不能为空', trigger: 'blur' }],
    ip_type: [{ required: true, message: '请选择IP类型', trigger: 'change' }],
    src_type: [{ required: true, message: '请选择源类型', trigger: 'change' }],
    dst_type: [{ required: true, message: '请选择目标类型', trigger: 'change' }],
    protocol: [{ required: true, message: '请选择协议', trigger: 'change' }],
    action: [{ required: true, message: '请选择动作', trigger: 'change' }]
};

// 计算属性
const dialogTitle = computed(() => isEdit.value ? '编辑策略' : '新增策略');

// 获取服务器配置列表
const getServerConfigs = async () => {
    try {
        const response = await GetVPNServerConfigHandler();
        serverList.value = response.data;
    } catch (error) {
        ElMessage.error('获取服务器配置失败');
        console.error(error);
    }
};

// 获取在线服务器列表
const getOnlineServers = async () => {
    try {
        const response = await GetVPNServerOnlineListHandler();
        if (response.data && Array.isArray(response.data)) {
            onlineServers.value = response.data.map((server: any) => server.server_id);
        }
    } catch (error) {
        console.error('获取在线服务器状态失败:', error);
    }
};

// 启动定时查询
const startOnlineStatusTimer = () => {
    getOnlineServers();
    setInterval(() => {
        getOnlineServers();
    }, 20000);
};

// 选择服务器
const selectServer = (server: ServerConfig) => {
    selectedServer.value = server;
    policyForm.server_id = server.server_id;
    loadPolicies();
};

// 加载策略列表
const loadPolicies = async () => {
    if (!selectedServer.value) return;
    
    loading.value = true;
    try {
        const params = {
            server_id: selectedServer.value.server_id,
            page: pagination.page,
            size: pagination.size,
            ...searchForm
        };
        
        const response = await GetMyVPNPolicyHandler(params);
        if (response["code"] === 0) {
            policyList.value = response.data|| [];
            pagination.total = policyList.value.length;
        } else {
            ElMessage.error(response["message"] || '获取策略列表失败');
        }
    } catch (error) {
        ElMessage.error('获取策略列表失败');
        console.error(error);
    } finally {
        loading.value = false;
    }
};

// 搜索策略
const searchPolicies = () => {
    pagination.page = 1;
    loadPolicies();
};

// 重置搜索
const resetSearch = () => {
    Object.keys(searchForm).forEach(key => {
        searchForm[key] = undefined;
    });
    pagination.page = 1;
    loadPolicies();
};

// 刷新策略
const refreshPolicies = () => {
    pagination.page = 1;
    loadPolicies();
};

//显示匹配对话框
const showMatchDialog = () => {
    matchDialogVisible.value = true;
    // 默认选择当前选中的服务器
    if (selectedServer.value) {
        matchForm.server_id = selectedServer.value.server_id;
    }
};

// 匹配策略
const matchPolicy = async () => {
    if (!matchForm.server_id) {
        ElMessage.warning('请选择服务器');
        return;
    }
    
    // 根据类型设置对应的值
    switch (matchForm.src_type) {
        case 0:
        case 1:  
            matchForm.src_ip = matchForm.src_value;
            matchForm.src_user_id = 0;
            break;
        case 2:
        case 3:  
            matchForm.src_user_id = parseInt(matchForm.src_value) || 0;
            matchForm.src_ip = '';
            break;
        default:
            break;
    }
    switch (matchForm.dst_type) {
        case 0:
        case 1:  
            matchForm.dst_ip = matchForm.dst_value;
            matchForm.dst_user_id = 0;
            break;
        case 2:
        case 3:  
            matchForm.dst_user_id = parseInt(matchForm.dst_value) || 0;
            matchForm.dst_ip = '';
            break;
        default:
            break;
    }
    
    matchLoading.value = true;
    try {
        const response = await MatchVPNPolicyHandler(matchForm);
        if (response["code"] == 0) {
            if (response["data"] === 0){
                if (!matchResult.value){
                    matchResult.value = {} as VPNPolicy;
                }
                matchResult.value.ID = 0;
                matchResult.value.name = '未匹配到策略';
                matchResult.value.action = serverList.value.find(item => item.server_id === matchForm.server_id)?.no_policy_action;
            }else{
                matchResult.value = response.data;
            }
            ElMessage.success('策略匹配成功');
        } else {
            ElMessage.error(response["message"] || '策略匹配失败');
        }
    } catch (error) {
        ElMessage.error('策略匹配失败');
        console.error(error);
    } finally {
        matchLoading.value = false;
    }
};

// 重置匹配表单
const resetMatchForm = () => {
    matchForm.server_id = selectedServer.value?.server_id || '';
    matchForm.ip_type = 4;
    matchForm.src_type = 0;
    matchForm.src_value = '';
    matchForm.dst_type = 0;
    matchForm.dst_value = '';
    matchForm.protocol = 0;
    matchForm.src_ip = '';
    matchForm.src_user_id = 0;
    matchForm.dst_ip = '';
    matchForm.dst_user_id = 0;
};

// 匹配表单源类型改变
const onMatchSrcTypeChange = () => {
    matchForm.src_ip = '';
    matchForm.src_user_id = 0;
};

// 匹配表单目标类型改变
const onMatchDstTypeChange = () => {
    matchForm.dst_ip = '';
    matchForm.dst_user_id = 0;
};

// 显示新增对话框
const showAddDialog = () => {
    isEdit.value = false;
    resetForm();
    dialogVisible.value = true;
};

// 编辑策略
const editPolicy = (policy: VPNPolicy) => {
    isEdit.value = true;
    Object.assign(policyForm, {
        id: policy.ID,
        server_id: policy.server_id,
        ip_type: policy.ip_type,
        src_type: policy.src_type,
        src_ip: policy.src_ip,
        src_user_id: policy.src_user_id,
        dst_type: policy.dst_type,
        dst_ip: policy.dst_ip,
        dst_user_id: policy.dst_user_id,
        protocol: policy.protocol,
        action: policy.action,
        info: policy.info
    });
    switch (policyForm.src_type) {
        case 0:
        case 1:
            policyForm.src_value = policy.src_ip;
            break;
        case 2:
        case 3:  
            policyForm.src_value = policy.src_user_id.toString();
            break;
        default:
            break;
    }
    switch (policyForm.dst_type) {
        case 0:
        case 1:    
            policyForm.dst_value = policy.dst_ip;
            break;
        case 2:
        case 3:    
            policyForm.dst_value = policy.dst_user_id.toString();
            break;
        default:
            break;
    }
    dialogVisible.value = true;
};

// 删除策略
const deletePolicy = async (policy: VPNPolicy) => {
    try {
        await ElMessageBox.confirm('确定要删除此策略吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        });
        
        const response = await DeleteMyVPNPolicyHandler({ 
            id: policy.ID, 
        });
        
        if (response["code"] === 0) {
            ElMessage.success('删除成功');
            loadPolicies();
        } else {
            ElMessage.error(response["message"] || '删除失败');
        }
    } catch (error: any) {
        if (error !== 'cancel') {
            ElMessage.error('删除失败');
            console.error(error);
        }
    }
};


// 提交策略
const submitPolicy = async () => {
    if (!policyFormRef.value) return;
    
    try {
        await policyFormRef.value.validate();
        submitLoading.value = true;

        switch (policyForm.src_type) {
                case 0:
                case 1:  
                    policyForm.src_ip = policyForm.src_value;
                    break;
                case 2:
                case 3:  
                    policyForm.src_user_id = parseInt(policyForm.src_value);
                    break;
                default:
                    break;
            }
        switch (policyForm.dst_type) {
            case 0:
            case 1:  
                policyForm.dst_ip = policyForm.dst_value;
                break;
            case 2:
            case 3:  
                policyForm.dst_user_id = parseInt(policyForm.dst_value);
                break;
            default:
                break;
        }

        console.log('policyForm:', policyForm);
        
        let response;
        if (isEdit.value && policyForm.id) {
            response = await UpdateMyVPNPolicyHandler(policyForm);
        } else {
            response = await CreateMyVPNPolicyHandler(policyForm);
        }
        
        if (response["code"] === 0) {
            ElMessage.success(isEdit.value ? '更新成功' : '创建成功');
            dialogVisible.value = false;
            loadPolicies();
        } else {
            ElMessage.error(response["message"] || '操作失败');
        }
    } catch (error) {
        console.error('表单验证失败:', error);
    } finally {
        submitLoading.value = false;
    }
};

// 重置表单
const resetForm = () => {
    Object.assign(policyForm, {
        id: undefined,
        server_id: selectedServer.value?.server_id || '',
        ip_type: 4,
        src_type: 0,
        src_ip: '',
        src_user_id: 0,
        dst_type: 0,
        dst_ip: '',
        dst_user_id: 0,
        protocol: 0,
        action: 1,
        info: ''
    });
    policyFormRef.value?.clearValidate();
};

// 源类型改变处理
const onSrcTypeChange = () => {
    policyForm.src_ip = '';
    policyForm.src_user_id = 0;
};

// 目标类型改变处理
const onDstTypeChange = () => {
    policyForm.dst_ip = '';
    policyForm.dst_user_id = 0;
};

// 获取源类型验证规则
const getSrcRules = (): any[] => {
    return [{ required: true, message: '此项不能为空', trigger: 'blur' }];
};

// 获取目标类型验证规则
const getDstRules = (): any[] => {
    return [{ required: true, message: '此项不能为空', trigger: 'blur' }];
};

// 获取源类型占位符
const getSrcPlaceholder = () => {
    switch (policyForm.src_type) {
        case 0: return '请输入IP地址，如：192.168.1.1';
        case 1: return '请输入网段，如：192.168.1.0/24';
        case 2: return '请输入用户ID';
        case 3: return '请输入组ID';
        default: return '请输入值';
    }
};

// 获取目标类型占位符
const getDstPlaceholder = () => {
    switch (policyForm.dst_type) {
        case 0: return '请输入IP地址，如：192.168.1.1';
        case 1: return '请输入网段，如：192.168.1.0/24';
        case 2: return '请输入用户ID';
        case 3: return '请输入组ID';
        default: return '请输入值';
    }
};

// 获取源类型文本
const getSrcTypeText = (type: number) => {
    const types: {[key: number]: string} = {
        0: 'IP地址',
        1: '网段',
        2: '用户ID',
        3: '组ID'
    };
    return types[type] || '未知';
};

// 获取目标类型文本
const getDstTypeText = (type: number) => {
    const types: {[key: number]: string} = {
        0: 'IP地址',
        1: '网段',
        2: '用户ID',
        3: '组ID'
    };
    return types[type] || '未知';
};

// 获取源值显示
const getSrcValue = (policy: VPNPolicy) => {
    switch (policy.src_type) {
        case 0: return policy.src_ip || '-';
        case 1: return policy.src_ip || '-';
        case 2: return `用户ID: ${policy.src_user_id}`;
        case 3: return `组ID: ${policy.src_user_id}`;
        default: return '-';
    }
};

// 获取目标值显示
const getDstValue = (policy: VPNPolicy) => {
    switch (policy.dst_type) {
        case 0: return policy.dst_ip || '-';
        case 1: return policy.dst_ip || '-';
        case 2: return `用户ID: ${policy.dst_user_id}`;
        case 3: return `组ID: ${policy.dst_user_id}`;
        default: return '-';
    }
};

// 获取协议文本
const getProtocolText = (protocol: number) => {
    const found = protocolOptions.value.find(item => item.value === protocol);
    return found ? found.label : '未知';
};

// 格式化时间
const formatTime = (timeStr: string) => {
    if (!timeStr) return '-';
    return new Date(timeStr).toLocaleString('zh-CN');
};

// 分页处理
const handleSizeChange = (size: number) => {
    pagination.size = size;
    pagination.page = 1;
    loadPolicies();
};

const handleCurrentChange = (page: number) => {
    pagination.page = page;
    loadPolicies();
};

// 组件挂载
onMounted(() => {
    getServerConfigs();
    startOnlineStatusTimer();
});
</script>

<style scoped>
.vpn-policy-management {
    padding: 20px;
}

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

.header-actions {
    display: flex;
    gap: 10px;
}

.server-list {
    max-height: 600px;
    overflow-y: auto;
}

.server-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    margin-bottom: 8px;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
}

.server-item:hover {
    background-color: #f5f7fa;
    border-color: #409eff;
}

.server-item.active {
    background-color: #ecf5ff;
    border-color: #409eff;
}

.server-info {
    flex: 1;
}

.server-name {
    font-weight: bold;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
}

.status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #909399;
    margin-right: 8px;
    transition: background-color 0.3s;
}

.status-indicator.online {
    background-color: #67c23a;
    box-shadow: 0 0 4px rgba(103, 194, 58, 0.5);
}

.server-ip {
    font-size: 12px;
    color: #909399;
}

.search-bar {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 10px;
}

.text-secondary {
    font-size: 12px;
    color: #909399;
    margin-top: 4px;
}

.pagination-wrapper {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

.dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.match-form {
    max-height: 500px;
    overflow-y: auto;
}

.match-actions {
    margin: 20px 0;
    text-align: center;
}

.match-result h4 {
    margin: 0 0 10px 0;
    color: #303133;
    font-weight: bold;
}

.no-match-result {
    margin-top: 20px;
    text-align: center;
}
</style>