<template>
  <div class="p-2">
    <!-- 审批按钮组件：内容变更且已提交（变更状态=3）时不显示 -->
    <el-card v-if="showApprovalCard" shadow="never" style="margin-top: 0">
      <approvalButton
        @submitForm="submitForm"
        @approvalVerifyOpen="approvalVerifyOpen"
        @handleApprovalRecord="handleApprovalRecord"
        :buttonLoading="buttonLoading"
        :id="form.contractChangeId"
        :status="form.flowStatus"
        :pageType="routeParams.type"
        :mode="false"
      />
    </el-card>
    <el-card v-if="!showApprovalCard" shadow="never" style="margin-top: 0">
        <el-button style="float: right" @click="goBack">返回</el-button>
    </el-card>

    <el-card shadow="never">
      <template #header>
        <span>{{ isEdit ? '编辑合同变更' : '合同变更申请' }}</span>
      </template>
      <el-form ref="formRef" :model="form" :rules="changeFormRules" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="变更编号" prop="changeCode">
              <el-input v-model="form.changeCode" placeholder="保存后自动生成" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="变更类型" prop="changeType">
              <el-radio-group v-model="form.changeType" :disabled="isFormDisabled">
                <el-radio v-for="dict in contract_change_type" :key="dict.value" :value="dict.value">{{ dict.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="原合同编号">
              <el-input v-model="form.contractCode" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="选择合同" prop="contractId">
              <el-input
                v-model="selectedContractName"
                placeholder="请选择已激活的合同（点击右侧图标选择）"
                readonly
                :disabled="isFormDisabled"
              >
                <template #suffix>
                  <el-icon style="cursor: pointer" @click="openContractSelect"><Search /></el-icon>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="业务方向" prop="businessDirection">
              <el-select
                v-model="form.businessDirection"
                placeholder="请先选择合同，将自动带出原合同业务方向"
                disabled
                style="width: 100%"
              >
                <el-option v-for="dict in business_direction" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="承办人" prop="undertakeBy">
              <el-select v-model="form.undertakeBy" placeholder="请选择承办人" :disabled="isFormDisabled" filterable clearable style="width: 100%">
                <el-option v-for="item in userInfoList" :key="item.userId" :label="item.nickName" :value="item.userId" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="印章法人单位" prop="sealLegalEntity">
              <el-radio-group v-model="form.sealLegalEntity" :disabled="isFormDisabled">
                <el-radio v-for="dict in seal_legal_entity" :key="dict.value" :value="dict.value">{{ dict.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="变更原因" prop="changeReason">
          <el-input
            v-model="form.changeReason"
            type="textarea"
            :rows="3"
            placeholder="请输入变更原因（解除合同时即解除原因）"
            :disabled="isFormDisabled"
          />
        </el-form-item>
        <!-- 内容变更时：下方按合同编辑页样式展示变更后合同信息、付款方式、物料，可编辑可删 -->
        <template v-if="form.changeType === '1' && form.changeInfo">
          <!-- 变更后合同信息（与合同编辑页同结构） -->
          <el-card shadow="never" style="margin-top: 16px">
            <template #header>
              <div style="text-align: left; font-weight: bold; font-size: 18px">变更后合同信息</div>
            </template>
            <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="合同编号" prop="changeInfo.contractCode">
                    <el-input v-model="form.changeInfo.contractCode" placeholder="请输入合同编号" :disabled="isFormDisabled">
                      <template #append>
                        <el-button
                          type="primary"
                          @click="generateChangeContractCode"
                          :disabled="isFormDisabled || isChangeContractCodeGenerated"
                        >
                          生成合同编号
                        </el-button>
                      </template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="合同名称" prop="changeInfo.contractName">
                    <el-input v-model="form.changeInfo.contractName" placeholder="请输入合同名称" :disabled="isFormDisabled" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="合同大类" prop="changeInfo.contractCategory">
                    <el-select v-model="form.changeInfo.contractCategory" placeholder="请选择合同大类" disabled style="width: 100%">
                      <el-option v-for="dict in contract_category" :key="dict.value" :label="dict.label" :value="dict.value" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="form.changeInfo.contractCategory !== '3'">
                  <el-form-item label="关联框架合同" prop="changeInfo.isFrameworkContract">
                    <el-radio-group v-model="form.changeInfo.isFrameworkContract" :disabled="isFormDisabled">
                      <el-radio v-for="dict in is_framework_contract" :key="dict.value" :value="dict.value">{{ dict.label }}</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="form.changeInfo.contractCategory === '3'">
                  <el-form-item label="框架合同有效期" prop="changeInfo.frameworkValidPeriod">
                    <el-date-picker
                      v-model="form.changeInfo.frameworkValidPeriod"
                      type="date"
                      value-format="YYYY-MM-DD HH:mm:ss"
                      placeholder="请选择框架合同有效期"
                      :disabled="isFormDisabled"
                      style="width: 100%"
                      clearable
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="form.changeInfo.contractCategory !== '3' && form.changeInfo.isFrameworkContract === '1'">
                  <el-form-item label="关联框架合同" prop="changeInfo.frameworkContractId">
                    <div class="flex gap-2 items-center" style="width: 100%">
                      <el-input :model-value="changeFrameworkContractDisplay" placeholder="请选择框架合同" readonly :disabled="isFormDisabled" />
                      <el-button type="primary" plain :disabled="isFormDisabled" @click="openChangeFrameworkContractDialog">选择</el-button>
                      <el-button :disabled="isFormDisabled || !form.changeInfo.frameworkContractId" @click="clearChangeFrameworkContract">清空</el-button>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="业务方向" prop="changeInfo.businessDirection">
                    <el-select v-model="form.changeInfo.businessDirection" placeholder="请选择业务方向" :disabled="isFormDisabled" style="width: 100%">
                      <el-option v-for="dict in business_direction" :key="dict.value" :label="dict.label" :value="dict.value" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="合同负责人" prop="changeInfo.contractManagerId">
                    <el-select
                      v-model="form.changeInfo.contractManagerId"
                      placeholder="请选择该合同客户经理或签订人"
                      :disabled="isFormDisabled"
                      filterable
                      style="width: 100%"
                    >
                      <el-option v-for="item in userInfoList" :key="item.userId" :label="item.nickName" :value="item.userId" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="甲方公司" prop="changeInfo.oneCustomerId">
                    <el-select v-model="form.changeInfo.oneCustomerId" placeholder="请选择甲方公司" :disabled="isFormDisabled" filterable style="width: 100%">
                      <el-option v-for="item in customerInfoList" :key="item.customerId" :label="item.customerName" :value="item.customerId" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="乙方公司" prop="changeInfo.twoCustomerId">
                    <el-select v-model="form.changeInfo.twoCustomerId" placeholder="请选择乙方公司" :disabled="isFormDisabled" filterable style="width: 100%">
                      <el-option v-for="item in customerInfoList" :key="item.customerId" :label="item.customerName" :value="item.customerId" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="甲方授权代表" prop="changeInfo.oneRepresent">
                    <el-input v-model="form.changeInfo.oneRepresent" placeholder="请输入甲方法人或其授权代表" :disabled="isFormDisabled" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="乙方授权代表" prop="changeInfo.twoRepresent">
                    <el-input v-model="form.changeInfo.twoRepresent" placeholder="请输入乙方法人或其授权代表" :disabled="isFormDisabled" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="甲方签字日期" prop="changeInfo.oneDate">
                    <el-date-picker
                      clearable
                      v-model="form.changeInfo.oneDate"
                      type="date"
                      value-format="YYYY-MM-DD HH:mm:ss"
                      placeholder="请选择甲方签字日期"
                      :disabled="isFormDisabled"
                      style="width: 100%"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="乙方签字日期" prop="changeInfo.twoDate">
                    <el-date-picker
                      clearable
                      v-model="form.changeInfo.twoDate"
                      type="date"
                      value-format="YYYY-MM-DD HH:mm:ss"
                      placeholder="请选择乙方签字日期"
                      :disabled="isFormDisabled"
                      style="width: 100%"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="合同签订日期" prop="changeInfo.contractDate">
                    <el-date-picker
                      clearable
                      v-model="form.changeInfo.contractDate"
                      type="date"
                      value-format="YYYY-MM-DD HH:mm:ss"
                      placeholder="请选择合同时间"
                      :disabled="isFormDisabled"
                      style="width: 100%"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="合同属地" prop="changeInfo.contractTerritorialFlag">
                    <div style="display: flex; align-items: center; width: 100%; gap: 12px">
                      <el-radio-group v-model="form.changeInfo.contractTerritorialFlag" :disabled="isFormDisabled">
                        <el-radio v-for="dict in contract_territorial_flag" :key="dict.value" :value="dict.value">{{ dict.label }}</el-radio>
                      </el-radio-group>
                      <el-select
                        v-if="form.changeInfo.contractTerritorialFlag === '2'"
                        v-model="form.changeInfo.contractTerritorialCountry"
                        placeholder="请选择国家/地区"
                        :disabled="isFormDisabled"
                        filterable
                        clearable
                        style="flex: 1"
                      >
                        <el-option v-for="dict in country_region" :key="dict.value" :label="dict.label" :value="dict.value" />
                      </el-select>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="结算币种" prop="changeInfo.settlementCurrency">
                    <el-select v-model="form.changeInfo.settlementCurrency" placeholder="请选择结算币种" :disabled="isFormDisabled" clearable style="width: 100%">
                      <el-option v-for="dict in currency_type" :key="dict.value" :label="dict.label" :value="dict.value" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="付款账户" prop="changeInfo.paymentAccountId">
                    <el-select v-model="form.changeInfo.paymentAccountId" placeholder="请选择付款账户" :disabled="isFormDisabled" clearable style="width: 100%">
                      <el-option v-for="item in paymentAccountList" :key="item.paymentAccountId" :label="`${item.accountType || ''} - ${item.accountNumber || ''}`" :value="item.paymentAccountId" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="合同状态" prop="changeInfo.contractStatus">
                    <el-radio-group v-model="form.changeInfo.contractStatus" disabled>
                      <el-radio v-for="dict in contract_status" :key="dict.value" :value="dict.value">{{ dict.label }}</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="合同模板标识" prop="changeInfo.contractTemplateFlag">
                    <el-radio-group v-model="form.changeInfo.contractTemplateFlag" :disabled="isFormDisabled">
                      <el-radio v-for="dict in contract_template_flag" :key="dict.value" :value="dict.value">{{ dict.label }}</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-show="form.changeInfo.contractTemplateFlag !== '1'">
                  <el-form-item label="合同模板" prop="changeInfo.templateId">
                    <div class="flex gap-2 items-center" style="width: 100%">
                      <el-select v-model="form.changeInfo.templateId" placeholder="请选择合同模板" :disabled="isFormDisabled" filterable style="flex: 1">
                        <el-option
                          v-for="item in printTemplateList"
                          :key="item.templateId"
                          :label="item.templateName + '-' + item.version"
                          :value="item.templateId"
                        />
                      </el-select>
                      <el-button
                        link
                        type="primary"
                        icon="Download"
                        :disabled="!form.changeInfo.templateId || !form.contractId"
                        @click="handleContractTemplateDownload"
                        style="font-weight: 600"
                      >
                        合同查看
                      </el-button>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="质保期描述" prop="changeInfo.warrantyPeriodDescription">
                    <el-input
                      v-model="form.changeInfo.warrantyPeriodDescription"
                      placeholder="请完整输入质保期描述（如：验收合格后12个月或发货后18个月等）"
                      :disabled="isFormDisabled"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="交货地点" prop="changeInfo.deliveryLocation">
                    <el-input
                      v-model="form.changeInfo.deliveryLocation"
                      placeholder="请输入交货地点（如：甲方指定仓库/项目现场等）"
                      :disabled="isFormDisabled"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="运输方式" prop="changeInfo.shipMethod">
                    <el-input
                      v-model="form.changeInfo.shipMethod"
                      placeholder="请输入运输方式（如：汽运、空运、海运等）"
                      :disabled="isFormDisabled"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="签订地点" prop="changeInfo.signingPlace">
                    <el-input v-model="form.changeInfo.signingPlace" placeholder="请输入签订地点" :disabled="isFormDisabled" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="发货/交货期" prop="changeInfo.deliveryStart">
                    <el-input
                      v-model="form.changeInfo.deliveryStart"
                      type="textarea"
                      :rows="2"
                      placeholder="请完整描述发货/交货条件（如：合同签订生效后XX日且乙方收到甲方合同约定的XX款）"
                      :disabled="isFormDisabled"
                      style="width: 100%"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="备注" prop="changeInfo.remark">
                    <el-input
                      v-model="form.changeInfo.remark"
                      type="textarea"
                      placeholder="请输入备注（该处备注信息不体现在合同模板）"
                      :disabled="isFormDisabled"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="附件" prop="changeInfo.ossId">
                    <div style="display: flex; width: 100%; gap: 16px; align-items: flex-start">
                      <div style="flex: 1; min-width: 0">
                        <FileUpload
                          v-model="changeInfoOssId"
                          :limit="5"
                          :fileSize="20"
                          :fileType="['doc', 'docx', 'pdf', 'xls', 'xlsx']"
                          :disabled="isFormDisabled"
                          :isShowTip="true"
                        />
                      </div>
                      <div style="width: 230px; display: flex; flex-direction: column; align-items: flex-start; padding-top: 2px">
                        <el-checkbox
                          v-model="form.changeInfo.effectiveCustomerOrderFlag"
                          true-value="1"
                          false-value="0"
                          :disabled="isFormDisabled"
                        >
                          <span style="font-weight: 600">已生效客户订单</span>
                        </el-checkbox>
                        <div style="color: #909399; font-size: 12px; line-height: 1.4; margin-top: 4px">
                          （无需盖章或签字，即刻生效的客户订单）
                        </div>
                      </div>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="合同总价" prop="changeInfo.totalPrice">
                    <el-input v-model="form.changeInfo.totalPrice" placeholder="根据合同物料自动计算" disabled>
                      <template #append>元</template>
                    </el-input>
                    <div style="color: #909399; font-size: 12px; line-height: 1.4; margin-top: 4px">
                      由下方具体物料明细金额自动计算生成
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>
          </el-card>

          <!-- 变更后合同付款方式 -->
          <el-card shadow="never" style="margin-top: 0">
            <template #header>
              <div
                style="
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  flex-wrap: wrap;
                  gap: 8px 16px;
                  width: 100%;
                "
              >
                <div style="text-align: left; font-weight: bold; font-size: 18px">合同付款方式</div>
                <div style="color: #e6a23c; font-size: 13px; line-height: 1.5; text-align: left; flex: 1; min-width: 220px">
                  （请务必填写清楚付款节点及比例、付款账期、开票节点及比例。）
                </div>
              </div>
            </template>
            <div style="margin-bottom: 16px; display: flex; align-items: center; gap: 12px">
              <el-button type="primary" icon="Plus" v-if="!isFormDisabled" @click="handleAddPaymentMethod">新增付款方式</el-button>
              <el-form-item label="付款形式" prop="changeInfo.paymentMethod" style="margin-bottom: 0; width: 360px">
                <el-select
                  v-model="form.changeInfo.paymentMethod"
                  placeholder="请选择付款形式"
                  :disabled="isFormDisabled"
                  clearable
                  style="width: 100%"
                >
                  <el-option v-for="item in paymentMethodOptions" :key="item" :label="item" :value="item" />
                </el-select>
              </el-form-item>
            </div>
            <el-table :data="changePaymentMethodList" v-loading="buttonLoading" border>
              <el-table-column label="序号" align="center" prop="sortOrder" width="80" />
              <el-table-column label="付款条款" align="center" prop="paymentDescription" min-width="120" />
              <el-table-column label="操作" align="center" fixed="right" width="150" v-if="!isFormDisabled">
                <template #default="scope">
                  <el-button link type="primary" icon="Edit" @click="handleEditPaymentMethod(scope.row, scope.$index)">编辑</el-button>
                  <el-button link type="danger" icon="Delete" @click="handleDeletePaymentMethod(scope.$index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-card>

          <!-- 变更后合同物料 -->
          <el-card shadow="never" style="margin-top: 0">
            <template #header>
              <div style="text-align: left; font-weight: bold; font-size: 18px">合同物料</div>
            </template>
            <div style="margin-bottom: 16px">
              <el-button type="primary" icon="Plus" v-if="!isFormDisabled" @click="handleAddMaterial">新增合同物料</el-button>
            </div>
            <el-table :data="changeMaterialList" v-loading="buttonLoading" border>
              <el-table-column label="物料编号" align="center" prop="materialCode" width="120" />
              <el-table-column label="物料名称" align="center" prop="materialName" width="120" />
              <el-table-column label="销售物料名称" align="center" prop="saleMaterialName" width="120" />
              <el-table-column label="产品名称(合同显示)" align="center" prop="productName" min-width="160" />
              <el-table-column label="规格描述" align="center" prop="specificationDescription" min-width="120" />
              <el-table-column label="数量" align="center" prop="amount" width="80">
                <template #default="scope">
                  {{ scope.row.amount ? Number(scope.row.amount).toFixed(2) : '0.00' }}
                </template>
              </el-table-column>
              <el-table-column label="单位" align="center" prop="unitName" width="60" />
              <el-table-column label="未税单价" align="center" prop="beforePrice" width="100">
                <template #default="scope">
                  {{ scope.row.beforePrice ? Number(scope.row.beforePrice).toFixed(2) : '0.00' }}
                </template>
              </el-table-column>
              <el-table-column label="税率(%)" align="center" prop="taxRate" width="80">
                <template #default="scope">
                  {{ scope.row.taxRate ? Number(scope.row.taxRate).toFixed(2) : '0.00' }}
                </template>
              </el-table-column>
              <el-table-column label="含税单价" align="center" prop="includingPrice" width="100">
                <template #default="scope">
                  {{ scope.row.includingPrice ? Number(scope.row.includingPrice).toFixed(2) : '0.00' }}
                </template>
              </el-table-column>
              <el-table-column label="小计" align="center" prop="subtotal" width="80">
                <template #default="scope">
                  {{ scope.row.subtotal ? Number(scope.row.subtotal).toFixed(2) : '0.00' }}
                </template>
              </el-table-column>
              <el-table-column label="备注" align="center" prop="remark" min-width="100" />
              <el-table-column label="操作" align="center" fixed="right" width="150" v-if="!isFormDisabled">
                <template #default="scope">
                  <el-button link type="primary" icon="Edit" @click="handleEditMaterial(scope.row)">编辑</el-button>
                  <el-button link type="danger" icon="Delete" @click="handleDeleteMaterial(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-form-item label="合同物料备注" prop="changeInfo.materialRemark" style="margin-bottom: 16px">
              <el-input
                v-model="form.changeInfo.materialRemark"
                type="textarea"
                :rows="3"
                placeholder="请输入合同物料备注"
                :disabled="isFormDisabled"
              />
            </el-form-item>
          </el-card>
        </template>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="选填" :disabled="isFormDisabled" />
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 合同物料编辑对话框 -->
    <el-dialog v-model="materialDialog.visible" :title="materialDialog.title" width="800px" append-to-body>
      <el-form ref="materialFormRef" :model="materialForm" :rules="materialRules" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="标准物料标识" prop="materialFlag">
              <el-radio-group v-model="materialForm.materialFlag">
                <el-radio v-for="dict in material_flag" :key="dict.value" :value="dict.value">{{ dict.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="materialForm.materialFlag === '1'">
            <el-form-item label="物料名称" prop="materialName">
              <el-input v-model="materialForm.materialName" placeholder="点击右侧图标检索">
                <template #suffix>
                  <el-icon style="cursor: pointer" @click="openSaleMaterialSelect"><Search /></el-icon>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="materialForm.materialFlag === '1'">
            <el-form-item label="物料编号"><el-input v-model="materialForm.materialCode" disabled /></el-form-item>
          </el-col>
          <el-col :span="12" v-if="materialForm.materialFlag === '1'">
            <el-form-item label="客户名称"><el-input v-model="materialForm.customerName" disabled /></el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="产品名称" prop="productName">
              <el-input v-model="materialForm.productName" placeholder="产品名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="规格描述" prop="specificationDescription">
              <el-input v-model="materialForm.specificationDescription" placeholder="规格描述" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="数量" prop="amount">
              <el-input-number v-model="materialForm.amount" placeholder="数量" style="width: 100%" :precision="2" @change="calculateSubtotal" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="物料单位" prop="unitId">
              <el-select v-model="materialForm.unitId" placeholder="请选择单位" style="width: 100%">
                <el-option v-for="item in unitInfoList" :key="item.unitId" :label="item.unitName" :value="item.unitId" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="税率(%)" prop="taxRate">
              <el-select v-model="materialForm.taxRate" placeholder="税率" style="width: 100%" filterable allow-create @change="calculateBeforePrice">
                <el-option label="0" :value="0" /><el-option label="6" :value="6" /><el-option label="9" :value="9" /><el-option label="13" :value="13" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="未税单价"><el-input-number v-model="materialForm.beforePrice" style="width: 100%" :precision="2" disabled :controls="false" /></el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="含税单价" prop="includingPrice">
              <el-input-number v-model="materialForm.includingPrice" placeholder="含税单价" style="width: 100%" :precision="2" @change="calculateBeforePrice" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="小计"><el-input-number v-model="materialForm.subtotal" style="width: 100%" :precision="2" readonly disabled :controls="false" /></el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark"><el-input v-model="materialForm.remark" type="textarea" placeholder="备注" /></el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <el-button @click="cancelMaterial">取 消</el-button>
        <el-button type="primary" @click="submitMaterialForm">确 定</el-button>
      </template>
    </el-dialog>

    <!-- 合同付款方式编辑对话框 -->
    <el-dialog v-model="paymentMethodDialog.visible" :title="paymentMethodDialog.title" width="500px" append-to-body>
      <el-form ref="paymentMethodFormRef" :model="paymentMethodForm" :rules="paymentMethodRules" label-width="120px">
        <el-form-item label="序号" prop="sortOrder">
          <el-input-number v-model="paymentMethodForm.sortOrder" :min="1" readonly :controls="false" style="width: 100%" />
        </el-form-item>
        <el-form-item label="付款节点" prop="paymentStageId">
          <el-select v-model="paymentMethodForm.paymentStageId" placeholder="请选择付款节点" style="width: 100%" filterable @change="onPaymentStageChange">
            <el-option v-for="item in paymentStageList" :key="item.paymentStageId" :label="item.paymentMethod" :value="item.paymentStageId" />
          </el-select>
        </el-form-item>
        <el-form-item label="支付期限（天）" prop="paymentDeadline">
          <el-input-number v-model="paymentMethodForm.paymentDeadline" :min="0" style="width: 100%" @change="refreshPaymentDescription" />
        </el-form-item>
        <el-form-item label="支付比例（%）" prop="paymentPercentage">
          <el-input-number v-model="paymentMethodForm.paymentPercentage" :min="0" :max="100" style="width: 100%" @change="refreshPaymentDescription" />
        </el-form-item>
        <el-form-item label="发票比例（%）" prop="invoicePercentage">
          <el-input-number v-model="paymentMethodForm.invoicePercentage" :min="0" :max="100" style="width: 100%" @change="refreshPaymentDescription" />
        </el-form-item>
        <el-form-item label="付款条款" prop="paymentDescription">
          <el-input v-model="paymentMethodForm.paymentDescription" type="textarea" :rows="5" placeholder="选择付款节点后自动带出，可修改" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="cancelPaymentMethod">取 消</el-button>
        <el-button type="primary" @click="submitPaymentMethodForm">确 定</el-button>
      </template>
    </el-dialog>

    <FrameworkContractSelectDialog
      v-model:visible="changeFrameworkContractDialogVisible"
      :current-contract-id="form.contractId"
      @confirm="onChangeFrameworkContractConfirm"
    />

    <SaleMaterialSelect ref="saleMaterialSelectRef" :multiple="false" @confirm-call-back="saleMaterialSelectCallBack" />

    <ContractSelect ref="contractSelectRef" @confirm-call-back="contractSelectCallBack" />

    <!-- 审批记录 -->
    <approvalRecord ref="approvalRecordRef" />
    <submitVerify ref="submitVerifyRef" :task-variables="taskVariables" @submit-callback="submitCallback" />
  </div>
</template>

<script setup name="ContractChangeApply" lang="ts">
import { Search } from '@element-plus/icons-vue';
import { getContractInfo } from '@/api/oa/erp/contractInfo';
import type { ContractInfoVO } from '@/api/oa/erp/contractInfo/types';
import { saveContractChange, getContractChangeDetail, contractChangeSubmitAndFlowStart, contractChangeContentSubmit } from '@/api/oa/erp/contractChange';
import type { ContractChangeSaveForm } from '@/api/oa/erp/contractChange/types';
import type { ContractMaterialForm } from '@/api/oa/erp/contractMaterial/types';
import type { ContractPaymentMethodForm } from '@/api/oa/erp/contractPaymentMethod/types';
import { getBaseUnitInfoList } from '@/api/oa/base/unitInfo';
import { getBasePaymentStageList } from '@/api/oa/base/paymentStage';
import type { PaymentStageVO } from '@/api/oa/base/paymentStage/types';
import { getCrmCustomerInfoList } from '@/api/oa/crm/customerInfo';
import { getCrmPaymentAccountList } from '@/api/oa/crm/paymentAccount';
import { getUserList } from '@/api/system/user';
import { getInfo } from '@/api/login';
import { getBasePrintTemplateList } from '@/api/oa/base/printTemplate';
import ApprovalButton from '@/components/Process/approvalButton.vue';
import ApprovalRecord from '@/components/Process/approvalRecord.vue';
import SubmitVerify from '@/components/Process/submitVerify.vue';
import FileUpload from '@/components/FileUpload/index.vue';
import SaleMaterialSelect from '@/components/SaleMaterialSelect/index.vue';
import ContractSelect from '@/components/ContractSelect/index.vue';
import FrameworkContractSelectDialog from '@/views/oa/components/FrameworkContractSelectDialog.vue';
import { FlowCodeEnum, CodeRuleEnum } from '@/enums/OAEnum';
import { getRuleGenerateCode } from '@/api/system/codeRule';

const route = useRoute();
const router = useRouter();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const {
  contract_change_type,
  contract_category,
  business_direction,
  contract_flag,
  contract_template_flag,
  material_flag,
  seal_legal_entity,
  is_framework_contract,
  contract_territorial_flag,
  country_region,
  currency_type,
  contract_status
} = toRefs<any>(
  proxy?.useDict(
    'contract_change_type',
    'contract_category',
    'business_direction',
    'contract_flag',
    'contract_template_flag',
    'material_flag',
    'seal_legal_entity',
    'is_framework_contract',
    'contract_territorial_flag',
    'country_region',
    'currency_type',
    'contract_status'
  )
);

const paymentMethodOptions = ['电汇', '银行承兑（6个月内）', '电汇/银行承兑（6个月内）', '商业承兑'];

const formRef = ref<ElFormInstance>();
const buttonLoading = ref(false);
const routeParams = ref<Record<string, any>>({ ...(route.query as Record<string, any>) });

// 审批相关
const approvalRecordRef = ref<InstanceType<typeof ApprovalRecord>>();
const submitVerifyRef = ref<InstanceType<typeof SubmitVerify>>();
const taskVariables = ref<Record<string, any>>({});

// 下拉与选项
const unitInfoList = ref<any[]>([]);
const paymentStageList = ref<PaymentStageVO[]>([]);
const customerInfoList = ref<any[]>([]);
const userInfoList = ref<any[]>([]);
const paymentAccountList = ref<any[]>([]);
const printTemplateList = ref<any[]>([]);
// 变更后物料/付款方式列表（仅内容变更时使用）
const changeMaterialList = computed(() => form.value.changeMaterialList || []);
const changePaymentMethodList = computed(() => form.value.changePaymentMethodList || []);

// 变更后合同附件（绑定到 changeInfo.ossId）
const changeInfoOssId = computed({
  get() {
    const v = form.value.changeInfo?.ossId;
    return v === undefined || v === null ? '' : String(v);
  },
  set(val: string) {
    if (form.value.changeInfo) form.value.changeInfo.ossId = val || undefined;
  }
});

// 合同物料弹框
const materialDialog = reactive({ visible: false, title: '' });
const materialFormRef = ref<ElFormInstance>();
const initMaterialFormData: ContractMaterialForm & { materialCode?: string; customerName?: string; saleMaterialName?: string } = {
  contractMaterialId: undefined,
  materialFlag: '2',
  contractId: undefined,
  productName: undefined,
  specificationDescription: undefined,
  materialId: undefined,
  relationMaterialId: undefined,
  materialCode: undefined,
  materialName: undefined,
  saleMaterialName: undefined,
  customerName: undefined,
  amount: undefined,
  unitId: undefined,
  beforePrice: undefined,
  taxRate: undefined,
  includingPrice: undefined,
  subtotal: undefined,
  remark: undefined,
  activeFlag: '1'
};
const materialForm = ref<ContractMaterialForm & { materialCode?: string; customerName?: string; saleMaterialName?: string }>({ ...initMaterialFormData });
const materialRules = {
  productName: [{ required: true, message: '产品名称不能为空', trigger: 'blur' }],
  amount: [{ required: true, message: '数量不能为空', trigger: 'blur' }],
  taxRate: [{ required: true, message: '税率不能为空', trigger: 'blur' }]
};

// 合同付款方式弹框
const paymentMethodDialog = reactive({ visible: false, title: '' });
const editingPaymentMethodIndex = ref<number | null>(null);
const paymentMethodFormRef = ref<ElFormInstance>();
const initPaymentMethodFormData: ContractPaymentMethodForm = {
  paymentMethodId: undefined,
  contractId: undefined,
  sortOrder: undefined,
  paymentStageId: undefined,
  paymentDeadline: undefined,
  paymentPercentage: undefined,
  invoicePercentage: 0,
  paymentAmount: undefined,
  paymentDescription: undefined,
  remark: undefined,
  activeFlag: '1'
};
const paymentMethodForm = ref<ContractPaymentMethodForm>({ ...initPaymentMethodFormData });
const paymentMethodRules = {
  paymentStageId: [{ required: true, message: '请选择付款节点', trigger: 'change' }],
  paymentDeadline: [{ required: true, message: '支付期限（天）不能为空', trigger: 'blur' }],
  paymentPercentage: [{ required: true, message: '支付比例不能为空', trigger: 'blur' }],
  invoicePercentage: [{ required: true, message: '发票比例不能为空', trigger: 'blur' }]
};
const PAYMENT_TEMPLATE_PLACEHOLDERS: Record<string, string> = {
  '{序号}': 'sortOrder',
  '{支付期限}': 'paymentDeadline',
  '{支付比例}': 'paymentPercentage',
  '{发票比例}': 'invoicePercentage'
};
const replacePaymentTemplate = (template: string | undefined, data: Record<string, any>): string => {
  if (template == null || template === '') return '';
  let result = template;
  for (const [placeholder, fieldKey] of Object.entries(PAYMENT_TEMPLATE_PLACEHOLDERS)) {
    const value = data[fieldKey];
    result = result.replaceAll(placeholder, value !== undefined && value !== null ? String(value) : '');
  }
  return result;
};
const removeSegmentWhenInvoiceZero = (text: string, invoicePercentage: any): string => {
  if (text == null || text === '') return text;
  const isZero = invoicePercentage === 0 || invoicePercentage === '0' || Number(invoicePercentage) === 0;
  if (!isZero) return text;
  const startChar = '且';
  const endChar = '后';
  const idxStart = text.indexOf(startChar);
  if (idxStart === -1) return text;
  const idxEnd = text.indexOf(endChar, idxStart);
  if (idxEnd === -1) return text;
  return text.slice(0, idxStart) + text.slice(idxEnd + endChar.length);
};
const applyPaymentDescription = (template: string | undefined, data: Record<string, any>): string => {
  const replaced = replacePaymentTemplate(template, data);
  return removeSegmentWhenInvoiceZero(replaced, data.invoicePercentage);
};
const paymentMethodTemplateRaw = ref<string | null>(null);
const refreshPaymentDescription = () => {
  if (paymentMethodTemplateRaw.value) {
    paymentMethodForm.value.paymentDescription = applyPaymentDescription(
      paymentMethodTemplateRaw.value,
      paymentMethodForm.value as Record<string, any>
    );
  }
};
const onPaymentStageChange = (paymentStageId: string | number | undefined) => {
  if (paymentStageId == null) return;
  const stage = paymentStageList.value.find((s) => s.paymentStageId === paymentStageId || String(s.paymentStageId) === String(paymentStageId));
  if (stage?.paymentTemplate) {
    paymentMethodTemplateRaw.value = stage.paymentTemplate;
    paymentMethodForm.value.paymentDescription = applyPaymentDescription(
      stage.paymentTemplate,
      paymentMethodForm.value as Record<string, any>
    );
  }
};

const saleMaterialSelectRef = ref<InstanceType<typeof SaleMaterialSelect>>();

const selectedContractName = ref<string>('');
const contractSelectRef = ref<InstanceType<typeof ContractSelect>>();
/** 变更后合同编号是否已通过「生成」获取（与合同编辑页规则一致，生成一次后禁用按钮） */
const isChangeContractCodeGenerated = ref(false);

const isEdit = computed(() => !!(routeParams.value.id && (routeParams.value.type === 'update' || routeParams.value.type === 'view' || routeParams.value.type === 'approval')));
const isFormDisabled = computed(() => routeParams.value.type === 'view' || routeParams.value.type === 'approval');
const showApprovalCard = computed(() => !(form.value.changeStatus === '3' && form.value.changeType === '1'));

const form = ref<
  ContractChangeSaveForm & {
    changeInfo?: any;
    changeMaterialList?: any[];
    changePaymentMethodList?: any[];
    flowStatus?: string;
    changeCode?: string;
    newContractId?: string | number;
  }
>({
  contractChangeId: undefined,
  contractId: undefined as any,
  newContractId: undefined,
  changeType: '1',
  changeReason: '',
  applyTime: undefined,
  remark: undefined,
  changeStatus: '1',
  flowStatus: 'draft',
  activeFlag: '1',
  contractCode: undefined,
  contractName: undefined,
  originalCustomerName: undefined,
  originalContractAmount: undefined,
  changeContractCode: undefined,
  changeContractName: undefined,
  customerName: undefined,
  changeContractAmount: undefined,
  changeInfo: undefined,
  changeMaterialList: undefined,
  changePaymentMethodList: undefined,
  changeCode: undefined,
  undertakeBy: undefined,
  businessDirection: undefined,
  sealLegalEntity: undefined
});

const changeFrameworkContractDialogVisible = ref(false);

const changeFrameworkContractDisplay = computed(() => {
  const ci = form.value.changeInfo;
  if (!ci) return '';
  const code = ci.frameworkContractCode || '';
  const name = ci.frameworkContractName || '';
  return `${code} ${name}`.trim();
});

function openChangeFrameworkContractDialog() {
  if (isFormDisabled.value) return;
  changeFrameworkContractDialogVisible.value = true;
}

function onChangeFrameworkContractConfirm(selected: any) {
  if (!form.value.changeInfo) return;
  form.value.changeInfo.frameworkContractId = selected.contractId;
  form.value.changeInfo.frameworkContractCode = selected.contractCode;
  form.value.changeInfo.frameworkContractName = selected.contractName;
  changeFrameworkContractDialogVisible.value = false;
}

function clearChangeFrameworkContract() {
  if (!form.value.changeInfo) return;
  form.value.changeInfo.frameworkContractId = undefined;
  form.value.changeInfo.frameworkContractCode = undefined;
  form.value.changeInfo.frameworkContractName = undefined;
}

watch(
  () => form.value.changeInfo?.contractCategory,
  (newVal) => {
    if (newVal === '3' && form.value.changeInfo) {
      form.value.changeInfo.isFrameworkContract = '0';
      form.value.changeInfo.frameworkContractId = undefined;
      form.value.changeInfo.frameworkContractCode = undefined;
      form.value.changeInfo.frameworkContractName = undefined;
    }
  }
);

const baseRules = {
  changeType: [{ required: true, message: '请选择变更类型', trigger: 'change' }],
  contractId: [{ required: true, message: '请选择合同', trigger: 'change' }],
  changeReason: [{ required: true, message: '请输入变更原因', trigger: 'blur' }]
};

const changeInfoRules: Record<string, any[]> = {
  'changeInfo.contractCode': [{ required: true, message: '合同编号不能为空', trigger: 'blur' }],
  'changeInfo.contractName': [{ required: true, message: '合同名称不能为空', trigger: 'blur' }],
  'changeInfo.businessDirection': [{ required: true, message: '业务方向不能为空', trigger: 'blur' }],
  'changeInfo.contractManagerId': [{ required: true, message: '合同负责人不能为空', trigger: 'blur' }],
  'changeInfo.oneCustomerId': [{ required: true, message: '请选择甲方公司', trigger: 'change' }],
  'changeInfo.twoCustomerId': [{ required: true, message: '请选择乙方公司', trigger: 'change' }],
  'changeInfo.contractTerritorialFlag': [{ required: true, message: '合同属地标识不能为空', trigger: 'change' }],
  'changeInfo.contractTerritorialCountry': [
    {
      validator: (_rule: any, _value: any, callback: (err?: Error) => void) => {
        if (form.value.changeInfo?.contractTerritorialFlag === '2' && !form.value.changeInfo?.contractTerritorialCountry) {
          callback(new Error('合同属地标识为“其他”时，国家/地区不能为空'));
          return;
        }
        callback();
      },
      trigger: 'change'
    }
  ],
  'changeInfo.settlementCurrency': [{ required: true, message: '结算币种不能为空', trigger: 'change' }],
  'changeInfo.ossId': [
    {
      validator: (_rule: any, _value: any, callback: (err?: Error) => void) => {
        if (form.value.changeInfo?.effectiveCustomerOrderFlag === '1' && !form.value.changeInfo?.ossId) {
          callback(new Error('已生效客户订单必须上传附件'));
          return;
        }
        callback();
      },
      trigger: 'change'
    }
  ],
  'changeInfo.contractTemplateFlag': [{ required: true, message: '合同模板标识不能为空', trigger: 'blur' }],
  'changeInfo.isFrameworkContract': [
    {
      validator: (_rule: any, _value: any, callback: (err?: Error) => void) => {
        const ci = form.value.changeInfo;
        if (!ci || ci.contractCategory === '3') {
          callback();
          return;
        }
        if (ci.isFrameworkContract == null || ci.isFrameworkContract === '') {
          callback(new Error('请选择关联框架合同'));
          return;
        }
        callback();
      },
      trigger: 'change'
    }
  ],
  'changeInfo.frameworkValidPeriod': [
    {
      validator: (_rule: any, _value: any, callback: (err?: Error) => void) => {
        const ci = form.value.changeInfo;
        if (!ci || ci.contractCategory !== '3') {
          callback();
          return;
        }
        if (!ci.frameworkValidPeriod) {
          callback(new Error('请填写框架合同有效期'));
          return;
        }
        callback();
      },
      trigger: 'change'
    }
  ],
  'changeInfo.frameworkContractId': [
    {
      validator: (_rule: any, _value: any, callback: (err?: Error) => void) => {
        const ci = form.value.changeInfo;
        if (ci && ci.contractCategory !== '3' && ci.isFrameworkContract === '1' && !ci.frameworkContractId) {
          callback(new Error('请选择关联框架合同'));
          return;
        }
        callback();
      },
      trigger: 'change'
    }
  ]
};

const changeFormRules = computed(() => {
  if (form.value.changeType === '1' && form.value.changeInfo) {
    return { ...baseRules, ...changeInfoRules };
  }
  return { ...baseRules };
});

function goBack() {
  proxy?.$tab.closePage(route);
  router.push({ path: '/contract/contractChange' });
}

/** 合同模板下载/查看（仿照合同修改页） */
function handleContractTemplateDownload() {
  if (!form.value.changeInfo?.templateId) return;
  console.log(form.value);
  router.push({
    path: '/contract/contractView',
    query: { templateId: form.value.changeInfo.templateId, contractId: form.value.newContractId }
  });
}

/** 打开合同选择弹框 */
function openContractSelect() {
  if (isFormDisabled.value) return;
  contractSelectRef.value?.open();
}

function contractSelectCallBack(list: ContractInfoVO[]) {
  const c = Array.isArray(list) && list.length > 0 ? list[0] : null;
  if (!c?.contractId) return;
  form.value.contractId = c.contractId as any;
  selectedContractName.value = c.contractName || '';
  onContractChange(c.contractId);
}

async function onContractChange(contractId: string | number) {
  if (!contractId) return;
  const res = await getContractInfo(contractId);
  const c = res.data;
  if (!c) return;
  const cAny = c as any;
  form.value.contractCode = c.contractCode;
  form.value.contractName = c.contractName;
  form.value.originalCustomerName = cAny.oneCustomerName || cAny.twoCustomerName;
  form.value.originalContractAmount = c.totalPrice as any;
  form.value.businessDirection = (c as any).businessDirection;
  if (form.value.changeType === '1') {
    form.value.changeContractCode = c.contractCode;
    form.value.changeContractName = c.contractName;
    form.value.customerName = cAny.oneCustomerName || cAny.twoCustomerName;
    form.value.changeContractAmount = c.totalPrice as any;
    form.value.changeInfo = mapContractToChangeInfo(c);
    form.value.changeMaterialList = (cAny.contractMaterialList || []).map((m: any) => ({
      ...m,
      changeMaterialId: undefined,
      contractChangeId: undefined
    }));
    form.value.changePaymentMethodList = (cAny.contractPaymentMethodList || []).map((p: any) => ({
      ...p,
      changePaymentId: undefined,
      contractChangeId: undefined
    }));
    // 重新带出的是原合同编号，允许再次点「生成」换新编号
    isChangeContractCodeGenerated.value = false;
  }
}

/** 生成变更后合同编号（编码规则与合同编辑页相同） */
async function generateChangeContractCode() {
  if (isChangeContractCodeGenerated.value || !form.value.changeInfo) return;
  try {
    const params = { codeRuleCode: CodeRuleEnum.CONTRACT } as any;
    const res = await getRuleGenerateCode(params);
    form.value.changeInfo.contractCode = res.msg;
    isChangeContractCodeGenerated.value = true;
    proxy?.$modal.msgSuccess('合同编号生成成功');
  } catch (error) {
    console.error('生成合同编号失败:', error);
    proxy?.$modal.msgError('生成合同编号失败');
  }
}

function mapContractToChangeInfo(c: any) {
  const info: any = {};
  const keys = [
    'contractFlag',
    'customerContractCode',
    'contractCode',
    'contractName',
    'contractCategory',
    'contractType',
    'businessDirection',
    'contractDeptId',
    'contractDate',
    'totalPrice',
    'oneCustomerId',
    'oneRepresent',
    'oneDate',
    'twoCustomerId',
    'twoRepresent',
    'twoDate',
    'contractManagerId',
    'templateId',
    'ossId',
    'paymentAccountId',
    'paymentMethod',
    'signatureAppendix',
    'warrantyPeriod',
    'internalContractCode',
    'externalContractCode',
    'orderContractCode',
    'projectContractCode',
    'deliveryStart',
    'warrantyPeriodDescription',
    'deliveryLocation',
    'shipMethod',
    'taxRate',
    'signingPlace',
    'materialRemark',
    'contractTemplateFlag',
    'capitalizedAmount',
    'remark',
    'isFrameworkContract',
    'frameworkContractId',
    'frameworkContractCode',
    'frameworkContractName',
    'frameworkValidPeriod',
    'contractTerritorialFlag',
    'contractTerritorialCountry',
    'settlementCurrency',
    'rmbExchangeRate',
    'contractStatus',
    'effectiveCustomerOrderFlag'
  ];
  keys.forEach((k) => {
    if (c[k] !== undefined) info[k] = c[k];
  });
  info.changeInfoId = undefined;
  info.contractChangeId = undefined;
  if (info.contractTemplateFlag == null) info.contractTemplateFlag = '2';
  if (info.effectiveCustomerOrderFlag == null || info.effectiveCustomerOrderFlag === '') info.effectiveCustomerOrderFlag = '0';
  return info;
}

async function loadDetail() {
  const id = routeParams.value.id;
  if (!id) return;
  const res = await getContractChangeDetail(id);
  const d = res.data;
  if (!d?.main) return;
  const m = d.main;
  form.value.contractChangeId = m.contractChangeId;
  form.value.contractId = m.contractId;
  form.value.changeType = m.changeType;
  form.value.changeReason = m.changeReason;
  form.value.changeCode = m.changeCode;
  form.value.applyTime = m.applyTime;
  form.value.remark = m.remark;
  form.value.changeStatus = m.changeStatus;
  form.value.flowStatus = m.flowStatus ?? (m.changeStatus === '1' ? 'draft' : 'waiting');
  form.value.contractCode = m.contractCode;
  form.value.contractName = m.contractName;
  form.value.originalCustomerName = m.originalCustomerName;
  form.value.originalContractAmount = m.originalContractAmount;
  form.value.changeContractCode = m.changeContractCode;
  form.value.changeContractName = m.changeContractName;
  form.value.customerName = m.customerName;
  form.value.changeContractAmount = m.changeContractAmount;
  form.value.changeInfo = d.changeInfo ? { ...d.changeInfo } : undefined;
  form.value.changeMaterialList = (d.changeMaterialList || []).map((x: any) => ({ ...x }));
  form.value.changePaymentMethodList = (d.changePaymentMethodList || []).map((x: any) => ({ ...x }));
  form.value.undertakeBy = m.undertakeBy;
  form.value.businessDirection = m.businessDirection;
  form.value.sealLegalEntity = m.sealLegalEntity;
  form.value.newContractId = m.newContractId;
  selectedContractName.value = m.contractName || '';
  // 变更后编号已与原合同编号不同（含已点生成或手改），则不再允许重复点生成
  if (form.value.changeType === '1' && form.value.changeInfo?.contractCode != null && form.value.contractCode != null) {
    const newCode = String(form.value.changeInfo.contractCode).trim();
    const oldCode = String(form.value.contractCode).trim();
    isChangeContractCodeGenerated.value = newCode !== '' && newCode !== oldCode;
  } else {
    isChangeContractCodeGenerated.value = false;
  }
}

function loadSelectOptions() {
  getBaseUnitInfoList(null).then((res) => (unitInfoList.value = res.data || []));
  getBasePaymentStageList({} as any).then((res) => (paymentStageList.value = res.data || []));
  getCrmCustomerInfoList(null).then((res) => (customerInfoList.value = res.data || []));
  getUserList({} as any).then((res) => (userInfoList.value = res.data || []));
  getCrmPaymentAccountList({}).then((res) => (paymentAccountList.value = res.data || []));
  getBasePrintTemplateList({ templateType: '1' }).then((res) => (printTemplateList.value = res.data || []));
}

// ----- 变更后物料：增删改 -----
function handleAddMaterial() {
  if (!form.value.changeInfo) return;
  resetMaterialForm();
  materialForm.value.contractId = form.value.contractId as any;
  materialDialog.visible = true;
  materialDialog.title = '新增合同物料';
}
function handleEditMaterial(row: any) {
  resetMaterialForm();
  materialForm.value = { ...row };
  materialDialog.visible = true;
  materialDialog.title = '编辑合同物料';
}
async function handleDeleteMaterial(row: any) {
  await proxy?.$modal.confirm('是否确认删除该合同物料？');
  const list = form.value.changeMaterialList || [];
  const idx = list.findIndex((item: any) => (item.changeMaterialId != null && item.changeMaterialId === row.changeMaterialId) || (item.contractMaterialId != null && item.contractMaterialId === row.contractMaterialId) || item === row);
  if (idx !== -1) {
    list.splice(idx, 1);
    calculateTotalPrice();
  }
  proxy?.$modal.msgSuccess('删除成功');
}
function resetMaterialForm() {
  materialForm.value = { ...initMaterialFormData };
  materialFormRef.value?.resetFields();
}
function cancelMaterial() {
  resetMaterialForm();
  materialDialog.visible = false;
}
function calculateBeforePrice() {
  const tax = Number(materialForm.value.taxRate);
  const including = Number(materialForm.value.includingPrice);
  if (!isNaN(tax) && !isNaN(including)) {
    const divisor = 1 + tax / 100;
    if (divisor > 0) materialForm.value.beforePrice = Number((including / divisor).toFixed(2));
  }
  calculateSubtotal();
}
function calculateSubtotal() {
  const amount = Number(materialForm.value.amount);
  const including = Number(materialForm.value.includingPrice);
  if (!isNaN(amount) && !isNaN(including)) materialForm.value.subtotal = Number((amount * including).toFixed(2));
  calculateTotalPrice();
}
function calculateTotalPrice() {
  const list = form.value.changeMaterialList || [];
  const total = list.reduce((sum: number, m: any) => sum + (Number(m.subtotal) || 0), 0);
  if (form.value.changeInfo) form.value.changeInfo.totalPrice = Number(total.toFixed(2));
}
function submitMaterialForm() {
  materialFormRef.value?.validate((valid: boolean) => {
    if (!valid) return;
    if (!form.value.changeMaterialList) form.value.changeMaterialList = [];
    const list = form.value.changeMaterialList;
    const unitInfo = unitInfoList.value.find((item: any) => item.unitId === materialForm.value.unitId);
    const unitName = unitInfo ? unitInfo.unitName : '';
    const data = { ...materialForm.value, unitName };
    const id = materialForm.value.contractMaterialId ?? (materialForm.value as any).changeMaterialId;
    const idx = id != null ? list.findIndex((item: any) => item.contractMaterialId === id || item.changeMaterialId === id) : -1;
    if (idx !== -1) {
      list[idx] = data;
    } else {
      list.push({ ...data, contractMaterialId: undefined, changeMaterialId: Date.now() });
    }
    calculateTotalPrice();
    proxy?.$modal.msgSuccess('操作成功');
    materialDialog.visible = false;
  });
}

// ----- 变更后付款方式：增删改 -----
function handleAddPaymentMethod() {
  resetPaymentMethodForm();
  editingPaymentMethodIndex.value = null;
  const list = form.value.changePaymentMethodList || [];
  paymentMethodForm.value.sortOrder = list.length + 1;
  paymentMethodDialog.visible = true;
  paymentMethodDialog.title = '新增付款方式';
}
function handleEditPaymentMethod(row: any, rowIndex: number) {
  resetPaymentMethodForm();
  editingPaymentMethodIndex.value = rowIndex;
  paymentMethodForm.value = { ...row };
  const stage = paymentStageList.value.find((s) => s.paymentStageId === row.paymentStageId || String(s.paymentStageId) === String(row.paymentStageId));
  if (stage?.paymentTemplate) paymentMethodTemplateRaw.value = stage.paymentTemplate;
  paymentMethodDialog.visible = true;
  paymentMethodDialog.title = '编辑付款方式';
}
async function handleDeletePaymentMethod(rowIndex: number) {
  await proxy?.$modal.confirm('是否确认删除该付款方式？');
  const list = form.value.changePaymentMethodList || [];
  if (rowIndex >= 0 && rowIndex < list.length) {
    list.splice(rowIndex, 1);
    list.forEach((item: any, i: number) => (item.sortOrder = i + 1));
  }
  proxy?.$modal.msgSuccess('删除成功');
}
function resetPaymentMethodForm() {
  paymentMethodForm.value = { ...initPaymentMethodFormData };
  paymentMethodTemplateRaw.value = null;
  paymentMethodFormRef.value?.resetFields();
}
function cancelPaymentMethod() {
  resetPaymentMethodForm();
  editingPaymentMethodIndex.value = null;
  paymentMethodDialog.visible = false;
}
function submitPaymentMethodForm() {
  paymentMethodFormRef.value?.validate((valid: boolean) => {
    if (!valid) return;
    if (!form.value.changePaymentMethodList) form.value.changePaymentMethodList = [];
    const list = form.value.changePaymentMethodList;
    const data = { ...paymentMethodForm.value };
    data.paymentDescription = applyPaymentDescription(data.paymentDescription || '', data as Record<string, any>);
    const editIndex = editingPaymentMethodIndex.value;
    if (editIndex !== null && editIndex >= 0 && editIndex < list.length) {
      list[editIndex] = data;
    } else {
      list.push({ ...data, paymentMethodId: undefined, changePaymentId: undefined });
    }
    editingPaymentMethodIndex.value = null;
    list.forEach((item: any, i: number) => {
      item.sortOrder = i + 1;
      item.paymentDescription = applyPaymentDescription(item.paymentDescription || '', item);
    });
    proxy?.$modal.msgSuccess('操作成功');
    paymentMethodDialog.visible = false;
  });
}

function openSaleMaterialSelect() {
  saleMaterialSelectRef.value?.open();
}
function saleMaterialSelectCallBack(data: any) {
  const arr = Array.isArray(data) ? data : [data];
  if (arr.length > 0) {
    const m = arr[0];
    materialForm.value.materialId = m.materialId;
    materialForm.value.materialCode = m.materialCode;
    materialForm.value.materialName = m.materialName;
    materialForm.value.productName = m.saleMaterialName;
    materialForm.value.saleMaterialName = m.saleMaterialName;
    materialForm.value.relationMaterialId = m.relationMaterialId;
    materialForm.value.customerName = m.customerName;
  }
}

function buildPayload(changeStatus: '1' | '2'): ContractChangeSaveForm {
  const f = form.value;
  // 内容变更：变更后合同编号等
  if (f.changeType === '1' && f.changeInfo) {
    f.changeContractCode = f.changeInfo.contractCode;
    f.changeContractName = f.changeInfo.contractName;
    f.changeContractAmount = f.changeInfo.totalPrice;
  }
  const payload: ContractChangeSaveForm = {
    contractChangeId: f.contractChangeId,
    contractId: f.contractId,
    changeType: f.changeType,
    changeReason: f.changeReason,
    applyTime: f.applyTime || new Date().toISOString().slice(0, 19).replace('T', ' '),
    remark: f.remark,
    changeStatus,
    activeFlag: '1',
    contractCode: f.contractCode,
    contractName: f.contractName,
    originalCustomerName: f.originalCustomerName,
    originalContractAmount: f.originalContractAmount,
    changeContractCode: f.changeContractCode,
    changeContractName: f.changeContractName,
    customerName: f.customerName,
    changeContractAmount: f.changeContractAmount,
    undertakeBy: f.undertakeBy,
    businessDirection: f.businessDirection,
    sealLegalEntity: f.sealLegalEntity
  };
  if (f.changeType === '1') {
    payload.changeInfo = f.changeInfo;
    payload.changeMaterialList = f.changeMaterialList;
    payload.changePaymentMethodList = f.changePaymentMethodList;
  }
  return payload;
}

/** 审批栏：提交（暂存 / 提交审批）。内容变更走 contractChangeContentSubmit 不走 HTBG；解除合同走 contractChangeSubmitAndFlowStart */
function submitForm(status: string, _mode: boolean) {
  formRef.value?.validate((valid: boolean) => {
    if (!valid) return;
    if (form.value.changeType === '1' && !form.value.changeInfo) {
      proxy?.$modal.msgError('内容变更请先选择合同，以加载变更后合同信息');
      return;
    }
    if (form.value.changeType === '1') {
      const pay = form.value.changePaymentMethodList;
      if (!Array.isArray(pay) || pay.length === 0) {
        proxy?.$modal.msgWarning('请至少维护一条合同付款方式');
        return;
      }
      const mat = form.value.changeMaterialList;
      if (!Array.isArray(mat) || mat.length === 0) {
        proxy?.$modal.msgWarning('请至少维护一条合同物料');
        return;
      }
    }
    if (status !== 'draft' && form.value.changeType === '1') {
      const newCode = (form.value.changeInfo?.contractCode ?? '').trim();
      const oldCode = (form.value.contractCode ?? '').trim();
      if (newCode === oldCode) {
        proxy?.$modal.msgError('合同内容变更时，变更后合同编号必须与原合同编号不同');
        return;
      }
    }
    buttonLoading.value = true;
    if (status !== 'draft') {
      const payload = buildPayload('2');
      if (form.value.changeType === '1') {
        // 内容变更：不走 HTBG，保存变更单并新增合同，新合同走 OAC
        contractChangeContentSubmit(payload)
          .then((res) => {
            if (res.data) {
              form.value.contractChangeId = res.data.contractChangeId;
              form.value.changeStatus = res.data.changeStatus ?? '3';
              form.value.flowStatus = res.data.flowStatus ?? 'content_submitted';
            }
            proxy?.$modal.msgSuccess('操作成功，已生成新合同，请在合同管理中提交新合同审批');
            goBack();
          })
          .finally(() => {
            buttonLoading.value = false;
          });
      } else {
        // 解除合同：走 HTBG
        payload.flowCode = FlowCodeEnum.CONTRACT_CHANGE_CODE;
        payload.flowStatus = 'waiting';
        payload.variables = {
          contractChangeId: form.value.contractChangeId,
          changeCode: form.value.changeCode || '',
          contractName: form.value.contractName,
          changeReason: form.value.changeReason
        };
        payload.bizExt = {
          businessTitle: '合同解除',
          businessCode: form.value.changeCode || ''
        };
        contractChangeSubmitAndFlowStart(payload)
          .then((res) => {
            if (res.data) {
              form.value.contractChangeId = res.data.contractChangeId;
              form.value.changeStatus = '2';
              form.value.flowStatus = res.data.flowStatus ?? 'waiting';
            }
            proxy?.$modal.msgSuccess('操作成功');
            goBack();
          })
          .finally(() => {
            buttonLoading.value = false;
          });
      }
    } else {
      // 暂存
      const payload = buildPayload('1');
      saveContractChange(payload)
        .then((res) => {
          const id = res.data;
          if (id) form.value.contractChangeId = id;
          form.value.changeStatus = '1';
          form.value.flowStatus = 'draft';
          proxy?.$modal.msgSuccess('暂存成功');
          goBack();
        })
        .finally(() => {
          buttonLoading.value = false;
        });
    }
  });
}

function submitCallback() {
  goBack();
}

function handleApprovalRecord() {
  approvalRecordRef.value?.init(form.value.contractChangeId);
}

async function approvalVerifyOpen() {
  if (routeParams.value.taskId) await submitVerifyRef.value?.openDialog(routeParams.value.taskId);
}

onMounted(async () => {
  routeParams.value = { ...(route.query as Record<string, any>) };
  loadSelectOptions();
  if (isEdit.value) {
    await loadDetail();
  } else {
    form.value.changeType = '1';
    form.value.flowStatus = 'draft';
    // 新增时默认承办人为当前登录用户
    try {
      const infoRes = await getInfo();
      if (infoRes?.data?.user) {
        const user = infoRes.data.user as any;
        if (user.userId != null) form.value.undertakeBy = user.userId;
      }
    } catch (e) {
      console.error('获取登录用户信息失败', e);
    }
  }
});
</script>

<style scoped>
</style>
