<template>
  <div ref="contractList" style="padding: 0 20px;">
    <lx-header icon="md-apps" style="margin-bottom: 10px; border: 0px; margin-top: 15px" text="合同分类配置">
      <div slot="content" />
      <slot>
        <!-- 搜索区域 -->
        <div class="search-wrapper">
          <div class="search-content">
            <div class="selects">
              <div>
                <span style="padding: 0 6px;word-break: keep-all;">合同分类</span>
                <el-select v-model="searchForm.category" placeholder="所有类型" style="width: 140px" @change="handleCategoryChange">
                  <el-option label="所有类型" value="" />
                  <el-option v-for="item in categoryOptions" :key="item.id" :label="item.value" :value="item.id" />
                </el-select>
              </div>

              <div>
                <span style="padding: 0 6px;word-break: keep-all;">事务类</span>
                <el-select v-model="searchForm.affairType" placeholder="请选择事务类" style="width: 140px" @change="handleAffairTypeChange">
                  <el-option v-for="item in affairTypeOptions" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </div>

              <div>
                <span style="padding: 0 6px;word-break: keep-all;">合同类型</span>
                <el-select v-model="searchForm.contractType" placeholder="请选择合同类型" style="width: 140px" @change="handleContractTypeChange">
                  <el-option v-for="item in contractTypeOptions" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </div>

              <div>
                <span style="padding: 0 6px;word-break: keep-all;">采购形式</span>
                <el-select v-model="searchForm.purchaseForm" placeholder="请选择采购形式" style="width: 140px" @change="handlePurchaseFormChange">
                  <el-option v-for="item in purchaseFormOptions" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </div>

              <div class="search-buttons">
                <el-button @click="resetSearch">重置</el-button>
                <el-button type="primary" @click="handleSearch">查询</el-button>
              </div>
            </div>

            <div class="add-button">
              <el-button type="primary" @click="handleCreate">新增</el-button>
            </div>
          </div>
        </div>
      </slot>
    </lx-header>

    <!-- 表格区域 -->
    <div class="table-container">
      <el-table :data="tableData" style="width: 100%" :cell-style="{ textAlign: 'center' }" :header-cell-style="{ textAlign: 'center' }">
        <el-table-column prop="index" label="序号" width="80" />
        <el-table-column prop="category" label="合同分类" />
        <el-table-column prop="affairType" label="事务类型" />
        <el-table-column prop="contractType" label="合同类型" />
        <el-table-column prop="purchaseForm" label="采购形式" width="120" />
        <el-table-column label="表单内容">
          <el-table-column prop="projectName" label="项目名称" width="100">
            <template #default="scope">
              <i v-if="scope.row.projectName === true || scope.row.projectName === 1" class="el-icon-check check-mark" />
              <i v-else class="el-icon-close close-mark" />
            </template>
          </el-table-column>
          <el-table-column prop="projectType" label="项目类型" width="100">
            <template #default="scope">
              <i v-if="scope.row.projectType === true || scope.row.projectType === 1" class="el-icon-check check-mark" />
              <i v-else class="el-icon-close close-mark" />
            </template>
          </el-table-column>
          <el-table-column prop="purchaseWay" label="采购方式" width="120">
            <template #default="scope">
              <i v-if="scope.row.purchaseWay === true || scope.row.purchaseWay === 1" class="el-icon-check check-mark" />
              <i v-else class="el-icon-close close-mark" />
            </template>
          </el-table-column>
          <el-table-column prop="budgetPrice" label="预算价" width="100">
            <template #default="scope">
              <i v-if="scope.row.budgetPrice === true || scope.row.budgetPrice === 1" class="el-icon-check check-mark" />
              <i v-else class="el-icon-close close-mark" />
            </template>
          </el-table-column>
          <el-table-column prop="fundChannel" label="资金渠道" width="100">
            <template #default="scope">
              <i v-if="scope.row.fundChannel === true || scope.row.fundChannel === 1" class="el-icon-check check-mark" />
              <i v-else class="el-icon-close close-mark" />
            </template>
          </el-table-column>
          <el-table-column prop="budgetPlan" label="关联预算计划" width="120">
            <template #default="scope">
              <i v-if="scope.row.budgetPlan === true || scope.row.budgetPlan === 1" class="el-icon-check check-mark" />
              <i v-else class="el-icon-close close-mark" />
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="事项流程">
          <el-table-column prop="request" label="请示" width="100">
            <template #default="scope">
              <i v-if="scope.row.request === true || scope.row.request === 1" class="el-icon-check check-mark" />
              <i v-else class="el-icon-close close-mark" />
            </template>
          </el-table-column>
          <el-table-column prop="purchaseApproval" label="采购业务审批表" width="120">
            <template #default="scope">
              <i v-if="scope.row.purchaseApproval === true || scope.row.purchaseApproval === 1" class="el-icon-check check-mark" />
              <i v-else class="el-icon-close close-mark" />
            </template>
          </el-table-column>
          <el-table-column prop="tenderReview" label="招标文件审查流程" width="120">
            <template #default="scope">
              <i v-if="scope.row.tenderReview === true || scope.row.tenderReview === 1" class="el-icon-check check-mark" />
              <i v-else class="el-icon-close close-mark" />
            </template>
          </el-table-column>
          <el-table-column prop="contractSign" label="合同会签流程" width="120">
            <template #default="scope">
              <i v-if="scope.row.contractSign === true || scope.row.contractSign === 1" class="el-icon-check check-mark" />
              <i v-else class="el-icon-close close-mark" />
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="支付表格">
          <el-table-column prop="prePaymentForm" label="事前审批表格" width="120">
            <template #default="scope">
              <span>{{ scope.row.prePaymentForm || '-' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="postPaymentForm" label="事后支付表格" width="120">
            <template #default="scope">
              <span>{{ scope.row.postPaymentForm || '-' }}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="合同配置">
          <el-table-column prop="is_simple" label="简易流程" width="100">
            <template #default="scope">
              <div>
                <el-tag size="small" :type="scope.row.is_simple_default === 1 ? 'success' : 'info'">
                  {{ scope.row.is_simple_default === 1 ? '是' : '否' }}
                </el-tag>
                <el-tag v-if="scope.row.edit_is_simple === 1" size="small" type="warning" style="margin-left: 4px">
                  可编辑
                </el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="has_charge" label="河道处收费" width="100">
            <template #default="scope">
              <div>
                <el-tag size="small" :type="scope.row.has_charge_default === 1 ? 'success' : 'info'">
                  {{ scope.row.has_charge_default === 1 ? '是' : '否' }}
                </el-tag>
                <el-tag v-if="scope.row.edit_has_charge === 1" size="small" type="warning" style="margin-left: 4px">
                  可编辑
                </el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="isBudget" label="预算内项目" width="100">
            <template #default="scope">
              <div>
                <el-tag size="small" :type="scope.row.is_plan_default === 1 ? 'success' : 'info'">
                  {{ scope.row.is_plan_default === 1 ? '是' : '否' }}
                </el-tag>
                <el-tag v-if="scope.row.edit_is_plan === 1" size="small" type="warning" style="margin-left: 4px">
                  可编辑
                </el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="is_substitute" label="代建项目" width="100">
            <template #default="scope">
              <div>
                <el-tag size="small" :type="scope.row.is_substitute_default === 1 ? 'success' : 'info'">
                  {{ scope.row.is_substitute_default === 1 ? '是' : '否' }}
                </el-tag>
                <el-tag v-if="scope.row.edit_is_substitute === 1" size="small" type="warning" style="margin-left: 4px">
                  可编辑
                </el-tag>
              </div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="预付款配置" min-width="220">
          <template #default="scope">
            <div style="font-size: 12px; line-height: 1.6;">
              <div>
                申请金额:
                <span v-if="scope.row.show_apply_money == 1" style="color: #67C23A;">显示</span>
                <span v-else style="color: #F56C6C;">隐藏</span>
                /
                <span v-if="scope.row.required_apply_money == 1" style="color: #67C23A;">必填</span>
                <span v-else style="color: #F56C6C;">非必填</span>
                <span v-if="scope.row.default_apply_money !== undefined && scope.row.default_apply_money !== ''" style="margin-left: 8px; color: #409EFF;">
                  默认值: {{ scope.row.default_apply_money }}
                </span>
              </div>
              <div>
                本期扣款:
                <span v-if="scope.row.show_discount_money == 1" style="color: #67C23A;">显示</span>
                <span v-else style="color: #F56C6C;">隐藏</span>
                /
                <span v-if="scope.row.required_discount_money == 1" style="color: #67C23A;">必填</span>
                <span v-else style="color: #F56C6C;">非必填</span>
                <span v-if="scope.row.default_discount_money !== undefined && scope.row.default_discount_money !== ''" style="margin-left: 8px; color: #409EFF;">
                  默认值: {{ scope.row.default_discount_money }}
                </span>
              </div>
              <div>
                审计金额:
                <span v-if="scope.row.show_audit_money == 1" style="color: #67C23A;">显示</span>
                <span v-else style="color: #F56C6C;">隐藏</span>
                /
                <span v-if="scope.row.required_audit_money == 1" style="color: #67C23A;">必填</span>
                <span v-else style="color: #F56C6C;">非必填</span>
                <span v-if="scope.row.default_audit_money !== undefined && scope.row.default_audit_money !== ''" style="margin-left: 8px; color: #409EFF;">
                  默认值: {{ scope.row.default_audit_money }}
                </span>
              </div>
              <div>
                实付日期:
                <span v-if="scope.row.show_act_date == 1" style="color: #67C23A;">显示</span>
                <span v-else style="color: #F56C6C;">隐藏</span>
                /
                <span v-if="scope.row.required_act_date == 1" style="color: #67C23A;">必填</span>
                <span v-else style="color: #F56C6C;">非必填</span>
              </div>
              <div>
                款项类型:
                <span v-if="scope.row.show_type == 1" style="color: #67C23A;">显示</span>
                <span v-else style="color: #F56C6C;">隐藏</span>
                /
                <span v-if="scope.row.required_type == 1" style="color: #67C23A;">必填</span>
                <span v-else style="color: #F56C6C;">非必填</span>
                <span v-if="scope.row.default_type" style="margin-left: 8px; color: #409EFF;">默认: {{ scope.row.default_type }}</span>
              </div>
              <div>
                是否最后一笔:
                <span v-if="scope.row.show_is_end == 1" style="color: #67C23A;">显示</span>
                <span v-else style="color: #F56C6C;">隐藏</span>
                /
                <span v-if="scope.row.required_is_end == 1" style="color: #67C23A;">必填</span>
                <span v-else style="color: #F56C6C;">非必填</span>
                <span v-if="scope.row.default_is_end !== undefined && scope.row.default_is_end !== ''" style="margin-left: 8px; color: #409EFF;">
                  默认值:
                  {{
                    scope.row.default_is_end == 1 || scope.row.default_is_end === '1'
                      ? '是'
                      : (scope.row.default_is_end == 0 || scope.row.default_is_end === '0'
                        ? '否'
                        : scope.row.default_is_end)
                  }}
                </span>
              </div>
              <div>
                备注:
                <span v-if="scope.row.show_remark == 1" style="color: #67C23A;">显示</span>
                <span v-else style="color: #F56C6C;">隐藏</span>
                /
                <span v-if="scope.row.required_remark == 1" style="color: #67C23A;">必填</span>
                <span v-else style="color: #F56C6C;">非必填</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :current-page="currentPage"
          @current-change="handlePageChange"
        />
      </div>
    </div>

    <!-- 配置表单抽屉 -->
    <el-drawer
      :visible.sync="dialogVisible"
      :title="dialogTitle"
      size="500px"
      :destroy-on-close="true"
      direction="rtl"
      custom-class="config-drawer"
    >
      <div class="drawer-container">
        <div class="drawer-content">
          <div class="scroll-container">
            <el-form ref="formRef" :model="form" :rules="rules" label-width="120px" class="config-form">
              <!-- 合同分类 -->
              <el-form-item label="合同分类" prop="category" class="form-section">
                <el-select
                  v-model="form.category"
                  placeholder="请选择合同分类"
                  class="form-input"
                  @change="handleFormCategoryChange"
                >
                  <el-option v-for="item in categoryOptions" :key="item.id" :label="item.value" :value="item.id" />
                </el-select>
              </el-form-item>

              <!-- 事务类 - 在编辑模式下，如果有值就显示 -->
              <el-form-item v-if="affairTypeOptions.length > 0 || (dialogTitle === '编辑配置' && form.affairType)" label="事务类" prop="affairType" class="form-section">
                <el-select
                  v-model="form.affairType"
                  placeholder="请选择事务类"
                  class="form-input"
                  @change="handleFormAffairTypeChange"
                >
                  <el-option v-for="item in affairTypeOptions" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>

              <!-- 合同类型 - 在编辑模式下，如果有值就显示 -->
              <el-form-item v-if="contractTypeOptions.length > 0 || (dialogTitle === '编辑配置' && form.contractType)" label="合同类型" prop="contractType" class="form-section">
                <el-select
                  v-model="form.contractType"
                  placeholder="请选择合同类型"
                  class="form-input"
                  @change="handleFormContractTypeChange"
                >
                  <el-option v-for="item in contractTypeOptions" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>

              <!-- 采购形式 - 在编辑模式下，如果有值就显示 -->
              <el-form-item v-if="purchaseFormOptions.length > 0 || (dialogTitle === '编辑配置' && form.purchaseForm)" label="采购形式" prop="purchaseForm" class="form-section">
                <el-select
                  v-model="form.purchaseForm"
                  placeholder="请选择采购形式"
                  class="form-input"
                  @change="handleFormPurchaseFormChange"
                >
                  <el-option v-for="item in purchaseFormOptions" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>

              <!-- 采购方式 -->
              <div class="form-section">
                <div class="section-title">采购方式</div>
                <div class="checkbox-group">
                  <el-checkbox v-model="form.purchaseWay">采购方式</el-checkbox>
                </div>
              </div>

              <!-- 表单内容 -->
              <div class="form-section">
                <div class="section-title">表单内容</div>
                <div class="checkbox-group">
                  <el-checkbox v-model="form.projectName">项目名称</el-checkbox>
                  <el-checkbox v-model="form.projectType">项目类型</el-checkbox>
                  <el-checkbox v-model="form.budgetPrice">预算价</el-checkbox>
                </div>

                <div class="checkbox-group">
                  <el-checkbox v-model="form.fundChannel">资金渠道</el-checkbox>
                  <el-checkbox v-model="form.budgetPlan">关联预算计划</el-checkbox>
                </div>
              </div>

              <!-- 事项流程 -->
              <div class="form-section">
                <div class="section-title">事项流程</div>
                <div class="checkbox-group">
                  <el-checkbox v-model="form.request">请示</el-checkbox>
                  <el-checkbox v-model="form.purchaseApproval">采购业务审批表</el-checkbox>
                  <el-checkbox v-model="form.tenderReview">招标文件审查流程</el-checkbox>
                  <el-checkbox v-model="form.contractSign">合同会签流程</el-checkbox>
                </div>
              </div>

              <!-- 支付表格 -->
              <el-form-item label="事前审批表格" prop="prePaymentForm" class="form-section">
                <el-select v-model="form.prePaymentForm" placeholder="请选择事前审批表格" class="form-input" clearable>
                  <el-option
                    v-for="item in paymentFormOptions"
                    :key="item.id"
                    :label="item.label"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>

              <el-form-item label="事后支付表格" prop="postPaymentForm" class="form-section">
                <el-select v-model="form.postPaymentForm" placeholder="请选择事后支付表格" class="form-input" clearable>
                  <el-option
                    v-for="item in paymentFormOptions"
                    :key="item.id"
                    :label="item.label"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>

              <!-- 合同配置选项 -->
              <div class="form-section">
                <div class="section-title">合同配置</div>
                <div class="process-control-grid">
                  <div class="control-item">
                    <div class="control-label">
                      是否为简易流程
                      <el-switch
                        v-model="form.is_simple_editable"
                        active-text="可编辑"
                        inactive-text="不可编辑"
                        style="margin-left: 10px"
                      />
                    </div>
                    <div class="control-content">
                      <el-radio-group v-model="form.is_simple">
                        <el-radio :label="0">否</el-radio>
                        <el-radio :label="1">是</el-radio>
                      </el-radio-group>
                      <div class="helper-text">(水电煤、报刊订阅、网络通讯、车辆使用等费用付款)</div>
                    </div>
                  </div>

                  <div class="control-item">
                    <div class="control-label">
                      是否为河道处收费类项目
                      <el-switch
                        v-model="form.has_charge_editable"
                        active-text="可编辑"
                        inactive-text="不可编辑"
                        style="margin-left: 10px"
                      />
                    </div>
                    <div class="control-content">
                      <el-radio-group v-model="form.has_charge">
                        <el-radio :label="0">否</el-radio>
                        <el-radio :label="1">是</el-radio>
                      </el-radio-group>
                    </div>
                  </div>

                  <div class="control-item">
                    <div class="control-label">
                      是否为预算内确定项目
                      <el-switch
                        v-model="form.isBudget_editable"
                        active-text="可编辑"
                        inactive-text="不可编辑"
                        style="margin-left: 10px"
                      />
                    </div>
                    <div class="control-content">
                      <el-radio-group v-model="form.isBudget">
                        <el-radio :label="0">否</el-radio>
                        <el-radio :label="1">是</el-radio>
                      </el-radio-group>
                    </div>
                  </div>

                  <div class="control-item">
                    <div class="control-label">
                      是否为代建项目
                      <el-switch
                        v-model="form.is_substitute_editable"
                        active-text="可编辑"
                        inactive-text="不可编辑"
                        style="margin-left: 10px"
                      />
                    </div>
                    <div class="control-content">
                      <el-radio-group v-model="form.is_substitute">
                        <el-radio :label="0">否</el-radio>
                        <el-radio :label="1">是</el-radio>
                      </el-radio-group>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 预付款配置单独一栏 -->
              <div class="form-section">
                <div class="section-title">
                  <span style="color: red">*</span>预付款配置
                </div>
                <div class="checkbox-group" style="flex-wrap: wrap;">
                  <div style="min-width: 220px; margin-bottom: 8px;">
                    <el-checkbox v-model="form.payAmountShow" :true-label="1" :false-label="0">申请付款金额-显示</el-checkbox>
                    <el-checkbox v-model="form.payAmountRequired" :true-label="1" :false-label="0"><span style="color: red">※</span>必填</el-checkbox>
                    <el-input v-model="form.payAmountDefault" type="number" placeholder="默认值" style="width: 120px; margin-left: 8px;" />
                  </div>
                  <div style="min-width: 220px; margin-bottom: 8px;">
                    <el-checkbox v-model="form.deductAmountShow" :true-label="1" :false-label="0">本期扣款金额-显示</el-checkbox>
                    <el-checkbox v-model="form.deductAmountRequired" :true-label="1" :false-label="0"><span style="color: red">※</span>必填</el-checkbox>
                    <el-input v-model="form.deductAmountDefault" type="number" placeholder="默认值" style="width: 120px; margin-left: 8px;" />
                  </div>
                  <div style="min-width: 220px; margin-bottom: 8px;">
                    <el-checkbox v-model="form.auditAmountShow" :true-label="1" :false-label="0">审计金额-显示</el-checkbox>
                    <el-checkbox v-model="form.auditAmountRequired" :true-label="1" :false-label="0">必填</el-checkbox>
                    <el-input v-model="form.auditAmountDefault" type="number" placeholder="默认值" style="width: 120px; margin-left: 8px;" />
                  </div>
                  <div style="min-width: 220px; margin-bottom: 8px;">
                    <el-checkbox v-model="form.realPayDateShow">实付日期-显示</el-checkbox>
                    <el-checkbox v-model="form.realPayDateRequired">必填</el-checkbox>
                  </div>
                  <div style="min-width: 320px; margin-bottom: 8px; display: flex; align-items: center;">
                    <el-checkbox v-model="form.itemTypeShow">款项类型-显示</el-checkbox>
                    <el-checkbox v-model="form.itemTypeRequired"><span style="color: red">※</span>必填</el-checkbox>
                    <el-select v-model="form.itemTypeDefault" placeholder="默认值" style="width: 120px; margin-left: 8px;">
                      <el-option v-for="item in itemTypeOptions" :key="item" :label="item" :value="item" />
                    </el-select>
                  </div>
                  <div style="min-width: 220px; margin-bottom: 8px;">
                    <el-checkbox v-model="form.isLastShow" :true-label="1" :false-label="0">是否最后一笔-显示</el-checkbox>
                    <el-checkbox v-model="form.isLastRequired" :true-label="1" :false-label="0"><span style="color: red">※</span>必填</el-checkbox>
                    <el-select v-model="form.isLastDefault" placeholder="默认值" style="width: 120px; margin-left: 8px;">
                      <el-option label="是" :value="1" />
                      <el-option label="否" :value="0" />
                    </el-select>
                  </div>
                  <div style="min-width: 220px; margin-bottom: 8px;">
                    <el-checkbox v-model="form.remarkShow">备注-显示</el-checkbox>
                    <el-checkbox v-model="form.remarkRequired">必填</el-checkbox>
                  </div>
                </div>
              </div>
            </el-form>
          </div>
        </div>
        <div class="drawer-footer">
          <div class="footer-buttons">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleSubmit">保 存</el-button>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { getContractCategoryTemplateBaseConfig, saveContractCategoryTemplate, getContractCategoryTemplate, deleteContractCategoryTemplate, getContractFormList } from '@/api/businessConfig/businessConfig'

export default {
  name: 'ContractConfig',
  data() {
    return {
      categoryOptions: [], // 合同分类选项
      affairTypeOptions: [], // 事务类选项
      contractTypeOptions: [], // 合同类型选项
      purchaseFormOptions: [], // 采购形式选项
      purchaseMethodOptions: [], // 采购方式选项
      purchaseMethodsMap: {}, // 采购方式映射
      paymentFormOptions: [], // 支付表格选项
      searchForm: {
        category: '',
        affairType: '',
        contractType: '',
        purchaseForm: '',
        purchaseMethod: ''
      },
      tableData: [],
      total: 0,
      currentPage: 1,
      dialogVisible: false,
      dialogTitle: '新增配置',
      form: {
        category: '',
        affairType: '',
        contractType: '',
        purchaseForm: '',
        purchaseMethod: false,
        purchaseWay: false,
        projectName: false,
        projectType: false,
        budgetPrice: false,
        fundChannel: false,
        budgetPlan: false,
        request: false,
        purchaseApproval: false,
        tenderReview: false,
        contractSign: false,
        prePaymentForm: '', // 事前支付表格
        postPaymentForm: '', // 事后支付表格
        is_simple: 0,
        has_charge: 0,
        isBudget: 0,
        is_substitute: 0,
        is_simple_editable: true,
        has_charge_editable: true,
        isBudget_editable: true,
        is_substitute_editable: true,
        advancePayment: false,
        payAmountShow: false,
        payAmountRequired: false,
        deductAmountShow: false,
        deductAmountRequired: false,
        auditAmountShow: false,
        auditAmountRequired: false,
        realPayDateShow: false,
        realPayDateRequired: false,
        itemTypeShow: false,
        itemTypeRequired: false,
        isLastShow: false,
        isLastRequired: false,
        remarkShow: false,
        remarkRequired: false,
        itemTypeDefault: '',
        payAmountDefault: '',
        deductAmountDefault: '',
        auditAmountDefault: '',
        isLastDefault: ''
      },
      rules: {
        category: [
          { required: true, message: '请选择合同分类', trigger: 'change' }
        ],
        affairType: [
          { required: true, message: '请选择事务类', trigger: 'change' }
        ],
        contractType: [
          { required: true, message: '请选择合同类型', trigger: 'change' }
        ],
        purchaseForm: [
          { required: true, message: '请选择采购形式', trigger: 'change' }
        ],
        purchaseMethod: [
          { required: true, message: '请选择采购方式', trigger: 'change' }
        ],
        prePaymentForm: [
          // 移除必选验证规则
        ],
        postPaymentForm: [
          // 移除必选验证规则
        ]
      },
      originalPrePaymentForm: '',
      originalPostPaymentForm: '',
      itemTypeOptions: ['预付款', '进度款', '结算款', '质保金']
    }
  },
  created() {
    this.initData()
  },
  methods: {
    // 初始化数据
    async initData() {
      try {
        // 获取列表数据
        await this.getTableData()
        // 获取配置数据
        await this.getCategoryOptions()
        // 不再这里获取支付表格选项
      } catch (error) {
        console.error('初始化数据失败:', error)
        this.$message.error('初始化数据失败')
      }
    },
    // 获取列表数据
    async getTableData() {
      try {
        // 构建查询参数
        const params = {
          page: this.currentPage,
          category: this.searchForm.category || '',
          work_type: this.searchForm.affairType || '',
          contract_type: this.searchForm.contractType || '',
          purchase_form: this.searchForm.purchaseForm || ''
        }

        // 调用获取列表接口
        const res = await getContractCategoryTemplate(params)
        if (res.errcode !== undefined) {
          this.$message.error(res.errmsg || '获取列表数据失败')
          return
        }

        // 处理返回数据
        if (res.data && Array.isArray(res.data)) {
          this.tableData = res.data.map((item, index) => ({
            // 原有自定义字段
            index: index + 1,
            id: item.id,
            category_id: item.category,
            work_type_id: item.work_type,
            contract_type_id: item.contract_type,
            purchase_form_id: item.purchase_form,
            affairType: item.work_type_detail?.value || '-',
            contractType: item.contract_type_detail?.value || '-',
            purchaseForm: item.purchase_form_detail?.value || '-',
            purchaseWay: item.purchase_way || false,
            purchaseMethod: item.purchase_method,
            projectName: item.project_name || false,
            projectType: item.project_type || false,
            budgetPrice: item.budget_price || false,
            fundChannel: item.fund_channel || false,
            budgetPlan: item.budget_plan || false,
            request: item.flow_req || false,
            purchaseApproval: item.flow_purchase || false,
            tenderReview: item.flow_invite || false,
            contractSign: item.flow_join || false,
            prePaymentForm: item.before_contract_template?.name || '-',
            postPaymentForm: item.contract_template?.name || '-',
            before_contract_template_id: item.before_contract_template_id,
            contract_template_id: item.contract_template_id,
            is_simple_default: item.is_simple_default || 0,
            has_charge_default: item.has_charge_default || 0,
            is_plan_default: item.is_plan_default || 0,
            is_substitute_default: item.is_substitute_default || 0,
            edit_is_simple: item.edit_is_simple || 0,
            edit_has_charge: item.edit_has_charge || 0,
            edit_is_plan: item.edit_is_plan || 0,
            edit_is_substitute: item.edit_is_substitute || 0,
            // 合并接口所有字段
            ...item,
            // 最后强制category为自定义值，确保第一列合同分类不被覆盖
            category: item.category_detail?.value || '-'
          }))
        } else {
          this.tableData = []
        }

        this.total = res.total || 0
      } catch (error) {
        console.error('获取列表数据失败:', error)
        this.$message.error('获取列表数据失败')
      }
    },
    // 根据ID查找分类名称
    findCategoryName(categoryId) {
      const category = this.categoryOptions.find(item => item.id === categoryId)
      return category ? category.name : ''
    },
    // 根据ID查找事务类名称
    findAffairTypeName(categoryId, affairTypeId) {
      const category = this.categoryOptions.find(item => item.id === categoryId)
      if (category && category.children) {
        const affairType = category.children.find(item => item.id === affairTypeId)
        return affairType ? affairType.name : ''
      }
      return ''
    },
    // 根据ID查找合同类型名称
    findContractTypeName(categoryId, affairTypeId, contractTypeId) {
      const category = this.categoryOptions.find(item => item.id === categoryId)
      if (category && category.children) {
        const affairType = category.children.find(item => item.id === affairTypeId)
        if (affairType && affairType.children) {
          const contractType = affairType.children.find(item => item.id === contractTypeId)
          return contractType ? contractType.name : ''
        }
      }
      return ''
    },
    // 根据ID查找采购形式名称
    findPurchaseFormName(categoryId, affairTypeId, contractTypeId, purchaseFormId) {
      const category = this.categoryOptions.find(item => item.id === categoryId)
      if (category && category.children) {
        const affairType = category.children.find(item => item.id === affairTypeId)
        if (affairType && affairType.children) {
          const contractType = affairType.children.find(item => item.id === contractTypeId)
          if (contractType && contractType.children) {
            const purchaseForm = contractType.children.find(item => item.id === purchaseFormId)
            return purchaseForm ? purchaseForm.name : ''
          }
        }
      }
      return ''
    },
    // 获取分类选项
    async getCategoryOptions() {
      try {
        const res = await getContractCategoryTemplateBaseConfig()
        if (res.errcode !== undefined) {
          this.$message.error(res.errmsg || '获取分类配置失败')
          return
        }
        // 保存采购方式映射
        this.purchaseMethodsMap = res.purchase_methods || {}
        // 设置分类选项 - 从第二级开始（合同类、报销类、其他支出类）
        this.categoryOptions = res.map?.[0]?.children || []
        // 初始化其他选项
        this.updateOptions()
      } catch (error) {
        console.error('获取分类配置失败:', error)
        this.$message.error('获取分类配置失败')
      }
    },
    // 更新选项
    updateOptions() {
      // 清空其他选项
      this.affairTypeOptions = []
      this.contractTypeOptions = []
      this.purchaseFormOptions = []
      this.purchaseMethodOptions = []

      // 根据选中的值更新选项
      const currentCategory = this.dialogVisible ? this.form.category : this.searchForm.category
      const currentAffairType = this.dialogVisible ? this.form.affairType : this.searchForm.affairType
      const currentContractType = this.dialogVisible ? this.form.contractType : this.searchForm.contractType
      const currentPurchaseForm = this.dialogVisible ? this.form.purchaseForm : this.searchForm.purchaseForm

      // 合同分类 -> 事务类
      if (currentCategory) {
        const category = this.categoryOptions.find(item => item.id === currentCategory)
        if (category && category.children) {
          this.affairTypeOptions = category.children.map(item => ({
            id: item.id,
            name: item.value
          }))
        }
      }

      // 事务类 -> 合同类型
      if (currentAffairType) {
        const category = this.categoryOptions.find(item => item.id === currentCategory)
        if (category && category.children) {
          const selectedAffairType = category.children.find(item => item.id === currentAffairType)
          if (selectedAffairType && selectedAffairType.children) {
            this.contractTypeOptions = selectedAffairType.children.map(item => ({
              id: item.id,
              name: item.value
            }))
          }
        }
      }

      // 合同类型 -> 采购形式
      if (currentContractType) {
        const category = this.categoryOptions.find(item => item.id === currentCategory)
        if (category && category.children) {
          const selectedAffairType = category.children.find(item => item.id === currentAffairType)
          if (selectedAffairType && selectedAffairType.children) {
            const selectedContractType = selectedAffairType.children.find(item => item.id === currentContractType)
            if (selectedContractType && selectedContractType.children) {
              this.purchaseFormOptions = selectedContractType.children.map(item => ({
                id: item.id,
                name: item.value
              }))
            }
          }
        }
      }

      // 采购形式 -> 采购方式
      if (currentPurchaseForm) {
        const category = this.categoryOptions.find(item => item.id === currentCategory)
        if (category && category.children) {
          const selectedAffairType = category.children.find(item => item.id === currentAffairType)
          if (selectedAffairType && selectedAffairType.children) {
            const selectedContractType = selectedAffairType.children.find(item => item.id === currentContractType)
            if (selectedContractType && selectedContractType.children) {
              const selectedPurchaseForm = selectedContractType.children.find(item => item.id === currentPurchaseForm)
              if (selectedPurchaseForm && selectedPurchaseForm.children) {
                this.purchaseMethodOptions = selectedPurchaseForm.children.map(item => ({
                  id: item.id,
                  name: item.value
                }))
              }
            }
          }
        }
      }
    },
    // 获取采购方式名称
    getPurchaseMethodName(id) {
      return this.purchaseMethodsMap[id] || ''
    },
    // 监听选择变化
    handleCategoryChange() {
      this.searchForm.affairType = ''
      this.searchForm.contractType = ''
      this.searchForm.purchaseForm = ''
      this.searchForm.purchaseMethod = ''
      this.updateOptions()
    },
    handleAffairTypeChange() {
      this.searchForm.contractType = ''
      this.searchForm.purchaseForm = ''
      this.searchForm.purchaseMethod = ''
      this.updateOptions()
    },
    handleContractTypeChange() {
      this.searchForm.purchaseForm = ''
      this.searchForm.purchaseMethod = ''
      this.updateOptions()
    },
    handlePurchaseFormChange() {
      this.form.purchaseMethod = ''
      this.updateOptions()
    },
    // 表单选项变化处理
    handleFormCategoryChange() {
      this.form.affairType = ''
      this.form.contractType = ''
      this.form.purchaseForm = ''
      this.form.purchaseMethod = ''
      this.updateOptions()
    },
    handleFormAffairTypeChange() {
      this.form.contractType = ''
      this.form.purchaseForm = ''
      this.form.purchaseMethod = ''
      this.updateOptions()
    },
    handleFormContractTypeChange() {
      this.form.purchaseForm = ''
      this.form.purchaseMethod = ''
      this.updateOptions()
    },
    handleFormPurchaseFormChange() {
      this.form.purchaseMethod = ''
      this.updateOptions()
    },
    async handleCreate() {
      this.dialogTitle = '新增配置'

      // 清空选项
      this.affairTypeOptions = []
      this.contractTypeOptions = []
      this.purchaseFormOptions = []
      this.purchaseMethodOptions = []

      // 获取支付表格选项
      try {
        await this.getPaymentFormOptions()
      } catch (error) {
        console.error('获取支付表格选项失败:', error)
        this.$message.error('获取支付表格选项失败')
        return
      }

      // 重置表单数据
      this.form = {
        category: '',
        affairType: '',
        contractType: '',
        purchaseForm: '',
        purchaseMethod: false,
        purchaseWay: false,
        projectName: false,
        projectType: false,
        budgetPrice: false,
        fundChannel: false,
        budgetPlan: false,
        request: false,
        purchaseApproval: false,
        tenderReview: false,
        contractSign: false,
        prePaymentForm: '',
        postPaymentForm: '',
        is_simple: 0,
        has_charge: 0,
        isBudget: 0,
        is_substitute: 0,
        is_simple_editable: true,
        has_charge_editable: true,
        isBudget_editable: true,
        is_substitute_editable: true,
        payAmountShow: false,
        payAmountRequired: false,
        deductAmountShow: false,
        deductAmountRequired: false,
        auditAmountShow: false,
        auditAmountRequired: false,
        realPayDateShow: false,
        realPayDateRequired: false,
        itemTypeShow: false,
        itemTypeRequired: false,
        isLastShow: false,
        isLastRequired: false,
        remarkShow: false,
        remarkRequired: false,
        itemTypeDefault: '',
        payAmountDefault: '',
        deductAmountDefault: '',
        auditAmountDefault: '',
        isLastDefault: ''
      }

      // 使用搜索区域的解析逻辑
      this.updateOptions()

      this.dialogVisible = true
    },
    async handleEdit(row) {
      this.dialogTitle = '编辑配置'

      // 清空选项
      this.affairTypeOptions = []
      this.contractTypeOptions = []
      this.purchaseFormOptions = []

      try {
        // 先获取支付表格选项
        await this.getPaymentFormOptions()

        console.log('编辑行数据:', row) // 打印行数据，查看字段名

        // 设置表单数据
        this.form = {
          id: row.id, // 记录ID，用于更新
          category: row.category_id, // 使用原始ID
          affairType: row.work_type_id, // 使用原始ID
          contractType: row.contract_type_id, // 使用原始ID
          purchaseForm: row.purchase_form_id, // 使用原始ID
          purchaseWay: row.purchaseWay === true || row.purchaseWay === 1,
          purchaseMethod: row.purchaseMethod === true || row.purchaseMethod === 1,
          projectName: row.projectName === true || row.projectName === 1,
          projectType: row.projectType === true || row.projectType === 1,
          budgetPrice: row.budgetPrice === true || row.budgetPrice === 1,
          fundChannel: row.fundChannel === true || row.fundChannel === 1,
          budgetPlan: row.budgetPlan === true || row.budgetPlan === 1,
          request: row.request === true || row.request === 1,
          purchaseApproval: row.purchaseApproval === true || row.purchaseApproval === 1,
          tenderReview: row.tenderReview === true || row.tenderReview === 1,
          contractSign: row.contractSign === true || row.contractSign === 1,
          prePaymentForm: row.before_contract_template_id || '',
          postPaymentForm: row.contract_template_id || '',
          // 合同配置参数
          is_simple_editable: row.edit_is_simple === 1,
          has_charge_editable: row.edit_has_charge === 1,
          isBudget_editable: row.edit_is_plan === 1,
          is_substitute_editable: row.edit_is_substitute === 1,
          is_simple: row.is_simple_default,
          has_charge: row.has_charge_default,
          isBudget: row.is_plan_default,
          is_substitute: row.is_substitute_default,
          payAmountShow: row.show_apply_money === 1,
          payAmountRequired: row.required_apply_money === 1,
          deductAmountShow: row.show_discount_money === 1,
          deductAmountRequired: row.required_discount_money === 1,
          auditAmountShow: row.show_audit_money === 1,
          auditAmountRequired: row.required_audit_money === 1,
          realPayDateShow: row.show_act_date === 1,
          realPayDateRequired: row.required_act_date === 1,
          itemTypeShow: row.show_type === 1,
          itemTypeRequired: row.required_type === 1,
          isLastShow: row.show_is_end === 1,
          isLastRequired: row.required_is_end === 1,
          remarkShow: row.show_remark === 1,
          remarkRequired: row.required_remark === 1,
          payAmountDefault: row.default_apply_money ?? '',
          deductAmountDefault: row.default_discount_money ?? '',
          auditAmountDefault: row.default_audit_money ?? '',
          isLastDefault: row.default_is_end !== undefined && row.default_is_end !== '' ? Number(row.default_is_end) : '',
          itemTypeDefault: row.default_type !== undefined && row.default_type !== null ? String(row.default_type) : ''
        }

        // 保存原始支付表格值
        this.originalPrePaymentForm = row.before_contract_template_id
        this.originalPostPaymentForm = row.contract_template_id

        // 加载下拉框选项
        this.loadEditOptions(row)

        // 确保表单数据已经设置
        this.$nextTick(() => {
          console.log('表单数据:', this.form)
          console.log('支付表格选项:', this.paymentFormOptions)

          // 打开抽屉
          this.dialogVisible = true
        })
      } catch (error) {
        console.error('加载数据失败:', error)
        this.$message.error('加载数据失败')
      }
    },

    // 加载编辑时的下拉框选项
    async loadEditOptions(row) {
      try {
        // 首先加载所有分类选项（如果尚未加载）
        if (this.categoryOptions.length === 0) {
          await this.getCategoryOptions()
        }

        // 加载事务类选项
        if (row.category_id) {
          const category = this.categoryOptions.find(item => item.id === row.category_id)
          if (category && category.children) {
            this.affairTypeOptions = category.children.map(item => ({
              id: item.id,
              name: item.value
            }))
          }
        }

        // 加载合同类型选项
        if (row.work_type_id) {
          const category = this.categoryOptions.find(item => item.id === row.category_id)
          if (category && category.children) {
            const affairType = category.children.find(item => item.id === row.work_type_id)
            if (affairType && affairType.children) {
              this.contractTypeOptions = affairType.children.map(item => ({
                id: item.id,
                name: item.value
              }))
            }
          }
        }

        // 加载采购形式选项
        if (row.contract_type_id) {
          const category = this.categoryOptions.find(item => item.id === row.category_id)
          if (category && category.children) {
            const affairType = category.children.find(item => item.id === row.work_type_id)
            if (affairType && affairType.children) {
              const contractType = affairType.children.find(item => item.id === row.contract_type_id)
              if (contractType && contractType.children) {
                this.purchaseFormOptions = contractType.children.map(item => ({
                  id: item.id,
                  name: item.value
                }))
              }
            }
          }
        }

        console.log('下拉框选项加载完成:', {
          affairTypeOptions: this.affairTypeOptions,
          contractTypeOptions: this.contractTypeOptions,
          purchaseFormOptions: this.purchaseFormOptions
        })
      } catch (error) {
        console.error('加载下拉框选项失败:', error)
      }
    },
    handleDelete(row) {
      this.$confirm('确定要删除该配置吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        try {
          // 调用删除接口
          const res = await deleteContractCategoryTemplate(row.id)
          if (res.errcode !== undefined) {
            this.$message.error(res.errmsg || '删除失败')
            return
          }

          this.$message.success('删除成功')
          // 刷新列表数据
          await this.getTableData()
        } catch (error) {
          console.error('删除失败:', error)
          this.$message.error('删除失败')
        }
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    async handleSubmit() {
      this.$refs.formRef.validate(async(valid) => {
        if (valid) {
          try {
            // 准备提交的数据，按照API期望的参数格式
            const submitData = {
              category: this.form.category,
              work_type: this.form.affairType,
              contract_type: this.form.contractType,
              purchase_form: this.form.purchaseForm,
              purchase_way: this.form.purchaseWay,
              purchase_method: this.form.purchaseMethod,
              project_name: this.form.projectName,
              project_type: this.form.projectType,
              budget_price: this.form.budgetPrice,
              fund_channel: this.form.fundChannel,
              budget_plan: this.form.budgetPlan,
              flow_req: this.form.request,
              flow_purchase: this.form.purchaseApproval,
              flow_invite: this.form.tenderReview,
              flow_join: this.form.contractSign,

              // 新增参数
              edit_is_simple: this.form.is_simple_editable ? 1 : 0,
              edit_has_charge: this.form.has_charge_editable ? 1 : 0,
              edit_is_plan: this.form.isBudget_editable ? 1 : 0,
              edit_is_substitute: this.form.is_substitute_editable ? 1 : 0,

              is_simple_default: this.form.is_simple,
              has_charge_default: this.form.has_charge,
              is_plan_default: this.form.isBudget,
              is_substitute_default: this.form.is_substitute,

              show_apply_money: this.form.payAmountShow,
              required_apply_money: this.form.payAmountRequired,
              show_discount_money: this.form.deductAmountShow,
              required_discount_money: this.form.deductAmountRequired,
              show_audit_money: this.form.auditAmountShow,
              required_audit_money: this.form.auditAmountRequired,
              show_act_date: this.form.realPayDateShow,
              required_act_date: this.form.realPayDateRequired,
              show_type: this.form.itemTypeShow,
              required_type: this.form.itemTypeRequired,
              default_type: this.form.itemTypeDefault,
              show_is_end: this.form.isLastShow,
              required_is_end: this.form.isLastRequired,
              show_remark: this.form.remarkShow,
              required_remark: this.form.remarkRequired,
              default_apply_money: this.form.payAmountDefault,
              default_discount_money: this.form.deductAmountDefault,
              default_audit_money: this.form.auditAmountDefault,
              default_is_end: this.form.isLastDefault
            }

            // 如果是编辑模式
            if (this.form.id) {
              // 只添加ID
              submitData.id = this.form.id

              // 如果事前支付表格被清空，设置为空字符串
              if (this.form.prePaymentForm === '') {
                submitData.before_contract_template_id = ''
              } else if (this.form.prePaymentForm && this.form.prePaymentForm !== this.originalPrePaymentForm) {
                submitData.before_contract_template_id = this.form.prePaymentForm
              }

              // 如果事后支付表格有值且与原始值不同，才添加到提交数据中
              if (this.form.postPaymentForm === '') {
                submitData.contract_template_id = ''
              } else if (this.form.postPaymentForm && this.form.postPaymentForm !== this.originalPostPaymentForm) {
                submitData.contract_template_id = this.form.postPaymentForm
              }
            } else {
              // 新增模式下，如果有支付表格值就添加
              submitData.before_contract_template_id = this.form.prePaymentForm || ''
              if (this.form.postPaymentForm) {
                submitData.contract_template_id = this.form.postPaymentForm
              }
            }

            // 调用保存接口
            const res = await saveContractCategoryTemplate(submitData)
            if (res.errcode !== undefined) {
              this.$message.error(res.errmsg || '保存失败')
              return
            }

            this.$message.success('保存成功')
            this.dialogVisible = false
            // 刷新列表数据
            await this.getTableData()
          } catch (error) {
            console.error('保存失败:', error)
            this.$message.error('保存失败')
          }
        }
      })
    },
    handleSearch() {
      this.currentPage = 1
      this.getTableData()
    },
    resetSearch() {
      this.searchForm = {
        category: '',
        affairType: '',
        contractType: '',
        purchaseForm: '',
        purchaseMethod: ''
      }
      // 重置后立即刷新列表
      this.handleSearch()
    },
    handlePageChange(page) {
      this.currentPage = page
      // 分页加载数据
      this.getTableData()
    },
    // 获取支付表格选项
    async getPaymentFormOptions() {
      try {
        // 只请求已启用的支付表格（status=1）
        const res = await getContractFormList({ status: 1 })
        if (res.errcode !== undefined) {
          this.$message.error(res.errmsg || '获取支付表格选项失败')
          return
        }

        // 处理返回数据
        if (res.data && Array.isArray(res.data)) {
          this.paymentFormOptions = res.data.map(item => ({
            id: item.id,
            label: item.name || item.title || `附件${item.id}`
          }))

          console.log('支付表格选项:', this.paymentFormOptions)
        } else {
          this.paymentFormOptions = []
        }
      } catch (error) {
        console.error('获取支付表格选项失败:', error)
        this.$message.error('获取支付表格选项失败')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.search-wrapper {
  margin-bottom: 16px;
  margin-top: 16px;
  background: #fff;
  padding: 16px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  width: 100%;
  box-sizing: border-box;
}

.search-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
}

.selects {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
  min-width: 0;

  & > div {
    display: flex;
    align-items: center;
    white-space: nowrap;
    flex-shrink: 0;
    margin-bottom: 8px;

    span {
      color: #606266;
      font-size: 14px;
      flex-shrink: 0;
      padding: 0 4px;
    }

    :deep(.el-select) {
      width: 140px;
    }
  }

  :deep(.el-input__inner) {
    height: 28px;
    line-height: 28px;
  }
  }

.search-buttons {
  display: flex;
  gap: 8px;
  margin-left: 8px;

  :deep(.el-button) {
    height: 28px;
    padding: 0 12px;
  }
}

.add-button {
  flex-shrink: 0;
  margin-left: 16px;
  margin-bottom: 8px;

  :deep(.el-button) {
    height: 28px;
    padding: 0 12px;
  }
}

.table-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.check-mark {
  color: #67C23A;
  font-weight: bold;
  font-size: 16px;
}

.close-mark {
  color: #F56C6C;
  font-weight: bold;
  font-size: 16px;
}

:deep(.el-table) {
  margin-top: 20px;
}

:deep(.el-button + .el-button) {
  margin-left: 8px;
}

:deep(.el-form-item__content) {
  .el-checkbox {
    margin-right: 20px;
  }

  .el-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
}

.config-drawer {
  :deep(.el-drawer__header) {
    margin-bottom: 0;
    padding: 20px 24px;
    border-bottom: 1px solid #e4e7ed;
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    position: relative;
    z-index: 1;
    height: 64px;
    box-sizing: border-box;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  }

  :deep(.el-drawer__body) {
    height: calc(100% - 64px);
    padding: 0;
    overflow: hidden;
    background-color: #f9fafb;
  }
}

.drawer-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

.drawer-content {
  flex: 1;
  min-height: 0;
  position: relative;
}

.scroll-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  padding: 20px;
  box-sizing: border-box;

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #c0c4cc;
    border-radius: 3px;
  }

  &::-webkit-scrollbar-track {
    background-color: #f5f7fa;
  }
}

.config-form {
  height: auto;
}

.form-section {
  margin-bottom: 28px;
  padding: 20px;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;

  &:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  }

  &:last-child {
    margin-bottom: 0;
  }

  .section-title {
    color: #374151;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e5e7eb;
    position: relative;

    &::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 40px;
      height: 2px;
      background-color: #409eff;
    }
  }

  .sub-section {
    margin-top: 20px;
    margin-bottom: 20px;
    padding-left: 20px;
    border-left: 3px solid #e5e7eb;
    transition: border-color 0.3s ease;

    &:hover {
      border-left-color: #409eff;
    }

    &:last-child {
      margin-bottom: 0;
    }

    .sub-title {
      font-weight: 500;
      font-size: 15px;
      color: #4b5563;
      margin-bottom: 16px;
    }
  }
}

.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 12px;

  &:last-child {
    margin-bottom: 0;
  }

  :deep(.el-checkbox) {
    margin-right: 0;
    margin-bottom: 8px;

    &:last-child {
      margin-bottom: 0;
    }
  }
}

.checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 12px;

  :deep(.el-checkbox) {
    margin-right: 0;
    height: 32px;
    display: flex;
    align-items: center;
  }
}

.form-input {
  width: 100%;

  :deep(.el-input__inner),
  :deep(.el-select__inner) {
    height: 36px;
    line-height: 36px;
    border-radius: 4px;
    border-color: #dee2e6;
  }
}

.drawer-footer {
  flex-shrink: 0;
  height: 72px;
  padding: 16px 24px;
  background: #ffffff;
  border-top: 1px solid #e5e7eb;
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 1;
  box-sizing: border-box;

  .footer-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 12px;

    .el-button {
      min-width: 88px;
      height: 40px;
      font-size: 14px;
      font-weight: 500;
      border-radius: 6px;
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
      }
    }
  }
}

:deep(.el-form-item__label) {
  font-weight: 500;
  color: #495057;
}

:deep(.el-checkbox__label) {
  font-weight: normal;
  color: #606266;
}
</style>

