<!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: 1400px;
            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-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

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

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

        .nav-item {
            padding: 8px 16px;
            background: #409eff;
            color: white;
            text-decoration: none;
            border-radius: 6px;
            font-size: 14px;
            transition: all 0.3s;
        }

        .nav-item:hover {
            background: #66b1ff;
        }

        .nav-item.active {
            background: #67c23a;
        }

        .card {
            background: white;
            border-radius: 8px;
            padding: 25px;
            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: 20px;
            padding-bottom: 12px;
            border-bottom: 2px solid #409eff;
        }

        .toolbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .btn {
            padding: 10px 20px;
            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-success {
            background: #67c23a;
            color: white;
        }

        .btn-success:hover {
            background: #85ce61;
        }

        .btn-danger {
            background: #f56c6c;
            color: white;
        }

        .btn-danger:hover {
            background: #f78989;
        }

        .btn-warning {
            background: #e6a23c;
            color: white;
        }

        .btn-warning:hover {
            background: #ebb563;
        }

        .btn-small {
            padding: 6px 12px;
            font-size: 12px;
        }

        .data-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

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

        .data-table th {
            background: #f5f7fa;
            font-weight: 600;
            color: #333;
        }

        .data-table tr:hover {
            background: #f5f7fa;
        }

        .badge {
            display: inline-block;
            padding: 4px 10px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;
        }

        .badge-success {
            background: #f0f9ff;
            color: #67c23a;
            border: 1px solid #67c23a;
        }

        .badge-danger {
            background: #fef0f0;
            color: #f56c6c;
            border: 1px solid #f56c6c;
        }

        .action-btns {
            display: flex;
            gap: 8px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <div class="header">
                <div class="header-top">
                    <h1>人工费用标准管理</h1>
                    <div class="nav-menu">
                        <a href="1-服务价格标准首页.html" class="nav-item">首页</a>
                        <a href="2-人工费用标准管理列表页.html" class="nav-item active">人工费用</a>
                        <a href="4-零件费用标准管理列表页.html" class="nav-item">零件费用</a>
                        <a href="6-报价规则配置列表页.html" class="nav-item">报价规则</a>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="toolbar">
                    <div class="card-title">人工费用标准列表</div>
                    <button class="btn btn-primary" @click="handleAdd">+ 新增人工费用</button>
                </div>

                <table class="data-table">
                    <thead>
                        <tr>
                            <th>服务类型</th>
                            <th>技术等级</th>
                            <th>计费方式</th>
                            <th>单价</th>
                            <!-- <th>最低计费时长</th> -->
                            <th>生效时间</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="item in laborList" :key="item.id">
                            <td>{{ item.serviceType }}</td>
                            <td>{{ item.techLevel }}</td>
                            <td>{{ item.billingMethod }}</td>
                            <td>¥{{ item.price }}/{{ item.billingMethod === '按小时' ? '小时' : '次' }}</td>
                            <!-- <td>{{ item.minHours || '-' }}</td> -->
                            <td>{{ item.effectiveDate }}</td>
                            <td>
                                <span :class="item.status === '启用' ? 'badge badge-success' : 'badge badge-danger'">
                                    {{ item.status }}
                                </span>
                            </td>
                            <td>
                                <div class="action-btns">
                                    <button class="btn btn-primary btn-small" @click="handleEdit(item)">编辑</button>
                                    <button 
                                        v-if="item.status === '启用'"
                                        class="btn btn-warning btn-small" 
                                        @click="handleToggleStatus(item)">
                                        停用
                                    </button>
                                    <button 
                                        v-else
                                        class="btn btn-success btn-small" 
                                        @click="handleToggleStatus(item)">
                                        启用
                                    </button>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script>
        const { createApp } = Vue;

        createApp({
            data() {
                return {
                    laborList: [
                        {
                            id: 1,
                            serviceType: '上门',
                            techLevel: '普通',
                            billingMethod: '按小时',
                            price: 150,
                            minHours: 2,
                            effectiveDate: '2024-01-01',
                            status: '启用'
                        },
                        {
                            id: 2,
                            serviceType: '上门',
                            techLevel: '高级',
                            billingMethod: '按小时',
                            price: 250,
                            minHours: 2,
                            effectiveDate: '2024-01-01',
                            status: '启用'
                        },
                        {
                            id: 3,
                            serviceType: '远程',
                            techLevel: '普通',
                            billingMethod: '按次',
                            price: 200,
                            minHours: null,
                            effectiveDate: '2024-01-01',
                            status: '启用'
                        },
                        {
                            id: 4,
                            serviceType: '紧急',
                            techLevel: '高级',
                            billingMethod: '按小时',
                            price: 400,
                            minHours: 1,
                            effectiveDate: '2024-01-01',
                            status: '停用'
                        }
                    ]
                }
            },
            methods: {
                handleAdd() {
                    window.location.href = '3-人工费用标准新增编辑页.html?action=add';
                },
                handleEdit(item) {
                    window.location.href = `3-人工费用标准新增编辑页.html?action=edit&id=${item.id}`;
                },
                handleToggleStatus(item) {
                    item.status = item.status === '启用' ? '停用' : '启用';
                }
            }
        }).mount('#app');
    </script>
</body>
</html>

