<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>报价规则配置{{ isEdit ? '编辑' : '新增' }} - 服务价格标准化管理系统</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: #f5f7fa;
            min-height: 100vh;
            padding: 20px;
        }

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

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

        .header h1 {
            color: #333;
            font-size: 24px;
            font-weight: 600;
        }

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

        .card-title {
            font-size: 18px;
            font-weight: 600;
            color: #333;
            margin-bottom: 25px;
            padding-bottom: 12px;
            border-bottom: 2px solid #409eff;
        }

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

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

        .form-label .required {
            color: #f56c6c;
            margin-left: 4px;
        }

        .form-control {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #dcdfe6;
            border-radius: 6px;
            font-size: 14px;
            transition: border-color 0.3s;
        }

        .form-control:focus {
            outline: none;
            border-color: #409eff;
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

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

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

        .btn-primary {
            background: #409eff;
            color: white;
        }

        .btn-primary:hover {
            background: #66b1ff;
        }

        .btn-default {
            background: #f5f7fa;
            color: #606266;
            border: 1px solid #dcdfe6;
        }

        .btn-default:hover {
            background: #ecf5ff;
            color: #409eff;
            border-color: #409eff;
        }

        .form-hint {
            font-size: 12px;
            color: #909399;
            margin-top: 5px;
        }

        .rule-section {
            background: #f5f7fa;
            padding: 20px;
            border-radius: 6px;
            margin-bottom: 20px;
        }

        .rule-section-title {
            font-size: 16px;
            font-weight: 600;
            color: #333;
            margin-bottom: 15px;
        }

        .select-multiple {
            min-height: 100px;
            max-height: 200px;
            overflow-y: auto;
            border: 1px solid #dcdfe6;
            border-radius: 6px;
            padding: 10px;
        }

        .select-item {
            padding: 8px;
            margin-bottom: 5px;
            background: white;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .select-item:hover {
            background: #ecf5ff;
        }

        .select-item.selected {
            background: #409eff;
            color: white;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <div class="header">
                <h1>报价规则配置{{ isEdit ? '编辑' : '新增' }}</h1>
            </div>

            <div class="card">
                <div class="card-title">基本信息</div>
                <form @submit.prevent="handleSubmit">
                    <div class="form-group">
                        <label class="form-label">规则名称 <span class="required">*</span></label>
                        <input 
                            type="text" 
                            v-model="form.ruleName" 
                            class="form-control" 
                            placeholder="请输入规则名称"
                            required
                        />
                    </div>

                    <div class="form-group">
                        <label class="form-label">适用服务场景 <span class="required">*</span></label>
                        <select v-model="form.scenario" class="form-control" required>
                            <option value="">请选择</option>
                            <option value="停机">停机</option>
                            <option value="非停机">非停机</option>
                        </select>
                    </div>

                    <!-- 人工费用规则 -->
                    <div class="rule-section">
                        <div class="rule-section-title">人工费用规则 <span class="required">*</span></div>
                        <div class="select-multiple">
                            <div 
                                v-for="labor in availableLabors" 
                                :key="labor.id"
                                :class="['select-item', { selected: form.laborRules.includes(labor.id) }]"
                                @click="toggleLaborRule(labor.id)"
                            >
                                {{ labor.serviceType }} - {{ labor.techLevel }} - {{ labor.billingMethod }} (¥{{ labor.price }}/{{ labor.billingMethod === '按小时' ? '小时' : '次' }})
                            </div>
                        </div>
                        <div class="form-hint">点击选择适用的人工费用标准（可多选）</div>
                    </div>

                    <!-- 零件费用规则 -->
                    <div class="rule-section">
                        <div class="rule-section-title">零件费用规则</div>
                        <div class="select-multiple">
                            <div 
                                v-for="part in availableParts" 
                                :key="part.id"
                                :class="['select-item', { selected: form.partRules.includes(part.id) }]"
                                @click="togglePartRule(part.id)"
                            >
                                {{ part.partName }} ({{ part.specification }}) - ¥{{ part.price }}
                            </div>
                        </div>
                        <div class="form-hint">点击选择适用的零件费用标准（可多选，可选）</div>
                    </div>

                    <!-- 加急费规则 -->
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">加急费规则类型</label>
                            <select v-model="form.urgentFeeType" class="form-control">
                                <option value="">无加急费</option>
                                <option value="percentage">百分比</option>
                                <option value="fixed">固定金额</option>
                            </select>
                        </div>
                        <div class="form-group" v-if="form.urgentFeeType">
                            <label class="form-label">加急费数值</label>
                            <input 
                                type="number" 
                                v-model.number="form.urgentFeeValue" 
                                class="form-control" 
                                placeholder="请输入数值"
                                step="0.01"
                                min="0"
                            />
                            <div class="form-hint">{{ form.urgentFeeType === 'percentage' ? '单位：%（例如：20表示加收20%）' : '单位：元' }}</div>
                        </div>
                    </div>

                    <!-- 折扣规则 -->
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">折扣规则类型</label>
                            <select v-model="form.discountType" class="form-control">
                                <option value="">无折扣</option>
                                <option value="percentage">百分比折扣</option>
                                <option value="fixed">固定金额减免</option>
                            </select>
                        </div>
                        <div class="form-group" v-if="form.discountType">
                            <label class="form-label">折扣数值</label>
                            <input 
                                type="number" 
                                v-model.number="form.discountValue" 
                                class="form-control" 
                                placeholder="请输入数值"
                                step="0.01"
                                min="0"
                            />
                            <div class="form-hint">{{ form.discountType === 'percentage' ? '单位：%（例如：10表示打9折）' : '单位：元' }}</div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">规则说明</label>
                        <textarea 
                            v-model="form.description" 
                            class="form-control" 
                            rows="4"
                            placeholder="请输入规则说明"
                        ></textarea>
                    </div>

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

    <script>
        const { createApp } = Vue;

        createApp({
            data() {
                const urlParams = new URLSearchParams(window.location.search);
                const action = urlParams.get('action');

                return {
                    isEdit: action === 'edit',
                    form: {
                        ruleName: '',
                        scenario: '',
                        laborRules: [],
                        partRules: [],
                        urgentFeeType: '',
                        urgentFeeValue: null,
                        discountType: '',
                        discountValue: null,
                        description: ''
                    },
                    availableLabors: [
                        { id: 1, serviceType: '上门', techLevel: '普通', billingMethod: '按小时', price: 150 },
                        { id: 2, serviceType: '上门', techLevel: '高级', billingMethod: '按小时', price: 250 },
                        { id: 3, serviceType: '远程', techLevel: '普通', billingMethod: '按次', price: 200 },
                        { id: 4, serviceType: '紧急', techLevel: '高级', billingMethod: '按小时', price: 400 }
                    ],
                    availableParts: [
                        { id: 1, partName: '服务器硬盘', specification: '2TB SATA', price: 800 },
                        { id: 2, partName: '内存条', specification: '16GB DDR4', price: 600 },
                        { id: 3, partName: '网络交换机', specification: '24口千兆', price: 2000 }
                    ]
                }
            },
            mounted() {
                if (this.isEdit) {
                    // 模拟加载数据
                    this.form = {
                        ruleName: '停机服务标准报价规则',
                        scenario: '停机',
                        laborRules: [1, 2],
                        partRules: [1, 2],
                        urgentFeeType: 'percentage',
                        urgentFeeValue: 20,
                        discountType: '',
                        discountValue: null,
                        description: '适用于停机场景的标准报价规则'
                    };
                }
            },
            methods: {
                toggleLaborRule(id) {
                    const index = this.form.laborRules.indexOf(id);
                    if (index > -1) {
                        this.form.laborRules.splice(index, 1);
                    } else {
                        this.form.laborRules.push(id);
                    }
                },
                togglePartRule(id) {
                    const index = this.form.partRules.indexOf(id);
                    if (index > -1) {
                        this.form.partRules.splice(index, 1);
                    } else {
                        this.form.partRules.push(id);
                    }
                },
                handleSubmit() {
                    if (this.form.laborRules.length === 0) {
                        alert('请至少选择一个人工费用规则');
                        return;
                    }
                    alert(this.isEdit ? '保存成功！' : '新增成功！');
                    window.location.href = '6-报价规则配置列表页.html';
                },
                handleCancel() {
                    if (confirm('确定要取消吗？未保存的数据将丢失。')) {
                        window.location.href = '6-报价规则配置列表页.html';
                    }
                }
            }
        }).mount('#app');
    </script>
</body>
</html>

