<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VIP SLA规则配置 - VIP客户服务机制</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1000px;
            margin: 0 auto;
        }

        .header {
            background: white;
            padding: 20px 30px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }

        .header-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .header h1 {
            color: #333;
            font-size: 28px;
        }

        .nav-menu {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .nav-item {
            padding: 8px 16px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            text-decoration: none;
            border-radius: 6px;
            font-size: 14px;
            transition: all 0.3s;
        }

        .nav-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
        }

        .nav-item.active {
            background: #e74c3c;
        }

        .card {
            background: white;
            border-radius: 10px;
            padding: 30px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }

        .card-title {
            font-size: 20px;
            font-weight: bold;
            color: #333;
            margin-bottom: 30px;
            padding-bottom: 10px;
            border-bottom: 2px solid #667eea;
        }

        .form-group {
            margin-bottom: 25px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            color: #555;
            font-size: 14px;
            font-weight: 500;
        }

        .form-group label.required::after {
            content: ' *';
            color: #e74c3c;
        }

        .form-group input,
        .form-group select {
            width: 100%;
            padding: 10px 15px;
            border: 2px solid #e0e0e0;
            border-radius: 6px;
            font-size: 14px;
            transition: border-color 0.3s;
        }

        .form-group input:focus,
        .form-group select:focus {
            outline: none;
            border-color: #667eea;
        }

        .form-group input[type="number"] {
            width: 200px;
        }

        .form-actions {
            display: flex;
            gap: 15px;
            justify-content: flex-end;
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid #e0e0e0;
        }

        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 16px;
            transition: all 0.3s;
            font-weight: 500;
        }

        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
        }

        .btn-secondary {
            background: #95a5a6;
            color: white;
        }

        .btn-secondary:hover {
            background: #7f8c8d;
        }

        .help-text {
            font-size: 12px;
            color: #999;
            margin-top: 5px;
        }

        .sla-comparison {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 20px;
            margin-top: 20px;
        }

        .sla-comparison h3 {
            margin-bottom: 15px;
            color: #333;
        }

        .comparison-table {
            width: 100%;
            border-collapse: collapse;
        }

        .comparison-table th,
        .comparison-table td {
            padding: 10px;
            text-align: left;
            border-bottom: 1px solid #e0e0e0;
        }

        .comparison-table th {
            background: #667eea;
            color: white;
            font-weight: bold;
        }

        .switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 24px;
        }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 24px;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }

        input:checked + .slider {
            background-color: #27ae60;
        }

        input:checked + .slider:before {
            transform: translateX(26px);
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <div class="header">
                <div class="header-top">
                    <h1>⏱️ VIP SLA规则配置</h1>
                    <div class="nav-menu">
                        <a href="1-VIP客户管理列表页.html" class="nav-item">VIP客户管理</a>
                        <a href="3-VIP专属负责人配置页.html" class="nav-item">负责人配置</a>
                        <a href="4-VIP服务工单列表页.html" class="nav-item">VIP工单</a>
                        <a href="5-VIP SLA规则配置页.html" class="nav-item active">SLA配置</a>
                        <a href="6-VIP客户服务记录页.html" class="nav-item">服务记录</a>
                        <a href="7-VIP客户服务看板.html" class="nav-item">服务看板</a>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-title">
                    SLA规则配置
                </div>

                <form @submit.prevent="saveSlaRules">
                    <div class="form-group">
                        <label class="required">客户类型</label>
                        <select v-model="formData.customerType" required @change="loadSlaRule">
                            <option value="normal">普通客户</option>
                            <option value="vip">VIP客户</option>
                            <option value="svip">SVIP客户</option>
                        </select>
                        <div class="help-text">选择要配置的客户类型</div>
                    </div>

                    <div class="form-group">
                        <label class="required">首次响应时间（分钟）</label>
                        <input type="number" v-model.number="formData.firstResponseTime" required min="1" placeholder="例如：15">
                        <div class="help-text">工单创建后，首次响应的时间限制（单位：分钟）</div>
                    </div>

                    <div class="form-group">
                        <label class="required">问题解决时限（小时）</label>
                        <input type="number" v-model.number="formData.resolveTimeLimit" required min="1" placeholder="例如：4">
                        <div class="help-text">从工单创建到问题解决的时间限制（单位：小时）</div>
                    </div>

                    <!--<div class="form-group">
                        <label>是否启用SLA超时预警</label>
                        <label class="switch" style="margin-left: 10px;">
                            <input type="checkbox" v-model="formData.enableWarning">
                            <span class="slider"></span>
                        </label>
                        <div class="help-text">开启后，当SLA剩余时间不足时会发送预警通知</div>
                    </div>

                    <div class="form-group" v-if="formData.enableWarning">
                        <label>预警时间阈值（分钟）</label>
                        <input type="number" v-model.number="formData.warningThreshold" min="1" placeholder="例如：30">
                        <div class="help-text">当SLA剩余时间低于此值时触发预警</div>
                    </div>-->

                    <div class="form-actions">
                        <button type="button" @click="cancel" class="btn btn-secondary">取消</button>
                        <button type="submit" class="btn btn-primary">保存</button>
                    </div>
                </form>

                <!-- SLA对比说明 -->
                <div class="sla-comparison">
                    <h3>当前SLA规则对比</h3>
                    <table class="comparison-table">
                        <thead>
                            <tr>
                                <th>客户类型</th>
                                <th>首次响应时间</th>
                                <th>问题解决时限</th>
<!--                                <th>预警功能</th>-->
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>普通客户</td>
                                <td>{{ slaRules.normal?.firstResponseTime || '-' }} 分钟</td>
                                <td>{{ slaRules.normal?.resolveTimeLimit || '-' }} 小时</td>
<!--                                <td>{{ slaRules.normal?.enableWarning ? '已启用' : '未启用' }}</td>-->
                            </tr>
                            <tr>
                                <td>VIP客户</td>
                                <td>{{ slaRules.vip?.firstResponseTime || '-' }} 分钟</td>
                                <td>{{ slaRules.vip?.resolveTimeLimit || '-' }} 小时</td>
<!--                                <td>{{ slaRules.vip?.enableWarning ? '已启用' : '未启用' }}</td>-->
                            </tr>
                            <tr>
                                <td>SVIP客户</td>
                                <td>{{ slaRules.svip?.firstResponseTime || '-' }} 分钟</td>
                                <td>{{ slaRules.svip?.resolveTimeLimit || '-' }} 小时</td>
<!--                                <td>{{ slaRules.svip?.enableWarning ? '已启用' : '未启用' }}</td>-->
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <script>
        const { createApp } = Vue;

        createApp({
            data() {
                return {
                    formData: {
                        customerType: 'normal',
                        firstResponseTime: 30,
                        resolveTimeLimit: 8,
                        enableWarning: true,
                        warningThreshold: 30
                    },
                    slaRules: {
                        normal: null,
                        vip: null,
                        svip: null
                    }
                }
            },
            mounted() {
                this.loadSlaRules();
            },
            methods: {
                loadSlaRules() {
                    const saved = localStorage.getItem('vipSlaRules');
                    if (saved) {
                        this.slaRules = JSON.parse(saved);
                        // 加载当前类型的规则
                        this.loadSlaRule();
                    } else {
                        // 初始化默认规则
                        this.slaRules = {
                            normal: {
                                customerType: 'normal',
                                firstResponseTime: 30,
                                resolveTimeLimit: 8,
                                enableWarning: true,
                                warningThreshold: 30
                            },
                            vip: {
                                customerType: 'vip',
                                firstResponseTime: 15,
                                resolveTimeLimit: 4,
                                enableWarning: true,
                                warningThreshold: 15
                            },
                            svip: {
                                customerType: 'svip',
                                firstResponseTime: 5,
                                resolveTimeLimit: 2,
                                enableWarning: true,
                                warningThreshold: 10
                            }
                        };
                        this.saveSlaRules();
                        this.loadSlaRule();
                    }
                },
                loadSlaRule() {
                    const rule = this.slaRules[this.formData.customerType];
                    if (rule) {
                        this.formData = { ...rule };
                    } else {
                        // 默认值
                        this.formData = {
                            customerType: this.formData.customerType,
                            firstResponseTime: 30,
                            resolveTimeLimit: 8,
                            enableWarning: true,
                            warningThreshold: 30
                        };
                    }
                },
                saveSlaRules() {
                    const rule = {
                        ...this.formData
                    };
                    this.slaRules[this.formData.customerType] = rule;
                    localStorage.setItem('vipSlaRules', JSON.stringify(this.slaRules));
                    alert('保存成功');
                },
                cancel() {
                    this.loadSlaRule();
                }
            }
        }).mount('#app');
    </script>
</body>
</html>

