<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标准报价单生成 - 服务价格标准化管理系统</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-control[readonly] {
            background: #f5f7fa;
            color: #606266;
        }

        .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;
        }

        .quote-detail {
            background: #f5f7fa;
            padding: 20px;
            border-radius: 6px;
            margin-top: 20px;
        }

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

        .detail-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 15px;
        }

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

        .detail-table th {
            background: white;
            font-weight: 600;
            color: #333;
        }

        .total-row {
            font-weight: 600;
            font-size: 16px;
            color: #409eff;
        }

        .info-box {
            background: #ecf5ff;
            border: 1px solid #409eff;
            border-radius: 6px;
            padding: 15px;
            margin-bottom: 20px;
        }

        .info-box-title {
            font-weight: 600;
            color: #409eff;
            margin-bottom: 8px;
        }

        .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: #409eff;
        }

        input:checked + .slider:before {
            transform: translateX(26px);
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <div class="header">
                <h1>标准报价单生成</h1>
            </div>

            <div class="card">
                <div class="card-title">报价信息</div>
                <form @submit.prevent="handleGenerate">
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">客户名称 <span class="required">*</span></label>
                            <input 
                                type="text" 
                                v-model="form.customerName" 
                                class="form-control" 
                                placeholder="请输入客户名称"
                                required
                            />
                        </div>
                        <div class="form-group">
                            <label class="form-label">是否停机 <span class="required">*</span></label>
                            <select v-model="form.isDowntime" class="form-control" required @change="updateRule">
                                <option value="">请选择</option>
                                <option value="是">是</option>
                                <option value="否">否</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">服务内容描述 <span class="required">*</span></label>
                        <textarea 
                            v-model="form.serviceDescription" 
                            class="form-control" 
                            rows="4"
                            placeholder="请输入服务内容描述"
                            required
                        ></textarea>
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">是否质保期外</label>
                            <div style="margin-top: 8px;">
                                <label class="switch">
                                    <input type="checkbox" v-model="form.isOutOfWarranty" checked disabled>
                                    <span class="slider"></span>
                                </label>
                                <span style="margin-left: 10px; color: #606266;">是（固定）</span>
                            </div>
                        </div>
                    </div>

                    <!-- 自动匹配的报价规则 -->
                    <div class="info-box" v-if="matchedRule">
                        <div class="info-box-title">匹配的报价规则</div>
                        <div>规则名称：{{ matchedRule.ruleName }}</div>
                        <div>适用场景：{{ matchedRule.scenario }}</div>
                    </div>

                    <!-- 人工费用明细 -->
                    <div class="quote-detail" v-if="matchedRule">
                        <div class="quote-detail-title">人工费用明细（自动计算）</div>
                        <table class="detail-table">
                            <thead>
                                <tr>
                                    <th>服务类型</th>
                                    <th>技术等级</th>
                                    <th>计费方式</th>
                                    <th>数量</th>
                                    <th>单价</th>
                                    <th>小计</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(item, index) in laborDetails" :key="index">
                                    <td>{{ item.serviceType }}</td>
                                    <td>{{ item.techLevel }}</td>
                                    <td>{{ item.billingMethod }}</td>
                                    <td>
                                        <input 
                                            type="number" 
                                            v-model.number="item.quantity" 
                                            class="form-control" 
                                            style="width: 80px; display: inline-block;"
                                            min="0"
                                            step="0.5"
                                            @input="calculateTotal"
                                        />
                                        <span style="margin-left: 5px;">{{ item.billingMethod === '按小时' ? '小时' : '次' }}</span>
                                    </td>
                                    <td>¥{{ item.price }}/{{ item.billingMethod === '按小时' ? '小时' : '次' }}</td>
                                    <td>¥{{ (item.price * item.quantity).toFixed(2) }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <!-- 零件费用明细 -->
                    <div class="quote-detail">
                        <div class="quote-detail-title">零件费用明细（可选）</div>
                        <table class="detail-table">
                            <thead>
                                <tr>
                                    <th>零件名称</th>
                                    <th>型号规格</th>
                                    <th>数量</th>
                                    <th>单价</th>
                                    <th>小计</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(item, index) in partDetails" :key="index">
                                    <td>
                                        <select v-model="item.partId" class="form-control" @change="updatePartInfo(index)">
                                            <option value="">请选择零件</option>
                                            <option v-for="part in availableParts" :key="part.id" :value="part.id">
                                                {{ part.partName }}
                                            </option>
                                        </select>
                                    </td>
                                    <td>{{ item.specification }}</td>
                                    <td>
                                        <input 
                                            type="number" 
                                            v-model.number="item.quantity" 
                                            class="form-control" 
                                            style="width: 80px; display: inline-block;"
                                            min="0"
                                            @input="calculateTotal"
                                        />
                                    </td>
                                    <td>¥{{ item.price }}</td>
                                    <td>¥{{ (item.price * item.quantity).toFixed(2) }}</td>
                                    <td>
                                        <button type="button" class="btn btn-danger btn-small" @click="removePart(index)">删除</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="6">
                                        <button type="button" class="btn btn-primary btn-small" @click="addPart">+ 添加零件</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <!-- 总计 -->
                    <div class="quote-detail" v-if="matchedRule">
                        <table class="detail-table">
                            <tbody>
                                <tr>
                                    <td style="text-align: right; font-weight: 600;">人工费用小计：</td>
                                    <td>¥{{ laborSubtotal.toFixed(2) }}</td>
                                </tr>
                                <tr>
                                    <td style="text-align: right; font-weight: 600;">零件费用小计：</td>
                                    <td>¥{{ partSubtotal.toFixed(2) }}</td>
                                </tr>
                                <tr class="total-row">
                                    <td style="text-align: right;">总计：</td>
                                    <td>¥{{ totalAmount.toFixed(2) }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <div class="form-actions">
                        <button type="button" class="btn btn-default" @click="handleCancel">取消</button>
                        <button type="submit" class="btn btn-primary" :disabled="!matchedRule">生成报价单</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        const { createApp } = Vue;

        createApp({
            data() {
                return {
                    form: {
                        customerName: '',
                        serviceDescription: '',
                        isDowntime: '',
                        isOutOfWarranty: true
                    },
                    matchedRule: null,
                    laborDetails: [],
                    partDetails: [],
                    availableParts: [
                        { id: 1, partName: '服务器硬盘', specification: '2TB SATA', price: 800 },
                        { id: 2, partName: '内存条', specification: '16GB DDR4', price: 600 },
                        { id: 3, partName: '网络交换机', specification: '24口千兆', price: 2000 }
                    ],
                    availableRules: [
                        {
                            id: 1,
                            ruleName: '停机服务标准报价规则',
                            scenario: '停机',
                            laborRules: [
                                { id: 1, serviceType: '上门', techLevel: '普通', billingMethod: '按小时', price: 150 },
                                { id: 2, serviceType: '上门', techLevel: '高级', billingMethod: '按小时', price: 250 }
                            ]
                        },
                        {
                            id: 2,
                            ruleName: '非停机服务标准报价规则',
                            scenario: '非停机',
                            laborRules: [
                                { id: 3, serviceType: '远程', techLevel: '普通', billingMethod: '按次', price: 200 }
                            ]
                        }
                    ]
                }
            },
            computed: {
                laborSubtotal() {
                    return this.laborDetails.reduce((sum, item) => sum + (item.price * item.quantity), 0);
                },
                partSubtotal() {
                    return this.partDetails.reduce((sum, item) => sum + (item.price * item.quantity), 0);
                },
                totalAmount() {
                    return this.laborSubtotal + this.partSubtotal;
                }
            },
            methods: {
                updateRule() {
                    if (this.form.isDowntime) {
                        const scenario = this.form.isDowntime === '是' ? '停机' : '非停机';
                        this.matchedRule = this.availableRules.find(r => r.scenario === scenario);
                        if (this.matchedRule) {
                            this.laborDetails = this.matchedRule.laborRules.map(rule => ({
                                ...rule,
                                quantity: 1
                            }));
                        }
                    } else {
                        this.matchedRule = null;
                        this.laborDetails = [];
                    }
                    this.calculateTotal();
                },
                updatePartInfo(index) {
                    const part = this.availableParts.find(p => p.id === this.partDetails[index].partId);
                    if (part) {
                        this.partDetails[index].partName = part.partName;
                        this.partDetails[index].specification = part.specification;
                        this.partDetails[index].price = part.price;
                        this.partDetails[index].quantity = 1;
                    }
                    this.calculateTotal();
                },
                addPart() {
                    this.partDetails.push({
                        partId: '',
                        partName: '',
                        specification: '',
                        price: 0,
                        quantity: 0
                    });
                },
                removePart(index) {
                    this.partDetails.splice(index, 1);
                    this.calculateTotal();
                },
                calculateTotal() {
                    // 计算逻辑已在computed中实现
                },
                handleGenerate() {
                    if (!this.matchedRule) {
                        alert('请先选择是否停机，系统将自动匹配报价规则');
                        return;
                    }
                    // 生成报价单编号
                    const quoteNo = 'QT' + new Date().getTime();
                    // 跳转到详情页
                    window.location.href = `9-标准报价单详情页.html?quoteNo=${quoteNo}`;
                },
                handleCancel() {
                    if (confirm('确定要取消吗？未保存的数据将丢失。')) {
                        window.location.href = '1-服务价格标准首页.html';
                    }
                }
            }
        }).mount('#app');
    </script>
</body>
</html>

