<template>
  <div style="padding: 0 20px;">
    <lx-header icon="md-apps" style="margin-bottom: 10px; border: 0px; margin-top: 15px" text="新增支付表格">
    </lx-header>

    <div class="content-wrapper">
      <!-- 左侧面板 -->
      <div class="left-panel">
        <!-- 预览区 -->
                    <div>
          <div class="panel-header">
            <h5 class="panel-title">预览区</h5>
            <div class="action-buttons">
              <el-button size="small" @click="handleRefresh">刷新</el-button>
            </div>
                    </div>
          <div class="preview-container" v-html="previewContent"></div>
                    </div>

        <!-- 代码预览区 -->
                    <div>
          <div class="panel-header">
            <h5 class="panel-title">代码预览区</h5>
            <div class="action-buttons">
              <el-select v-model="formatType" size="small" style="width: 120px">
                        <el-option label="HTML" value="html"></el-option>
                        <el-option label="DOCX" value="docx"></el-option>
                    </el-select>
              <el-button 
                size="small" 
                v-if="formatType === 'docx'"
                @click="handleUpload"
              >上传文件</el-button>
            </div>
          </div>
          <div class="code-preview-container">
            <el-input
              type="textarea"
              v-model="codeContent"
              :rows="10"
              resize="none"
              class="code-editor"
            ></el-input>
          </div>
                    </div>
                </div>
                
      <!-- 右侧面板 -->
      <div class="right-panel">
        <div class="field-config-container">
          <div class="panel-header">
            <h5 class="panel-title">字段配置</h5>
                </div>
          <div class="field-list">
            <div 
              v-for="field in fieldList" 
              :key="field.name"
              class="field-item"
              @click="handleEditField(field)"
            >
              <el-row align="middle">
                <el-col :span="8">
                  <span class="text-muted field-name">{{ field.name }}</span>
                </el-col>
                <el-col :span="8">
                  <strong class="field-label">{{ field.label }}</strong>
                </el-col>
                <el-col :span="8">
                  <span class="text-muted">{{ getTypeDisplay(field.type) }}</span>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部固定保存按钮 -->
    <div class="footer-actions">
      <div class="footer-content">
        <el-button size="large" class="footer-button" @click="handleCancel">取 消</el-button>
        <el-button size="large" type="primary" class="footer-button" @click="handleSave">保 存</el-button>
      </div>
    </div>

    <!-- 编辑字段抽屉 -->
    <el-drawer
      :visible.sync="showEditDrawer"
      title="编辑字段"
      size="400px"
      :destroy-on-close="true"
      :with-footer="true"
    >
      <el-form :model="editForm" label-width="80px">
        <el-form-item label="字段名">
          <el-input v-model="editForm.name" disabled class="form-input"></el-input>
        </el-form-item>
        <el-form-item label="中文名">
          <el-input v-model="editForm.label" class="form-input"></el-input>
        </el-form-item>
        <el-form-item label="表单类型">
          <el-select v-model="editForm.type" class="w-100 form-input">
            <el-option label="文本" value="text"></el-option>
            <el-option label="数字" value="number"></el-option>
            <el-option label="日期" value="date"></el-option>
            <el-option label="下拉选择" value="select"></el-option>
            <el-option label="复选框" value="checkbox"></el-option>
            <el-option label="单选框" value="radio"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数据选项" v-if="['select', 'checkbox', 'radio'].includes(editForm.type)">
          <el-input 
            v-model="editForm.options" 
            placeholder="用逗号分隔多个选项"
            type="textarea"
            :rows="3"
            class="form-input"
          ></el-input>
        </el-form-item>
      </el-form>
      <div class="drawer-footer">
        <div class="footer-buttons">
          <el-button @click="showEditDrawer = false">取 消</el-button>
          <el-button type="primary" @click="handleSaveField">保 存</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: 'AddPayForm',
  data() {
    return {
      formatType: 'html',
      codeContent: '',
      showEditDrawer: false,
      currentTemplateIndex: 0,
      templates: [
        {
          name: '资金划拨审批单',
          content: `
<div style="background: #fff; padding: 20px;">
  <div style="position: relative; width: 100%; padding: 20px;">
    <h2 style="text-align: center; font-size: 20px; font-weight: bold; margin-bottom: 20px;">苏州市河道管理处资金划拨审批单</h2>
    <table style="width: 100%; border-collapse: collapse; font-family: SimSun, serif;">
      <tr>
        <td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000; width: 25%;">项目名称：</td>
        <td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000; width: 25%;">{{projectName}}</td>
        <td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000; text-align: right;" colspan="2">本次为第<span style="display: inline-block; width: 30px; border-bottom: 1px solid #000; text-align: center;">{{paymentTimes}}</span>次付款</td>
      </tr>
      <tr>
        <td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000;">承包商/供货商：</td>
        <td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000;">{{contractor}}</td>
        <td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000;">合同服务时间：</td>
        <td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000;">{{serviceTime}}</td>
      </tr>
      <tr>
        <td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; text-align: center; background-color: #f5f5f5; border: 1px solid #000;" colspan="2">付款情形</td>
        <td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; text-align: center; background-color: #f5f5f5; border: 1px solid #000;">金额(单位：元)</td>
        <td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; text-align: center; background-color: #f5f5f5; border: 1px solid #000;">备注</td>
      </tr>
      <tr>
        <td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; text-align: center; border: 1px solid #000; width: 10%;">A</td>
        <td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000;">合同金额</td>
        <td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000;">{{contractAmount}}</td>
        <td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000;">{{contractRemark}}</td>
      </tr>
      <tr>
        <td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; text-align: center; border: 1px solid #000;">B</td>
        <td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000;">审计金额</td>
        <td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000;">{{auditAmount}}</td>
        <td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000;">{{auditRemark}}</td>
      </tr>
      <tr>
        <td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; text-align: center; border: 1px solid #000;">C</td>
        <td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000;">前期累计已付款</td>
        <td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000;">{{previousPayment}}</td>
        <td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000;">{{previousPaymentRemark}}</td>
      </tr>
      <tr>
        <td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; text-align: center; border: 1px solid #000;">D</td>
        <td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000;">本期拟款</td>
        <td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000;">{{currentPayment}}</td>
        <td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000;">{{currentPaymentRemark}}</td>
      </tr>
      <tr style="background-color: #f5f5f5;">
        <td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; text-align: center; border: 1px solid #000;">E</td>
        <td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000;">本期应付款</td>
        <td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000;">{{currentDuePayment}}</td>
        <td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000;">
          <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
            <label style="margin-right: 10px;"><input type="checkbox"> 预付款</label>
            <label style="margin-right: 10px;"><input type="checkbox"> 进度款</label>
            <label><input type="checkbox"> 结算款</label>
          </div>
          <div style="display: flex; justify-content: flex-start;">
            <label style="margin-right: 20px;"><input type="checkbox"> 质保金</label>
            <label><input type="checkbox"> <span style="text-decoration: underline;">&nbsp;&nbsp;&nbsp;&nbsp;</span>(其他)</label>
          </div>
        </td>
      </tr>
      <tr>
        <td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; text-align: center; border: 1px solid #000;">F</td>
        <td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000;">累计支付</td>
        <td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000;">{{totalPaid}}</td>
        <td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000;">{{totalPaidRemark}}</td>
      </tr>
      <tr>
        <td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; text-align: center; border: 1px solid #000;">G</td>
        <td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000;">累计拟款</td>
        <td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000;">{{totalPlanned}}</td>
        <td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000;">{{totalPlannedRemark}}</td>
      </tr>
      <tr>
        <td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; text-align: center; border: 1px solid #000;">H</td>
        <td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000;">质保金</td>
        <td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000;">{{warranty}}</td>
        <td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000;">
          <span style="text-decoration: underline;">&nbsp;&nbsp;&nbsp;</span>%，质保期<span style="text-decoration: underline;">&nbsp;&nbsp;&nbsp;</span>年，需审计的以审计价为计费依据。
        </td>
      </tr>
      <tr>
        <td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000;" colspan="4">资金划支渠道：</td>
      </tr>
      <tr>
        <td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000; height: 100px; vertical-align: top;">
          <div>业务科室：</div>
          <div style="margin-top: 60px;">经办人：</div>
        </td>
        <td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000; vertical-align: top;">业务科室负责人：</td>
        <td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000; vertical-align: top;" colspan="2">业务科室分管领导：</td>
      </tr>
      <tr>
        <td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000; height: 100px; vertical-align: top;">财务审计科：</td>
        <td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000; vertical-align: top;">财务审计科分管领导：</td>
        <td style="padding: 8px 12px; font-size: 16px; line-height: 1.5; border: 1px solid #000; vertical-align: top;" colspan="2">单位负责人：</td>
      </tr>
    </table>
  </div>
</div>`
        },
        {
          name: '简易报销贴单',
          content: `
<div style="background: #fff; padding: 20px;">
  <div style="position: relative; width: 100%; padding: 20px;">
    <h2 style="text-align: center; font-size: 20px; font-weight: bold; margin-bottom: 20px;">苏州市河道管理处报销贴单</h2>
    <div style="width: 90%; margin-bottom: 20px; padding: 0 12px; display: flex;">
      <div style="text-align: left; flex: 1; font-size: 16px;">科室：</div>
      <div style="text-align: right; font-size: 16px;">年&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;日</div>
    </div>
    <table style="width: 100%; border-collapse: collapse; font-family: SimSun, serif;">
      <colgroup>
        <col style="width: 30%">
        <col style="width: 20%">
        <col style="width: 20%">
        <col style="width: 15%">
        <col style="width: 10%">
      </colgroup>
      <tbody>
        <tr>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; background-color: #fff; text-align: center; font-weight: bold;" rowspan="2">用途说明</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; background-color: #fff; text-align: center; font-weight: bold;" rowspan="2">金额</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; background-color: #fff; text-align: center; font-weight: bold;" rowspan="2">报销(领款)人</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; background-color: #fff; text-align: center;" rowspan="12">
            <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%;">
              <div style="writing-mode: vertical-lr; text-orientation: upright; letter-spacing: 8px;">
                附单据张
              </div>
            </div>
          </td>
        </tr>
        <tr></tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left;">{{purpose1}}</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: right;">{{amount1}}</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; background-color: #e9ecef; text-align: center;" rowspan="2">科室负责人</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: center;" rowspan="2">{{departmentHead}}</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left;">{{purpose2}}</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: right;">{{amount2}}</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left;">{{purpose3}}</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: right;">{{amount3}}</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; background-color: #e9ecef; text-align: center;" rowspan="2">财审科审核</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: center;" rowspan="2">{{financeApproval}}</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left;">{{purpose4}}</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: right;">{{amount4}}</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left;">{{purpose5}}</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: right;">{{amount5}}</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; background-color: #e9ecef; text-align: center;" rowspan="2">分管领导审核</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: center;" rowspan="2">{{leaderApproval}}</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left;">{{purpose6}}</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: right;">{{amount6}}</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left;">{{purpose7}}</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: right;">{{amount7}}</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; background-color: #e9ecef; text-align: center;" rowspan="2">财务分管领导审核</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: center;" rowspan="2">{{financeLeaderApproval}}</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left;">{{purpose8}}</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: right;">{{amount8}}</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; font-weight: bold; text-align: center;">合计</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: right;">{{total}}</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; background-color: #e9ecef; text-align: center;" rowspan="2">单位负责人审批</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: center;" rowspan="2">{{unitLeaderApproval}}</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; font-weight: bold; text-align: center;">报销金额(大写)</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: center;">
            <div style="display: flex; justify-content: space-around;">
              <span>万</span>
              <span>仟</span>
              <span>佰</span>
              <span>拾</span>
              <span>元</span>
              <span>角</span>
              <span>分</span>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>`
        },
        {
          name: '报销贴单',
          content: `
<div style="padding: 20px;">
  <div style="background: white;">
    <h2 style="text-align: center; font-size: 20px; font-weight: bold; margin-bottom: 20px;">苏州市河道管理处报销贴单</h2>
    <div style="display: flex; justify-content: space-between; margin-bottom: 20px; font-size: 14px;">
      <span>科室：{{department}}</span>
      <span>{{year}}年{{month}}月{{day}}日</span>
    </div>
    <table style="width: 100%; border-collapse: collapse; font-size: 14px; background: white;">
      <tbody>
        <tr>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center; width: 120px;">职工姓名</td>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">{{name}}</td>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center; width: 120px;">退休/在职</td>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">{{status}}</td>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center; width: 120px;">家属姓名</td>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">{{familyName}}</td>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center; width: 120px;">与本人关系</td>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">{{relation}}</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center; width: 120px;">内容</td>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center; width: 120px;">发票金额</td>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center; width: 120px;">报销比例</td>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">{{medicalActualAmount}}</td>
          <td style="border: 1px solid #000; padding: 8px; height: 60px; vertical-align: middle; text-align: center; background-color: white;" colspan="3" rowspan="2">{{name}}</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center; width: 120px;">门诊医药费</td>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">{{medicalInvoiceValue}}</td>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">{{medicalReimbursementRatio}}</td>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">{{medicalActualAmount}}</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center; width: 120px;">住院医药费</td>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">{{hospitalInvoiceValue}}</td>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">{{hospitalReimbursementRatio}}</td>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">{{hospitalActualAmount}}</td>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center; width: 120px;">科室负责人</td>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;" colspan="3">{{departmentHead}}</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center; width: 120px;">儿童医药费</td>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">{{childMedicalInvoiceValue}}</td>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">{{childMedicalReimbursementRatio}}</td>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">{{childMedicalActualAmount}}</td>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center; width: 120px;">财审科审核</td>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;" colspan="3">{{financialAudit}}</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center; width: 120px;">幼托费用</td>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">{{childcareInvoiceValue}}</td>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">无</td>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">{{childcareActualAmount}}</td>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center; width: 120px;">分管领导审核</td>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;" colspan="3">{{leaderAudit}}</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center; width: 120px;">子女保险费</td>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">{{childInsuranceInvoiceValue}}</td>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">无</td>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">{{childInsuranceActualAmount}}</td>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center; width: 120px;">财务分管领导审核</td>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;" colspan="3">{{financialLeaderAudit}}</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center; width: 120px;">合计</td>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;" colspan="3">{{totalAmount}}</td>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center; width: 120px;" rowspan="2">单位负责人审批</td>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;" colspan="3" rowspan="2">{{unitLeaderAudit}}</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center; width: 120px;">报销金额(大写)</td>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;" colspan="3">{{upperCaseAmount}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>`
        },
        {
          name: '公务接待结算单',
          content: `
<div style="background: #fff; padding: 20px;">
  <div style="position: relative; width: 100%; padding: 20px;">
    <h2 style="text-align: center; font-size: 20px; font-weight: bold; margin-bottom: 20px;">苏州市河道管理处公务接待结算单</h2>
    <table style="width: 100%; border-collapse: collapse; font-family: SimSun, serif;">
      <tbody>
        <tr>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 120px; background-color: #fff; text-align: center; font-weight: normal;">科室</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left;" colspan="2">{{getDepartment}}</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 120px; background-color: #fff; text-align: center; font-weight: normal;">事由</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left;" colspan="2">{{getReason}}</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 120px; background-color: #fff; text-align: center; font-weight: normal;">日期</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left;" colspan="2">{{getDate}}</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 120px; background-color: #fff; text-align: center; font-weight: normal;">就餐地点</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left;" colspan="2">{{getDiningLocation}}</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 120px; background-color: #fff; text-align: center; font-weight: normal;" rowspan="2">就餐人数</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 100px; background-color: #fff; text-align: center; font-weight: normal;">接待人数</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left;">{{getVisitorCount}}</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 120px; background-color: #fff; text-align: center; font-weight: normal;" rowspan="2">金额(元)</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 100px; background-color: #fff; text-align: center; font-weight: normal;">餐费</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left;">{{getMealsFee}}</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 100px; background-color: #fff; text-align: center; font-weight: normal;">陪同人数</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left;">{{getAccompanyCount}}</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 100px; background-color: #fff; text-align: center; font-weight: normal;">住宿费</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left;">{{getAccommodationFee}}</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 120px; background-color: #fff; text-align: center; font-weight: normal;">科室经办人</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left;" colspan="2">{{getHandler}}</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 120px; background-color: #fff; text-align: center; font-weight: normal;">综合科意见</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left;" colspan="2">{{getComprehensiveOpinion}}</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 80px; width: 120px; background-color: #fff; text-align: center; font-weight: normal;">分管领导意见</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 80px; text-align: left;" colspan="5">{{getLeaderOpinion}}</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 80px; width: 120px; background-color: #fff; text-align: center; font-weight: normal;">备注</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 80px; text-align: left;" colspan="5">{{getRemark}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>`
        },
        {
          name: '会议审批表',
          content: `
  <div style="background: white;">
    <h2 style="text-align: center; font-size: 20px; font-weight: bold; margin-bottom: 20px;">苏州市河道管理处会议审批表</h2>
    <div style="display: flex; justify-content: flex-end; margin-bottom: 20px; font-size: 14px;">
      <div>
        <span>{{year}}</span>年
        <span>{{month}}</span>月
        <span>{{day}}</span>日
      </div>
    </div>
    <table style="width: 100%; border-collapse: collapse; font-size: 14px; background: white;">
      <tbody>
        <tr>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center; width: 25%;">申请部门</td>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">{{department}}</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center;">会议名称</td>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">{{meetingName}}</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center;">会议类别</td>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">（{{meetingType}}）类会议</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center;">会议起止日期及天数</td>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">{{duration}}</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center;">会议地点</td>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">{{location}}</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center;">会议规模</td>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">代表人数：{{representativeCount}} 工作人员数：{{staffCount}}</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center;">会议经费预算（元）</td>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">{{totalBudget}}</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center;">其中：住宿费</td>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">{{accommodationFee}}</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center;">伙食费</td>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">{{mealsFee}}</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center;">租场费</td>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">{{venueFee}}</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center;">其他费用</td>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">{{otherFees}}</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center;">科室负责人审核</td>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">{{departmentApproval}}</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; background-color: #e9ecef; font-weight: bold; text-align: center;">分管领导审核</td>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">{{sectionApproval}}</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; background-color: #e9ecef; font-weight: bold; text-align: center;">综合科审核</td>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">{{comprehensiveApproval}}</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; background-color: #e9ecef; font-weight: bold; text-align: center;">单位负责人审核</td>
          <td style="border: 1px solid #000; padding: 8px; height: 32px; vertical-align: middle; text-align: left; padding-left: 12px; background-color: white;">{{unitApproval}}</td>
        </tr>
      </tbody>
    </table>
  </div>`
        },
        {
          name: '公务接待申请单',
          content: `
<div style="background: #fff; padding: 20px;">
  <div style="position: relative; width: 100%; padding: 20px;">
    <h2 style="text-align: center; font-size: 20px; font-weight: bold; margin-bottom: 20px;">苏州市河道管理处公务接待申请单</h2>
    <table style="width: 100%; border-collapse: collapse; font-family: SimSun, serif;">
      <tbody>
        <tr>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 120px; background-color: #fff; text-align: center; font-weight: normal;">申请科室</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left; min-height: 24px;" colspan="2">{{department}}</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 120px; background-color: #fff; text-align: center; font-weight: normal;">申请理由</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left; min-height: 24px;" colspan="2">{{reason}}</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 120px; background-color: #fff; text-align: center; font-weight: normal;">申请日期</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left; min-height: 24px;" colspan="2">{{applyDate}}</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left; min-height: 24px;" colspan="3"></td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 120px; background-color: #fff; text-align: center; font-weight: normal;" rowspan="2">预计就餐人数</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 100px; background-color: #fff; text-align: center; font-weight: normal;">接待人数</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left; min-height: 24px;">{{visitorCount}}</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 120px; background-color: #fff; text-align: center; font-weight: normal;" rowspan="2">预计金额<br>(元)</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 100px; background-color: #fff; text-align: center; font-weight: normal;">餐费</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left; min-height: 24px;">{{mealsFee}}</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 100px; background-color: #fff; text-align: center; font-weight: normal;">陪同人数</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left; min-height: 24px;">{{accompanyCount}}</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 100px; background-color: #fff; text-align: center; font-weight: normal;">住宿费</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left; min-height: 24px;">{{accommodationFee}}</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 120px; background-color: #fff; text-align: center; font-weight: normal;">科室经办人</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left; min-height: 24px;" colspan="2">{{handler}}</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 120px; background-color: #fff; text-align: center; font-weight: normal;">综合科意见</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left; min-height: 24px;" colspan="2">{{comprehensiveOpinion}}</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 80px; width: 120px; background-color: #fff; text-align: center; font-weight: normal;">分管领导意见</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 80px; text-align: left; min-height: 24px;" colspan="5">{{leaderOpinion}}</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 80px; width: 120px; background-color: #fff; text-align: center; font-weight: normal;">备注</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 80px; text-align: left; min-height: 24px;" colspan="5">{{remark}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>`
        },
        {
          name: '水电费结算单',
          content: `
<div style="background: #fff; padding: 20px;">
  <div style="position: relative; width: 100%; padding: 20px;">
    <h2 style="text-align: center; font-size: 20px; font-weight: bold; margin-bottom: 20px;">水电费结算单</h2>
    <table style="width: 100%; border-collapse: collapse; font-family: SimSun, serif;">
      <tbody>
        <tr>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 120px; background-color: #fff; text-align: center; font-weight: normal;">费用发生地点：</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left; min-height: 24px;" colspan="3">{{location}}</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 120px; background-color: #fff; text-align: center; font-weight: normal;">上期读数</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left; min-height: 24px;">{{previousReading}}</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 120px; background-color: #fff; text-align: center; font-weight: normal;">实际使用水/电量</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left; min-height: 24px;">{{usageAmount}}</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 120px; background-color: #fff; text-align: center; font-weight: normal;">年 月 日读数</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left; min-height: 24px;">{{currentReading}}</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 120px; background-color: #fff; text-align: center; font-weight: normal;">水/电费单价</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left; min-height: 24px;">{{unitPrice}}</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 120px; background-color: #fff; text-align: center; font-weight: normal;">总费用</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left; min-height: 24px;">{{totalAmount}}元</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 120px; background-color: #fff; text-align: center; font-weight: normal;">大写：</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left; min-height: 24px;">{{amountInWords}}</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 120px; background-color: #fff; text-align: center; font-weight: normal;">借水/电单位</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left; min-height: 24px;">{{borrower}}</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 120px; background-color: #fff; text-align: center; font-weight: normal;">经办人</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left; min-height: 24px;">{{handler}}</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 120px; background-color: #fff; text-align: center; font-weight: normal;">经办科室</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left; min-height: 24px;">{{department}}</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 120px; background-color: #fff; text-align: center; font-weight: normal;">科室负责人</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left; min-height: 24px;">{{departmentHead}}</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 120px; background-color: #fff; text-align: center; font-weight: normal;">发票预留电话</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left; min-height: 24px;">{{phone}}</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; width: 120px; background-color: #fff; text-align: center; font-weight: normal;">分管领导</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left; min-height: 24px;">{{leader}}</td>
        </tr>
      </tbody>
    </table>
    <div style="margin-top: 20px; text-align: right;">
      <div style="font-size: 16px;">
        申请日期：{{applyDate}}
      </div>
    </div>
  </div>
</div>`
        },
        {
          name: '定点办会结算单',
          content: `
<div style="background: #fff; padding: 20px;">
  <div style="position: relative; width: 100%; padding: 20px;">
    <h2 style="text-align: center; font-size: 20px; font-weight: bold; margin-bottom: 20px;">苏州市河道管理处定点办会结算单</h2>
    <div style="display: flex; justify-content: space-between; margin-bottom: 20px;">
      <div></div>
      <div style="text-align: right;">年&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;日</div>
    </div>
    <table style="width: 100%; border-collapse: collapse; font-family: SimSun, serif;">
      <colgroup>
        <col style="width: 30%">
        <col style="width: 35%">
        <col style="width: 35%">
      </colgroup>
      <tbody>
        <tr>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; background-color: #fff; text-align: center; font-weight: normal;">申请部门</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left;" colspan="2">{{department}}</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; background-color: #fff; text-align: center; font-weight: normal;">会议名称</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left;" colspan="2">{{meetingName}}</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; background-color: #fff; text-align: center; font-weight: normal;">会议类别</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left;" colspan="2">（{{meetingType}}）类会议</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; background-color: #fff; text-align: center; font-weight: normal;">会议起止日期及天数</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left;" colspan="2">{{duration}}</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; background-color: #fff; text-align: center; font-weight: normal;">会议地点</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left;" colspan="2">{{location}}</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; background-color: #fff; text-align: center; font-weight: normal;">会议规模</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left;" colspan="2">代表人数：{{representativeCount}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;工作人员数：{{staffCount}}</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; background-color: #fff; text-align: center; font-weight: normal;">会议经费预算（元）</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; background-color: #fff; text-align: center; font-weight: normal;">预算金额</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; background-color: #fff; text-align: center; font-weight: normal;">决算金额</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; background-color: #fff; text-align: center; font-weight: normal;">合计</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left;">{{budgetTotal}}</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left;">{{settlementTotal}}</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; background-color: #fff; text-align: center; font-weight: normal;">其中：住宿费</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left;">{{budgetAccommodation}}</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left;">{{settlementAccommodation}}</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; background-color: #fff; text-align: center; font-weight: normal;">伙食费</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left;">{{budgetMeals}}</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left;">{{settlementMeals}}</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; background-color: #fff; text-align: center; font-weight: normal;">租场费</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left;">{{budgetVenue}}</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left;">{{settlementVenue}}</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; background-color: #fff; text-align: center; font-weight: normal;">其他费用</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left;">{{budgetOther}}</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left;">{{settlementOther}}</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; background-color: #fff; text-align: center; font-weight: normal;">科室负责人审核</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left;" colspan="2">{{departmentApproval}}</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; background-color: #fff; text-align: center; font-weight: normal;">分管领导审核</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left;" colspan="2">{{leaderApproval}}</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; background-color: #fff; text-align: center; font-weight: normal;">财审科审核</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left;" colspan="2">{{financeApproval}}</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; background-color: #fff; text-align: center; font-weight: normal;">财审科分管领导审核</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left;" colspan="2">{{financeLeaderApproval}}</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; background-color: #fff; text-align: center; font-weight: normal;">单位负责人审核</td>
          <td style="border: 1px solid #000; padding: 8px 12px; font-size: 16px; line-height: 1.5; height: 40px; text-align: left;" colspan="2">{{unitLeaderApproval}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>`
        }
      ],
      editForm: {
        name: '测试字段',
        label: '测试标签',
        type: 'text',
        options: '',
        required: false,
        placeholder: ''
      },
      fieldList: [],
      previewContent: '',
      fieldMetadata: {},
    }
  },
  mounted() {
    this.loadTemplate(this.currentTemplateIndex);
    this.$nextTick(() => {
      this.handleRefresh();
    });
  },
  watch: {
    currentTemplateIndex: {
      immediate: true,
      handler(newVal) {
        this.loadTemplate(newVal);
      }
    },
    formatType: {
      immediate: true,
      handler(val) {
        if (val === 'html') {
          this.loadTemplate(this.currentTemplateIndex);
        } else {
          this.codeContent = '<?xml version="1.0" encoding="UTF-8"?>\n<w:document xmlns:w="http://schemas.openxmlformats.org/wordprocessingml/2006/main">\n    <!-- 这里将显示生成的DOCX代码 -->\n</w:document>'
          this.previewContent = ''
        }
      }
    }
  },
  methods: {
    loadTemplate(index) {
      if (this.templates && this.templates[index]) {
        this.currentTemplateIndex = index;
        this.codeContent = this.templates[index].content;
      }
    },
    nextTemplate() {
      const nextIndex = (this.currentTemplateIndex + 1) % this.templates.length;
      this.loadTemplate(nextIndex);
    },
    prevTemplate() {
      const prevIndex = (this.currentTemplateIndex - 1 + this.templates.length) % this.templates.length;
      this.loadTemplate(prevIndex);
    },
    handleRefresh() {
      let processedContent = this.codeContent;
      
      const variableRegex = /\{\{([^}]+)\}\}/g;
      const matches = this.codeContent.matchAll(variableRegex);
      const variables = new Set();
      
      for (const match of matches) {
        variables.add(match[1]);
      }
      
      this.updateFieldMetadata(Array.from(variables));
      
      processedContent = processedContent.replace(/\{\{[^}]+\}\}/g, '');
      
      this.previewContent = processedContent;
    },
    handleUpload() {
      // 实现文件上传的逻辑
    },
    handleEditField(field) {
      this.editForm = { ...field };
      this.showEditDrawer = true;
      
      console.log('正在编辑字段:', field.name);
    },
    handleSaveField() {
      const { name } = this.editForm;
      
      if (this.fieldMetadata[name]) {
        this.fieldMetadata[name] = { ...this.editForm };
      }
      
      this.generateFieldList();
      
      this.showEditDrawer = false;
    },
    getTypeDisplay(type) {
      const typeMap = {
        'text': '文本',
        'number': '数字',
        'date': '日期',
        'select': '下拉选择',
        'checkbox': '复选框',
        'radio': '单选框'
      }
      return typeMap[type] || type
    },
    handleCancel() {
      this.$router.back();
    },
    handleSave() {
      this.$message.success('保存成功');
      this.$router.push('/business-config/pay-form');
    },
    updateFieldMetadata(variables) {
      const updatedMetadata = {};
      
      variables.forEach(varName => {
        if (this.fieldMetadata[varName]) {
          updatedMetadata[varName] = this.fieldMetadata[varName];
        } else {
          updatedMetadata[varName] = {
            name: varName,
            label: this.formatVariableName(varName),
            type: 'text',
            options: '',
            required: false,
            placeholder: `请输入${this.formatVariableName(varName)}`
          };
        }
      });
      
      this.fieldMetadata = updatedMetadata;
      
      this.generateFieldList();
      
      console.log('字段元数据已更新:', this.fieldMetadata);
    },
    generateFieldList() {
      this.fieldList = Object.values(this.fieldMetadata);
    },
    formatVariableName(name) {
      return name
        .replace(/([A-Z])/g, ' $1')
        .replace(/^./, str => str.toUpperCase())
        .trim();
    },
    showDrawerOnly() {
      this.showEditDrawer = true;
      console.log('尝试只打开抽屉');
    }
  }
}
</script>

<style lang="scss" scoped>
.content-wrapper {
  display: flex;
  height: calc(100vh - 180px);
  margin: 0 -20px;
  padding: 0 20px;
  margin-bottom: 60px;
}

.left-panel {
  flex: 0 0 66.666667%;
  max-width: 66.666667%;
  padding-right: 20px;
  display: flex;
  flex-direction: column;
}

.right-panel {
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
  border-left: 1px solid #dee2e6;
  padding-left: 20px;
}

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

  .panel-title {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
  }

  .action-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
  }
}

.preview-container,
.code-preview-container {
  height: 300px;
  border: 1px solid #dee2e6;
  padding: 20px;
  overflow-y: auto;
  margin-bottom: 20px;
}

.code-editor {
  font-family: monospace;
  font-size: 14px;
  line-height: 1.5;
  background-color: #f8f9fa;
}

.field-config-container {
  flex: 1;
  border: 1px solid #dee2e6;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.field-list {
  flex: 1;
  overflow-y: auto;
}

.field-item {
  padding: 10px 0;
  cursor: pointer;
  border-bottom: 1px solid #dee2e6;

  &:hover {
    background-color: #f8f9fa;
  }

  &:last-child {
    border-bottom: none;
  }

  .text-muted {
    color: #6c757d;
  }
  
  .field-name,
  .field-label {
    display: block;
    word-break: break-all;
    word-wrap: break-word;
    white-space: normal;
    line-height: 1.4;
    font-size: 13px;
  }
}

.w-100 {
  width: 100%;
}

.footer-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 16px 20px;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
  z-index: 100;
  border-top: 1px solid #eee;
}

.footer-content {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;

  .footer-button {
    min-width: 120px;
    height: 40px;
    font-size: 14px;
    padding: 0 30px;
    border-radius: 4px;
    font-weight: 500;
    letter-spacing: 2px;
    
    &:hover {
      transform: translateY(-1px);
      transition: all 0.2s;
    }

    &:active {
      transform: translateY(1px);
    }
  }
}

.drawer-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  background: #fff;
  border-top: 1px solid #e8e8e8;
  
  .footer-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
  }
}

.form-input {
  width: 100%;
  
  :deep(.el-input__inner),
  :deep(.el-textarea__inner) {
    white-space: normal;
    word-wrap: break-word;
    word-break: break-all;
  }
  
  :deep(.el-select) {
    width: 100%;
  }
}

.el-form-item {
  margin-bottom: 22px;
  
  :deep(.el-form-item__label) {
    line-height: 1.5;
  }
}
</style>



