const fs = require('fs');
const fixedContent = `<template>
  <div class="page-container quote-generate">
    <div :class="['toast', toastType, { show: showToast }]">
      {{ toastMessage }}
    </div>

    <div class="page-header">
      <div class="page-header-left">
        <h1 class="page-title">
          <i class="fas fa-file-invoice-dollar"></i> 报价表管理
        </h1>
        <p class="text-secondary">
          <i class="fas fa-info-circle"></i> 管理所有报价单，支持创建、编辑、发送
        </p>
      </div>
      <div class="page-header-right">
        <button class="btn btn-primary" @click="openCreateModal">
          <i class="fas fa-plus"></i> 新建报价表
        </button>
      </div>
    </div>

    <div class="nav-tabs">
      <div class="nav-tab" @click="goToQuoteMeasure">测量报价</div>
      <div :class="['nav-tab', { active: true }]">报价表生成</div>
    </div>

    <div class="search-bar">
      <div class="search-input-group">
        <i class="fas fa-search"></i>
        <input type="text" v-model="searchKeyword" placeholder="搜索报价单号、客户名称..." @input="handleSearch">
      </div>
      <div class="filter-group">
        <select v-model="filterStatus" @change="handleSearch">
          <option value="">全部状态</option>
          <option value="draft">草稿</option>
          <option value="sent">已发送</option>
          <option value="accepted">已接受</option>
          <option value="rejected">已拒绝</option>
          <option value="expired">已过期</option>
        </select>
        <select v-model="filterScheme" @change="handleSearch">
          <option value="">全部方案</option>
          <option value="A">方案A (标准型)</option>
          <option value="B">方案B (升级型)</option>
        </select>
      </div>
    </div>

    <div class="card">
      <div class="table-container">
        <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 paginatedData" :key="item.id">
              <td class="quote-number">
                <i class="fas fa-file-invoice"></i>
                {{ item.quoteNumber }}
              </td>
              <td class="customer-info">
                <div class="customer-name">{{ item.customerName }}</div>
                <div class="customer-phone">{{ item.customerPhone }}</div>
              </td>
              <td>{{ item.productCount }} 套</td>
              <td>
                <span :class="['scheme-badge', item.scheme]">
                  方案{{ item.scheme }}
                </span>
              </td>
              <td class="amount">¥{{ item.totalAmount.toFixed(2) }}</td>
              <td>
                <span :class="['status-badge', item.status]">
                  {{ getStatusText(item.status) }}
                </span>
              </td>
              <td>{{ item.createdAt }}</td>
              <td class="action-cell">
                <button class="btn-action view" @click="viewDetail(item)" title="查看">
                  <i class="fas fa-eye"></i>
                </button>
                <button class="btn-action edit" @click="editItem(item)" title="编辑">
                  <i class="fas fa-edit"></i>
                </button>
                <button class="btn-action copy" @click="copyItem(item)" title="复制">
                  <i class="fas fa-copy"></i>
                </button>
                <button class="btn-action send" @click="sendQuote(item)" title="发送">
                  <i class="fas fa-envelope"></i>
                </button>
                <button class="btn-action print" @click="printQuote(item)" title="打印">
                  <i class="fas fa-print"></i>
                </button>
                <button class="btn-action delete" @click="deleteItem(item)" title="删除">
                  <i class="fas fa-trash"></i>
                </button>
              </td>
            </tr>
            <tr v-if="filteredData.length === 0">
              <td colspan="8" class="empty-text">
                <i class="fas fa-inbox"></i>
                <p>暂无数据</p>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="pagination-container" v-if="filteredData.length > 0">
        <div class="pagination-info">共 {{ filteredData.length }} 条记录，每页显示 {{ pageSize.value }}</div>
        <div class="pagination">
          <button class="page-btn" :disabled="currentPage.value === 1" @click="currentPage.value = 1">
            <i class="fas fa-angle-double-left"></i>
          </button>
          <button class="page-btn" :disabled="currentPage.value === 1" @click="currentPage.value--">
            <i class="fas fa-angle-left"></i>
          </button>
          <span class="page-info">{{ currentPage.value }} / {{ totalPages.value }}</span>
          <button class="page-btn" :disabled="currentPage.value === totalPages.value" @click="currentPage.value++">
            <i class="fas fa-angle-right"></i>
          </button>
          <button class="page-btn" :disabled="currentPage.value === totalPages.value" @click="currentPage.value = totalPages.value">
            <i class="fas fa-angle-double-right"></i>
          </button>
        </div>
      </div>
    </div>

    <div :class="['modal', { show: modalVisible }]">
      <div class="modal-content modal-form">
        <div class="modal-header">
          <h3 class="modal-title">
            <i class="fas fa-file-invoice-dollar"></i>
            {{ isEditMode.value ? '编辑报价表' : '新建报价表' }}
          </h3>
          <button class="modal-close" @click="closeModal">&times;</button>
        </div>
        <div class="modal-body">
          <form @submit.prevent="saveItem">
            <div class="form-row">
              <div class="form-group">
                <label><i class="fas fa-user"></i> 客户名称 *</label>
                <input type="text" v-model="formData.customerName" required placeholder="请输入客户名称">
              </div>
              <div class="form-group">
                <label><i class="fas fa-phone"></i> 联系电话 *</label>
                <input type="tel" v-model="formData.customerPhone" required placeholder="请输入联系电话">
              </div>
            </div>
            <div class="form-row">
              <div class="form-group">
                <label><i class="fas fa-envelope"></i> 邮箱</label>
                <input type="email" v-model="formData.customerEmail" placeholder="请输入邮箱地址">
              </div>
              <div class="form-group">
                <label><i class="fas fa-th-large"></i> 方案类型 *</label>
                <select v-model="formData.scheme" required>
                  <option value="A">方案A (标准型)</option>
                  <option value="B">方案B (升级型)</option>
                </select>
              </div>
            </div>
            <div class="form-row">
              <div class="form-group">
                <label><i class="fas fa-boxes"></i> 产品数量 *</label>
                <input type="number" v-model.number="formData.productCount" min="1" required placeholder="产品数量">
              </div>
              <div class="form-group">
                <label><i class="fas fa-yen-sign"></i> 报价金额 *</label>
                <input type="number" v-model.number="formData.totalAmount" min="0" step="0.01" required placeholder="报价金额">
              </div>
            </div>
            <div class="form-row">
              <div class="form-group">
                <label><i class="fas fa-info-circle"></i> 状态</label>
                <select v-model="formData.status">
                  <option value="draft">草稿</option>
                  <option value="sent">已发送</option>
                  <option value="accepted">已接受</option>
                  <option value="rejected">已拒绝</option>
                  <option value="expired">已过期</option>
                </select>
              </div>
              <div class="form-group">
                <label><i class="fas fa-calendar-check"></i> 有效期至</label>
                <input type="date" v-model="formData.validUntil">
              </div>
            </div>
            <div class="form-group">
              <label><i class="fas fa-sticky-note"></i> 备注</label>
              <textarea v-model="formData.remark" rows="3" placeholder="请输入备注信息"></textarea>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button class="btn btn-outline" @click="closeModal">取消</button>
          <button class="btn btn-primary" @click="saveItem">
            <i class="fas fa-save"></i> 保存
          </button>
        </div>
      </div>
    </div>

    <div :class="['modal', { show: detailModalVisible }]">
      <div class="modal-content modal-detail">
        <div class="modal-header">
          <h3 class="modal-title">
            <i class="fas fa-file-invoice-dollar"></i> 报价表详情
          </h3>
          <button class="modal-close" @click="closeDetailModal">&times;</button>
        </div>
        <div class="modal-body" v-if="currentItem">
          <div class="detail-section">
            <h4><i class="fas fa-info-circle"></i> 基本信息</h4>
            <div class="detail-grid">
              <div class="detail-item">
                <span class="label">报价单号</span>
                <span class="value">{{ currentItem.quoteNumber }}</span>
              </div>
              <div class="detail-item">
                <span class="label">客户名称</span>
                <span class="value">{{ currentItem.customerName }}</span>
              </div>
              <div class="detail-item">
                <span class="label">联系电话</span>
                <span class="value">{{ currentItem.customerPhone }}</span>
              </div>
              <div class="detail-item">
                <span class="label">邮箱</span>
                <span class="value">{{ currentItem.customerEmail || '-' }}</span>
              </div>
              <div class="detail-item">
                <span class="label">产品数量</span>
                <span class="value">{{ currentItem.productCount }} 套</span>
              </div>
              <div class="detail-item">
                <span class="label">方案类型</span>
                <span :class="['scheme-badge', currentItem.scheme]">方案{{ currentItem.scheme }}</span>
              </div>
              <div class="detail-item">
                <span class="label">报价金额</span>
                <span class="value amount">¥{{ currentItem.totalAmount.toFixed(2) }}</span>
              </div>
              <div class="detail-item">
                <span class="label">状态</span>
                <span :class="['status-badge', currentItem.status]">{{ getStatusText(currentItem.status) }}</span>
              </div>
              <div class="detail-item">
                <span class="label">有效期至</span>
                <span class="value">{{ currentItem.validUntil || '-' }}</span>
              </div>
              <div class="detail-item">
                <span class="label">创建时间</span>
                <span class="value">{{ currentItem.createdAt }}</span>
              </div>
              <div class="detail-item">
                <span class="label">更新时间</span>
                <span class="value">{{ currentItem.updatedAt }}</span>
              </div>
              <div class="detail-item full-width">
                <span class="label">备注</span>
                <span class="value">{{ currentItem.remark || '-' }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-outline" @click="closeDetailModal">关闭</button>
          <button class="btn btn-primary" @click="editFromDetail">
            <i class="fas fa-edit"></i> 编辑
          </button>
        </div>
      </div>
    </div>

    <div :class="['modal', { show: emailModalVisible }]">
      <div class="modal-content modal-email">
        <div class="modal-header">
          <h3 class="modal-title">
            <i class="fas fa-envelope"></i> 发送报价表
          </h3>
          <button class="modal-close" @click="closeEmailModal">&times;</button>
        </div>
        <div class="modal-body">
          <div class="email-details">
            <p><strong>收件人:</strong> <span>{{ emailRecipient }}</span></p>
            <p><strong>主题:</strong> <span>{{ emailSubject }}</span></p>
            <p><strong>附件:</strong> <span>报价表_{{ currentDate.value }}.pdf</span></p>
            <p><strong>邮件内容:</strong></p>
            <p>尊敬的客户，您好！</p>
            <p>根据您的需求，我们已为您准备了详细的产品报价方案，请查看附件中的报价表PDF文件。如果您有任何疑问或需要进一步调整，请随时与我们联系。</p>
            <p>感谢您对我们产品的关注！</p>
            <p>此致<br>销售团队</p>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-outline" @click="closeEmailModal">关闭</button>
          <button class="btn btn-primary" @click="openEmailClient">
            <i class="fas fa-external-link-alt"></i> 打开邮箱发送
          </button>
        </div>
      </div>
    </div>

    <div class="flow-nav">
      <button class="btn btn-outline" @click="goToQuoteMeasure">
        <i class="fas fa-arrow-left"></i> 返回测量报价
      </button>
      <button class="btn btn-primary" @click="goToNext">
        下一步：跟单看板 <i class="fas fa-arrow-right"></i>
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

const statusMap = {
  draft: '草稿',
  sent: '已发送',
  accepted: '已接受',
  rejected: '已拒绝',
  expired: '已过期'
};

const showToast = ref(false);
const toastMessage = ref('');
const toastType = ref('info');

const showNotify = (message, type = 'info') => {
  toastMessage.value = message;
  toastType.value = type;
  showToast.value = true;
  setTimeout(() => {
    showToast.value = false;
  }, 3000);
};

const quoteList = ref([]);
const searchKeyword = ref('');
const filterStatus = ref('');
const filterScheme = ref('');
const currentPage = ref(1);
const pageSize = ref(10);
const currentDate = ref('');

const generateDemoData = () => {
  const customers = [
    { name: '王建国', phone: '13800138001', email: 'wang@example.com' },
    { name: '李美玲', phone: '13900139002', email: 'li@example.com' },
    { name: '赵明辉', phone: '13700137003', email: 'zhao@example.com' },
    { name: '陈晓东', phone: '13600136004', email: 'chen@example.com' },
    { name: '刘志远', phone: '13500135005', email: 'liu@example.com' }
  ];

  const statuses = ['draft', 'sent', 'accepted', 'rejected', 'expired'];
  const schemes = ['A', 'B'];

  const data = [];
  const now = new Date();

  for (let i = 1; i <= 15; i++) {
    const customer = customers[(i - 1) % customers.length];
    const daysAgo = Math.floor(Math.random() * 30);
    const createdDate = new Date(now.getTime() - daysAgo * 24 * 60 * 60 * 1000);
    const validDate = new Date(createdDate.getTime() + 30 * 24 * 60 * 60 * 1000);
    const productCount = Math.floor(Math.random() * 5) + 1;
    const scheme = schemes[Math.floor(Math.random() * schemes.length)];
    const basePrice = scheme === 'A' ? 100 : 200;
    const totalAmount = productCount * basePrice * (Math.random() * 2 + 1);

    data.push({
      id: i,
      quoteNumber: 'QT-' + String(2024000 + i).padStart(7, '0'),
      customerName: customer.name,
      customerPhone: customer.phone,
      customerEmail: customer.email,
      productCount,
      scheme,
      totalAmount,
      status: statuses[Math.floor(Math.random() * statuses.length)],
      validUntil: validDate.getFullYear() + '-' + String(validDate.getMonth() + 1).padStart(2, '0') + '-' + String(validDate.getDate()).padStart(2, '0'),
      remark: i % 3 === 0 ? '客户要求加急处理' : i % 5 === 0 ? '需要上门安装' : '',
      createdAt: createdDate.getFullYear() + '-' + String(createdDate.getMonth() + 1).padStart(2, '0') + '-' + String(createdDate.getDate()).padStart(2, '0') + ' ' + String(createdDate.getHours()).padStart(2, '0') + ':' + String(createdDate.getMinutes()).padStart(2, '0'),
      updatedAt: createdDate.getFullYear() + '-' + String(createdDate.getMonth() + 1).padStart(2, '0') + '-' + String(createdDate.getDate()).padStart(2, '0') + ' ' + String(createdDate.getHours()).padStart(2, '0') + ':' + String(createdDate.getMinutes()).padStart(2, '0')
    });
  }
  return data;
};

const getStatusText = status => statusMap[status] || status;
const filteredData = computed(() => {
  let result = quoteList.value;
  if (searchKeyword.value) {
    const k = searchKeyword.value.toLowerCase();
    result = result.filter(x =>
      x.quoteNumber.toLowerCase().includes(k) || x.customerName.toLowerCase().includes(k)
    );
  }
  if (filterStatus.value) {
    result = result.filter(x => x.status === filterStatus.value);
  }
  if (filterScheme.value) {
    result = result.filter(x => x.scheme === filterScheme.value);
  }
  return result;
});
const totalPages = computed(() => Math.ceil(filteredData.value.length / pageSize.value) || 1);
const paginatedData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return filteredData.value.slice(start, end);
});
const handleSearch = () => { currentPage.value = 1; };
const modalVisible = ref(false);
const detailModalVisible = ref(false);
const emailModalVisible = ref(false);
const isEditMode = ref(false);
const currentItem = ref(null);
const formData = ref({ customerName: '', customerPhone: '', customerEmail: '', productCount: 1, scheme: 'A', totalAmount: 0, status: 'draft', validUntil: '', remark: '' });
const resetFormData = () => {
  formData.value = { customerName: '', customerPhone: '', customerEmail: '', productCount: 1, scheme: 'A', totalAmount: 0, status: 'draft', validUntil: '', remark: '' };
};
const openCreateModal = () => { isEditMode.value = false; resetFormData(); modalVisible.value = true; };
const editItem = item => { isEditMode.value = true; currentItem.value = item; formData.value = { ...item }; modalVisible.value = true; };
const closeModal = () => { modalVisible.value = false; currentItem.value = null; };
const saveItem = () => {
  if (!formData.value.customerName || !formData.value.customerPhone || !formData.value.productCount || formData.value.totalAmount === undefined) {
    showNotify('请填写必填项', 'error');
    return;
  }
  const now = new Date();
  const nowStr = now.getFullYear() + '-' + String(now.getMonth() + 1).padStart(2, '0') + '-' + String(now.getDate()).padStart(2, '0') + ' ' + String(now.getHours()).padStart(2, '0') + ':' + String(now.getMinutes()).padStart(2, '0');

  if (isEditMode.value && currentItem.value) {
    const idx = quoteList.value.findIndex(x => x.id === currentItem.value.id);
    if (idx !== -1) {
      quoteList.value[idx] = { ...quoteList.value[idx], ...formData.value, updatedAt: nowStr };
      showNotify('报价表已更新', 'success');
    }
  } else {
    const newId = Math.max(...quoteList.value.map(x => x.id), 0) + 1;
    const newQuoteNumber = 'QT-' + String(2024000 + newId).padStart(7, '0');
    quoteList.value.unshift({
      id: newId,
      quoteNumber: newQuoteNumber,
      ...formData.value,
      createdAt: nowStr,
      updatedAt: nowStr
    });
    showNotify('报价表已创建', 'success');
  }

  closeModal();
};
const viewDetail = item => { currentItem.value = item; detailModalVisible.value = true; };
const closeDetailModal = () => { detailModalVisible.value = false; currentItem.value = null; };
const editFromDetail = () => { closeDetailModal(); editItem(currentItem.value); };
const copyItem = item => {
  const now = new Date();
  const nowStr = now.getFullYear() + '-' + String(now.getMonth() + 1).padStart(2, '0') + '-' + String(now.getDate()).padStart(2, '0') + ' ' + String(now.getHours()).padStart(2, '0') + ':' + String(now.getMinutes()).padStart(2, '0');
  const newId = Math.max(...quoteList.value.map(x => x.id), 0) + 1;
  const newQuoteNumber = 'QT-' + String(2024000 + newId).padStart(7, '0');
  quoteList.value.unshift({ ...item, id: newId, quoteNumber: newQuoteNumber, status: 'draft', createdAt: nowStr, updatedAt: nowStr });
  showNotify('报价表已复制', 'success');
};
const deleteItem = item => {
  if (confirm('确定要删除报价表 ' + item.quoteNumber + ' 吗？')) {
    const idx = quoteList.value.findIndex(x => x.id === item.id);
    if (idx !== -1) {
      quoteList.value.splice(idx, 1);
      if (paginatedData.value.length === 0 && currentPage.value > 1) currentPage.value--;
      showNotify('报价表已删除', 'success');
    }
  }
};

const emailRecipient = computed(() => currentItem.value?.customerEmail || 'customer@example.com');
const emailSubject = computed(() => '报价单#' + (currentItem.value?.quoteNumber || ''));

const sendQuote = item => {
  currentItem.value = item;
  const idx = quoteList.value.findIndex(x => x.id === item.id);
  if (idx !== -1) {
    quoteList.value[idx].status = 'sent';
    quoteList.value[idx].updatedAt = new Date().getFullYear() + '-' + String(new Date().getMonth() + 1).padStart(2, '0') + '-' + String(new Date().getDate()).padStart(2, '0') + ' ' + String(new Date().getHours()).padStart(2, '0') + ':' + String(new Date().getMinutes()).padStart(2, '0');
  }
  showNotify('报价表已准备发送', 'success');
  emailModalVisible.value = true;
};
const closeEmailModal = () => { emailModalVisible.value = false; };
const openEmailClient = () => {
  const subject = encodeURIComponent(emailSubject.value);
  const body = encodeURIComponent('尊敬的客户，您好！根据您的需求，我们已为您准备了详细的产品报价方案，请查看附件中的报价表PDF文件。如果您有任何疑问或需要进一步调整，请随时与我们联系。感谢您对我们产品的关注！此致，销售团队');
  window.location.href = 'mailto:' + emailRecipient.value + '?subject=' + subject + '&body=' + body;
  closeEmailModal();
};
const printQuote = item => { currentItem.value = item; showNotify('打印预览功能', 'info'); setTimeout(() => { window.print(); }, 500); };
const goToQuoteMeasure = () => { router.push('/quote'); };
const goToNext = () => { router.push('/order/tracking'); };
onMounted(() => { quoteList.value = generateDemoData(); const now = new Date(); currentDate.value = '' + now.getFullYear() + String(now.getMonth() + 1) + String(now.getDate()); });
</script>

<style scoped>
.quote-generate {}
.toast { position: fixed; top: 20px; right: 20px; background: #333; color: #fff; padding: 12px 24px; border-radius: 40px; font-size: 14px; z-index: 2000; opacity:0; transition: all .3s; pointer-events:none;}
.toast.success { background: #28a745; }
.toast.error { background: #dc3545; }
.toast.info { background: #2ea2cc; }
.toast.show { opacity: 1; }
.page-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom:24px;}
.page-header-left { display: flex; flex-direction: column; gap:4px; }
.page-title { font-size:1.5rem; font-weight:700; color:#2d4059; margin:0; display:flex; gap:10px; align-items:center;}
.page-title i { color:#2ea2cc; }
.text-secondary { color:#6c757d; display:flex; gap:6px; align-items:center; }
.nav-tabs { display:flex; border-bottom: 2px solid #d4dfec; margin-bottom:24px; gap:4px;}
.nav-tab { padding:10px 20px; font-weight:600; color:#4a5f73; border-bottom:3px solid transparent; cursor:pointer;}
.nav-tab:hover { color:#2ea2cc; }
.nav-tab.active { color:#2ea2cc; border-bottom-color:#2ea2cc; }
.search-bar { display:flex; gap:16px; margin-bottom:20px; flex-wrap: wrap; }
.search-input-group { flex:1; min-width:280px; position:relative; }
.search-input-group i { position:absolute; left:16px; top:50%; transform: translateY(-50%); color:#6c757d; }
.search-input-group input { width:100%; padding:12px 16px 12px 44px; border: 2px solid #d4dfec; border-radius:40px; font-size:14px; outline:none;}
.search-input-group input:focus { border-color:#2ea2cc; box-shadow:0 0 0 3px rgba(46,162,204,0.1);}
.filter-group { display:flex; gap:12px; }
.filter-group select { padding:12px 20px; border:2px solid #d4dfec; border-radius:40px; font-size:14px; background:#fff; cursor:pointer; min-width:140px;}
.filter-group select:focus { outline:none; border-color:#2ea2cc; }
.card { background:#fff; border-radius:16px; border:1px solid #d4dfec; overflow:hidden; }
.table-container { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
th, td { padding:14px 16px; text-align:left; border-bottom:1px solid #eef2f7; }
th { background:#f8fafc; font-weight:600; color:#4a5f73; font-size:0.9rem; white-space:nowrap; position:sticky; top:0; z-index:1; }
.quote-number { font-weight:600; color:#2ea2cc; display:flex; gap:6px; align-items:center; }
.customer-info .customer-name { font-weight:600; color:#2d4059; margin-bottom:2px; }
.customer-info .customer-phone { font-size:0.85rem; color:#6c757d; }
.amount { font-weight:700; color:#e74c3c; }
.scheme-badge { display:inline-block; padding:4px 12px; border-radius:20px; font-size:0.85rem; font-weight:600; }
.scheme-badge.A { background:#e3f2fd; color:#1976d2; }
.scheme-badge.B { background:#fff3e0; color:#f57c00; }
.status-badge { display:inline-block; padding:4px 12px; border-radius:20px; font-size:0.85rem; font-weight:500; }
.status-badge.draft { background:#f5f5f5; color:#616161; }
.status-badge.sent { background:#e3f2fd; color:#1565c0; }
.status-badge.accepted { background:#d4edda; color:#155724; }
.status-badge.rejected { background:#ffebee; color:#c62828; }
.status-badge.expired { background:#fce4ec; color:#880e4f; }
.action-cell { white-space:nowrap; display:flex; gap:4px; }
.btn-action { width:32px; height:32px; border:none; border-radius:8px; cursor:pointer; display:flex; justify-content:center; align-items:center; }
.btn-action.view { background:#e3f2fd; color:#1976d2; }
.btn-action.view:hover { background:#1976d2; color:#fff; }
.btn-action.edit { background:#fff3e0; color:#f57c00; }
.btn-action.edit:hover { background:#f57c00; color:#fff; }
.btn-action.copy { background:#f3e5f5; color:#7b1fa2; }
.btn-action.copy:hover { background:#7b1fa2; color:#fff; }
.btn-action.send { background:#e8f5e9; color:#388e3c; }
.btn-action.send:hover { background:#388e3c; color:#fff; }
.btn-action.print { background:#e0f2f1; color:#00796b; }
.btn-action.print:hover { background:#00796b; color:#fff; }
.btn-action.delete { background:#ffebee; color:#d32f2f; }
.btn-action.delete:hover { background:#d32f2f; color:#fff; }
.empty-text { text-align:center; padding:60px 20px; color:#6c757d; }
.empty-text i { font-size:48px; margin-bottom:16px; display:block; opacity:0.5; }
.empty-text p { margin:0; font-size:16px; }
.pagination-container { display:flex; justify-content:space-between; align-items:center; padding:20px; border-top:1px solid #eef2f7; gap:12px; flex-wrap: wrap;}
.pagination-info { color:#6c757d; font-size:14px; }
.pagination { display:flex; align-items:center; gap:8px; }
.page-btn { width:36px; height:36px; border:1px solid #d4dfec; background:#fff; border-radius:8px; cursor:pointer; display:flex; justify-content:center; align-items:center; }
.page-btn:hover:not(:disabled) { border-color:#2ea2cc; color:#2ea2cc; }
.page-btn:disabled { opacity:0.5; cursor:not-allowed; }
.page-info { padding:0 12px; font-weight:600; color:#2d4059; }
.btn { padding:12px 20px; border-radius:10px; font-weight:600; cursor:pointer; transition:all .2s; border:none; display:flex; align-items:center; gap:8px; }
.btn-primary { background:linear-gradient(135deg, #2ea2cc, #2690b3); color:#fff; }
.btn-primary:hover { transform: translateY(-1px); }
.btn-outline { background:#fff; color:#2d4059; border:1px solid #d4dfec; }
.btn-outline:hover { background:#f8fafc; border-color:#2ea2cc; }
.modal { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); display:flex; justify-content:center; align-items:center; z-index:1000; opacity:0; visibility:hidden; transition:all .3s; }
.modal.show { opacity:1; visibility:visible; }
.modal-content { background:#fff; border-radius:16px; width:90%; max-height:90vh; overflow-y:auto; transform: translateY(-20px); transition:transform .3s; }
.modal.show .modal-content { transform: translateY(0); }
.modal-form { max-width:700px; }
.modal-detail { max-width:800px; }
.modal-email { max-width:600px; }
.modal-header { display:flex; justify-content:space-between; align-items:center; padding:20px 24px; border-bottom:1px solid #eef2f7; }
.modal-title { margin:0; font-size:1.25rem; color:#2d4059; display:flex; gap:8px; align-items:center; }
.modal-title i { color:#2ea2cc; }
.modal-close { background:none; border:none; font-size:1.5rem; color:#6c757d; cursor:pointer; padding:0; line-height:1; }
.modal-close:hover { color:#2d4059; }
.modal-body { padding:24px; }
.modal-footer { display:flex; justify-content:flex-end; gap:12px; padding:16px 24px; border-top:1px solid #eef2f7; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.form-group { margin-bottom:20px; }
.form-group label { display:block; margin-bottom:8px; font-weight:600; color:#2d4059; font-size:0.9rem; display:flex; gap:6px; align-items:center; }
.form-group label i { color:#2ea2cc; }
.form-group input, .form-group select, .form-group textarea { width:100%; padding:10px 14px; border:1px solid #d4dfec; border-radius:8px; font-size:14px; outline:none; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:#2ea2cc; box-shadow:0 0 0 3px rgba(46,162,204,0.1); }
.detail-section { margin-bottom:24px; }
.detail-section:last-child { margin-bottom:0; }
.detail-section h4 { margin:0 0 16px; padding-bottom:8px; border-bottom:2px solid #eef2f7; color:#2d4059; font-size:1.1rem; display:flex; gap:8px; align-items:center; }
.detail-section h4 i { color:#2ea2cc; }
.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.detail-item { display:flex; flex-direction:column; gap:4px; }
.detail-item.full-width { grid-column: 1 / -1; }
.detail-item .label { font-size:0.85rem; color:#6c757d; font-weight:500; }
.detail-item .value { font-size:1rem; color:#2d4059; font-weight:500; }
.detail-item .value.amount { font-size:1.2rem; font-weight:700; color:#e74c3c; }
.email-details { background:#f8f9fa; border-radius:6px; padding:15px; }
.email-details p { margin-bottom:8px; color:#2d4059; }
.email-details p:last-child { margin-bottom:0; }
.flow-nav { display:flex; justify-content:space-between; margin-top:24px; }
@media (max-width: 768px) {
  .page-header { flex-direction:column; gap:16px; }
  .page-header-right, .search-input-group, .filter-group, .flow-nav { width:100%; }
  .page-header-right .btn, .flow-nav .btn { width:100%; justify-content:center; }
  .search-bar { flex-direction:column; }
  .form-row, .detail-grid { grid-template-columns:1fr; }
  .flow-nav { flex-direction:column; gap:12px; }
  .action-cell { min-width:200px; }
}
@media print {
  .flow-nav, .search-bar, .action-cell, .btn, .modal { display:none !important; }
  .card { box-shadow:none; border:1px solid #ddd; }
}
</style>`;
fs.writeFileSync('./src/views/quote/QuoteGenerate.vue', fixedContent, 'utf8');
console.log('✅ Successfully wrote QuoteGenerate.vue!');