<template>
  <div class="p-2">
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
      <div v-show="showSearch" class="mb-[10px]">
        <el-card shadow="hover">
          <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="100px">
            <el-form-item label="合同变更ID" prop="contractChangeId">
              <el-input v-model="queryParams.contractChangeId" placeholder="请输入合同变更ID" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="有无合同(1有 2无)" prop="contractFlag">
              <el-input v-model="queryParams.contractFlag" placeholder="请输入有无合同(1有 2无)" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="客户合同编号" prop="customerContractCode">
              <el-input v-model="queryParams.customerContractCode" placeholder="请输入客户合同编号" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="合同编号" prop="contractCode">
              <el-input v-model="queryParams.contractCode" placeholder="请输入合同编号" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="合同名称" prop="contractName">
              <el-input v-model="queryParams.contractName" placeholder="请输入合同名称" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="合同大类" prop="contractCategory">
              <el-input v-model="queryParams.contractCategory" placeholder="请输入合同大类" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="业务方向" prop="businessDirection">
              <el-input v-model="queryParams.businessDirection" placeholder="请输入业务方向" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="部门" prop="contractDeptId">
              <el-input v-model="queryParams.contractDeptId" placeholder="请输入部门" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="合同签订日期" prop="contractDate">
              <el-date-picker clearable v-model="queryParams.contractDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择合同签订日期" />
            </el-form-item>
            <el-form-item label="合同总价" prop="totalPrice">
              <el-input v-model="queryParams.totalPrice" placeholder="请输入合同总价" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="甲方公司" prop="oneCustomerId">
              <el-input v-model="queryParams.oneCustomerId" placeholder="请输入甲方公司" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="甲方授权代表" prop="oneRepresent">
              <el-input v-model="queryParams.oneRepresent" placeholder="请输入甲方授权代表" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="甲方签字日期" prop="oneDate">
              <el-date-picker clearable v-model="queryParams.oneDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择甲方签字日期" />
            </el-form-item>
            <el-form-item label="乙方公司" prop="twoCustomerId">
              <el-input v-model="queryParams.twoCustomerId" placeholder="请输入乙方公司" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="乙方授权代表" prop="twoRepresent">
              <el-input v-model="queryParams.twoRepresent" placeholder="请输入乙方授权代表" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="乙方签字日期" prop="twoDate">
              <el-date-picker clearable v-model="queryParams.twoDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择乙方签字日期" />
            </el-form-item>
            <el-form-item label="合同负责人" prop="contractManagerId">
              <el-input v-model="queryParams.contractManagerId" placeholder="请输入合同负责人" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="合同模板ID" prop="templateId">
              <el-input v-model="queryParams.templateId" placeholder="请输入合同模板ID" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="附件ID" prop="ossId">
              <el-input v-model="queryParams.ossId" placeholder="请输入附件ID" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="付款账户ID" prop="paymentAccountId">
              <el-input v-model="queryParams.paymentAccountId" placeholder="请输入付款账户ID" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="付款方式" prop="paymentMethod">
              <el-input v-model="queryParams.paymentMethod" placeholder="请输入付款方式" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="签字合同附件" prop="signatureAppendix">
              <el-input v-model="queryParams.signatureAppendix" placeholder="请输入签字合同附件" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="质保期(天)" prop="warrantyPeriod">
              <el-input v-model="queryParams.warrantyPeriod" placeholder="请输入质保期(天)" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="内部合同号" prop="internalContractCode">
              <el-input v-model="queryParams.internalContractCode" placeholder="请输入内部合同号" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="外部合同号" prop="externalContractCode">
              <el-input v-model="queryParams.externalContractCode" placeholder="请输入外部合同号" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="订单号" prop="orderContractCode">
              <el-input v-model="queryParams.orderContractCode" placeholder="请输入订单号" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="项目号" prop="projectContractCode">
              <el-input v-model="queryParams.projectContractCode" placeholder="请输入项目号" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="发货/交货期" prop="deliveryStart">
              <el-input v-model="queryParams.deliveryStart" placeholder="请输入发货/交货期" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="质保期描述" prop="warrantyPeriodDescription">
              <el-input v-model="queryParams.warrantyPeriodDescription" placeholder="请输入质保期描述" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="交货地点" prop="deliveryLocation">
              <el-input v-model="queryParams.deliveryLocation" placeholder="请输入交货地点" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="运输方式" prop="shipMethod">
              <el-input v-model="queryParams.shipMethod" placeholder="请输入运输方式" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="合同税率" prop="taxRate">
              <el-input v-model="queryParams.taxRate" placeholder="请输入合同税率" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="签订地点" prop="signingPlace">
              <el-input v-model="queryParams.signingPlace" placeholder="请输入签订地点" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="合同物料备注" prop="materialRemark">
              <el-input v-model="queryParams.materialRemark" placeholder="请输入合同物料备注" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="合同模板标识" prop="contractTemplateFlag">
              <el-input v-model="queryParams.contractTemplateFlag" placeholder="请输入合同模板标识" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="合同大写金额" prop="capitalizedAmount">
              <el-input v-model="queryParams.capitalizedAmount" placeholder="请输入合同大写金额" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </transition>

    <el-card shadow="never">
      <template #header>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['oa/erp:contractChangeInfo:add']">新增 </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['oa/erp:contractChangeInfo:edit']"
              >修改
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="danger"
              plain
              icon="Delete"
              :disabled="multiple"
              @click="handleDelete()"
              v-hasPermi="['oa/erp:contractChangeInfo:remove']"
              >删除
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['oa/erp:contractChangeInfo:export']">导出 </el-button>
          </el-col>
          <right-toolbar v-model:showSearch="showSearch" :columns="columns" :search="true" @queryTable="getList"></right-toolbar>
        </el-row>
      </template>

      <el-table v-loading="loading" border :data="contractChangeInfoList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="变更信息快照ID" align="center" prop="changeInfoId" v-if="columns[0].visible" />
        <el-table-column label="合同变更ID" align="center" prop="contractChangeId" v-if="columns[2].visible" />
        <el-table-column label="有无合同(1有 2无)" align="center" prop="contractFlag" v-if="columns[3].visible" />
        <el-table-column label="客户合同编号" align="center" prop="customerContractCode" v-if="columns[4].visible" />
        <el-table-column label="合同编号" align="center" prop="contractCode" v-if="columns[5].visible" />
        <el-table-column label="合同名称" align="center" prop="contractName" v-if="columns[6].visible" />
        <el-table-column label="合同大类" align="center" prop="contractCategory" v-if="columns[7].visible" />
        <el-table-column label="合同类型" align="center" prop="contractType" v-if="columns[8].visible" />
        <el-table-column label="业务方向" align="center" prop="businessDirection" v-if="columns[9].visible" />
        <el-table-column label="部门" align="center" prop="contractDeptId" v-if="columns[10].visible" />
        <el-table-column label="合同签订日期" align="center" prop="contractDate" width="180" v-if="columns[11].visible">
          <template #default="scope">
            <span>{{ parseTime(scope.row.contractDate, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="合同总价" align="center" prop="totalPrice" v-if="columns[12].visible" />
        <el-table-column label="甲方公司" align="center" prop="oneCustomerId" v-if="columns[13].visible" />
        <el-table-column label="甲方授权代表" align="center" prop="oneRepresent" v-if="columns[14].visible" />
        <el-table-column label="甲方签字日期" align="center" prop="oneDate" width="180" v-if="columns[15].visible">
          <template #default="scope">
            <span>{{ parseTime(scope.row.oneDate, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="乙方公司" align="center" prop="twoCustomerId" v-if="columns[16].visible" />
        <el-table-column label="乙方授权代表" align="center" prop="twoRepresent" v-if="columns[17].visible" />
        <el-table-column label="乙方签字日期" align="center" prop="twoDate" width="180" v-if="columns[18].visible">
          <template #default="scope">
            <span>{{ parseTime(scope.row.twoDate, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="合同负责人" align="center" prop="contractManagerId" v-if="columns[19].visible" />
        <el-table-column label="合同模板ID" align="center" prop="templateId" v-if="columns[20].visible" />
        <el-table-column label="附件ID" align="center" prop="ossId" v-if="columns[21].visible" />
        <el-table-column label="付款账户ID" align="center" prop="paymentAccountId" v-if="columns[22].visible" />
        <el-table-column label="付款方式" align="center" prop="paymentMethod" v-if="columns[23].visible" />
        <el-table-column label="签字合同附件" align="center" prop="signatureAppendix" v-if="columns[24].visible" />
        <el-table-column label="质保期(天)" align="center" prop="warrantyPeriod" v-if="columns[25].visible" />
        <el-table-column label="内部合同号" align="center" prop="internalContractCode" v-if="columns[26].visible" />
        <el-table-column label="外部合同号" align="center" prop="externalContractCode" v-if="columns[27].visible" />
        <el-table-column label="订单号" align="center" prop="orderContractCode" v-if="columns[28].visible" />
        <el-table-column label="项目号" align="center" prop="projectContractCode" v-if="columns[29].visible" />
        <el-table-column label="发货/交货期" align="center" prop="deliveryStart" v-if="columns[30].visible" />
        <el-table-column label="质保期描述" align="center" prop="warrantyPeriodDescription" v-if="columns[31].visible" />
        <el-table-column label="交货地点" align="center" prop="deliveryLocation" v-if="columns[32].visible" />
        <el-table-column label="运输方式" align="center" prop="shipMethod" v-if="columns[33].visible" />
        <el-table-column label="合同税率" align="center" prop="taxRate" v-if="columns[34].visible" />
        <el-table-column label="签订地点" align="center" prop="signingPlace" v-if="columns[35].visible" />
        <el-table-column label="合同物料备注" align="center" prop="materialRemark" v-if="columns[36].visible" />
        <el-table-column label="合同模板标识" align="center" prop="contractTemplateFlag" v-if="columns[37].visible" />
        <el-table-column label="合同大写金额" align="center" prop="capitalizedAmount" v-if="columns[38].visible" />
        <el-table-column label="备注" align="center" prop="remark" v-if="columns[39].visible" />
        <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-tooltip content="修改" placement="top">
              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['oa/erp:contractChangeInfo:edit']"></el-button>
            </el-tooltip>
            <el-tooltip content="删除" placement="top">
              <el-button
                link
                type="primary"
                icon="Delete"
                @click="handleDelete(scope.row)"
                v-hasPermi="['oa/erp:contractChangeInfo:remove']"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
    </el-card>
    <!-- 添加或修改合同变更信息对话框 -->
    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
      <el-form ref="contractChangeInfoFormRef" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="合同变更ID" prop="contractChangeId">
          <el-input v-model="form.contractChangeId" placeholder="请输入合同变更ID" />
        </el-form-item>
        <el-form-item label="有无合同(1有 2无)" prop="contractFlag">
          <el-input v-model="form.contractFlag" placeholder="请输入有无合同(1有 2无)" />
        </el-form-item>
        <el-form-item label="客户合同编号" prop="customerContractCode">
          <el-input v-model="form.customerContractCode" placeholder="请输入客户合同编号" />
        </el-form-item>
        <el-form-item label="合同编号" prop="contractCode">
          <el-input v-model="form.contractCode" placeholder="请输入合同编号" />
        </el-form-item>
        <el-form-item label="合同名称" prop="contractName">
          <el-input v-model="form.contractName" placeholder="请输入合同名称" />
        </el-form-item>
        <el-form-item label="合同大类" prop="contractCategory">
          <el-input v-model="form.contractCategory" placeholder="请输入合同大类" />
        </el-form-item>
        <el-form-item label="业务方向" prop="businessDirection">
          <el-input v-model="form.businessDirection" placeholder="请输入业务方向" />
        </el-form-item>
        <el-form-item label="部门" prop="contractDeptId">
          <el-input v-model="form.contractDeptId" placeholder="请输入部门" />
        </el-form-item>
        <el-form-item label="合同签订日期" prop="contractDate">
          <el-date-picker clearable v-model="form.contractDate" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择合同签订日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="合同总价" prop="totalPrice">
          <el-input v-model="form.totalPrice" placeholder="请输入合同总价" />
        </el-form-item>
        <el-form-item label="甲方公司" prop="oneCustomerId">
          <el-input v-model="form.oneCustomerId" placeholder="请输入甲方公司" />
        </el-form-item>
        <el-form-item label="甲方授权代表" prop="oneRepresent">
          <el-input v-model="form.oneRepresent" placeholder="请输入甲方授权代表" />
        </el-form-item>
        <el-form-item label="甲方签字日期" prop="oneDate">
          <el-date-picker clearable v-model="form.oneDate" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择甲方签字日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="乙方公司" prop="twoCustomerId">
          <el-input v-model="form.twoCustomerId" placeholder="请输入乙方公司" />
        </el-form-item>
        <el-form-item label="乙方授权代表" prop="twoRepresent">
          <el-input v-model="form.twoRepresent" placeholder="请输入乙方授权代表" />
        </el-form-item>
        <el-form-item label="乙方签字日期" prop="twoDate">
          <el-date-picker clearable v-model="form.twoDate" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择乙方签字日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="合同负责人" prop="contractManagerId">
          <el-input v-model="form.contractManagerId" placeholder="请输入合同负责人" />
        </el-form-item>
        <el-form-item label="合同模板ID" prop="templateId">
          <el-input v-model="form.templateId" placeholder="请输入合同模板ID" />
        </el-form-item>
        <el-form-item label="附件ID" prop="ossId">
          <el-input v-model="form.ossId" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="付款账户ID" prop="paymentAccountId">
          <el-input v-model="form.paymentAccountId" placeholder="请输入付款账户ID" />
        </el-form-item>
        <el-form-item label="付款方式" prop="paymentMethod">
          <el-input v-model="form.paymentMethod" placeholder="请输入付款方式" />
        </el-form-item>
        <el-form-item label="签字合同附件" prop="signatureAppendix">
          <el-input v-model="form.signatureAppendix" placeholder="请输入签字合同附件" />
        </el-form-item>
        <el-form-item label="质保期(天)" prop="warrantyPeriod">
          <el-input v-model="form.warrantyPeriod" placeholder="请输入质保期(天)" />
        </el-form-item>
        <el-form-item label="内部合同号" prop="internalContractCode">
          <el-input v-model="form.internalContractCode" placeholder="请输入内部合同号" />
        </el-form-item>
        <el-form-item label="外部合同号" prop="externalContractCode">
          <el-input v-model="form.externalContractCode" placeholder="请输入外部合同号" />
        </el-form-item>
        <el-form-item label="订单号" prop="orderContractCode">
          <el-input v-model="form.orderContractCode" placeholder="请输入订单号" />
        </el-form-item>
        <el-form-item label="项目号" prop="projectContractCode">
          <el-input v-model="form.projectContractCode" placeholder="请输入项目号" />
        </el-form-item>
        <el-form-item label="发货/交货期" prop="deliveryStart">
          <el-input v-model="form.deliveryStart" placeholder="请输入发货/交货期" />
        </el-form-item>
        <el-form-item label="质保期描述" prop="warrantyPeriodDescription">
          <el-input v-model="form.warrantyPeriodDescription" placeholder="请输入质保期描述" />
        </el-form-item>
        <el-form-item label="交货地点" prop="deliveryLocation">
          <el-input v-model="form.deliveryLocation" placeholder="请输入交货地点" />
        </el-form-item>
        <el-form-item label="运输方式" prop="shipMethod">
          <el-input v-model="form.shipMethod" placeholder="请输入运输方式" />
        </el-form-item>
        <el-form-item label="合同税率" prop="taxRate">
          <el-input v-model="form.taxRate" placeholder="请输入合同税率" />
        </el-form-item>
        <el-form-item label="签订地点" prop="signingPlace">
          <el-input v-model="form.signingPlace" placeholder="请输入签订地点" />
        </el-form-item>
        <el-form-item label="合同物料备注" prop="materialRemark">
          <el-input v-model="form.materialRemark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="合同模板标识" prop="contractTemplateFlag">
          <el-input v-model="form.contractTemplateFlag" placeholder="请输入合同模板标识" />
        </el-form-item>
        <el-form-item label="合同大写金额" prop="capitalizedAmount">
          <el-input v-model="form.capitalizedAmount" placeholder="请输入合同大写金额" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="ContractChangeInfo" lang="ts">
import {
  listContractChangeInfo,
  getContractChangeInfo,
  delContractChangeInfo,
  addContractChangeInfo,
  updateContractChangeInfo
} from '@/api/oa/erp/contractChangeInfo';
import { ContractChangeInfoVO, ContractChangeInfoQuery, ContractChangeInfoForm } from '@/api/oa/erp/contractChangeInfo/types';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const contractChangeInfoList = ref<ContractChangeInfoVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);

const queryFormRef = ref<ElFormInstance>();
const contractChangeInfoFormRef = ref<ElFormInstance>();

const dialog = reactive<DialogOption>({
  visible: false,
  title: ''
});

// 列显隐信息
const columns = ref<FieldOption[]>([
  { key: 0, label: `变更信息快照ID`, visible: true },
  { key: 1, label: `租户编号`, visible: true },
  { key: 2, label: `合同变更ID`, visible: true },
  { key: 3, label: `有无合同(1有 2无)`, visible: true },
  { key: 4, label: `客户合同编号`, visible: true },
  { key: 5, label: `合同编号`, visible: true },
  { key: 6, label: `合同名称`, visible: true },
  { key: 7, label: `合同大类`, visible: true },
  { key: 8, label: `合同类型`, visible: true },
  { key: 9, label: `业务方向`, visible: true },
  { key: 10, label: `部门`, visible: true },
  { key: 11, label: `合同签订日期`, visible: true },
  { key: 12, label: `合同总价`, visible: true },
  { key: 13, label: `甲方公司`, visible: true },
  { key: 14, label: `甲方授权代表`, visible: true },
  { key: 15, label: `甲方签字日期`, visible: true },
  { key: 16, label: `乙方公司`, visible: true },
  { key: 17, label: `乙方授权代表`, visible: true },
  { key: 18, label: `乙方签字日期`, visible: true },
  { key: 19, label: `合同负责人`, visible: true },
  { key: 20, label: `合同模板ID`, visible: true },
  { key: 21, label: `附件ID`, visible: true },
  { key: 22, label: `付款账户ID`, visible: true },
  { key: 23, label: `付款方式`, visible: true },
  { key: 24, label: `签字合同附件`, visible: true },
  { key: 25, label: `质保期(天)`, visible: true },
  { key: 26, label: `内部合同号`, visible: true },
  { key: 27, label: `外部合同号`, visible: true },
  { key: 28, label: `订单号`, visible: true },
  { key: 29, label: `项目号`, visible: true },
  { key: 30, label: `发货/交货期`, visible: true },
  { key: 31, label: `质保期描述`, visible: true },
  { key: 32, label: `交货地点`, visible: true },
  { key: 33, label: `运输方式`, visible: true },
  { key: 34, label: `合同税率`, visible: true },
  { key: 35, label: `签订地点`, visible: true },
  { key: 36, label: `合同物料备注`, visible: true },
  { key: 37, label: `合同模板标识`, visible: true },
  { key: 38, label: `合同大写金额`, visible: true },
  { key: 39, label: `备注`, visible: true },
  { key: 40, label: `删除标志`, visible: true },
  { key: 41, label: `创建部门`, visible: true },
  { key: 42, label: `创建人`, visible: true },
  { key: 43, label: `创建时间`, visible: true },
  { key: 44, label: `更新人`, visible: true },
  { key: 45, label: `更新时间`, visible: true }
]);

const initFormData: ContractChangeInfoForm = {
  changeInfoId: undefined,
  contractChangeId: undefined,
  contractFlag: undefined,
  customerContractCode: undefined,
  contractCode: undefined,
  contractName: undefined,
  contractCategory: undefined,
  contractType: undefined,
  businessDirection: undefined,
  contractDeptId: undefined,
  contractDate: undefined,
  totalPrice: undefined,
  oneCustomerId: undefined,
  oneRepresent: undefined,
  oneDate: undefined,
  twoCustomerId: undefined,
  twoRepresent: undefined,
  twoDate: undefined,
  contractManagerId: undefined,
  templateId: undefined,
  ossId: undefined,
  paymentAccountId: undefined,
  paymentMethod: undefined,
  signatureAppendix: undefined,
  warrantyPeriod: undefined,
  internalContractCode: undefined,
  externalContractCode: undefined,
  orderContractCode: undefined,
  projectContractCode: undefined,
  deliveryStart: undefined,
  warrantyPeriodDescription: undefined,
  deliveryLocation: undefined,
  shipMethod: undefined,
  taxRate: undefined,
  signingPlace: undefined,
  materialRemark: undefined,
  contractTemplateFlag: undefined,
  capitalizedAmount: undefined,
  remark: undefined
};
const data = reactive<PageData<ContractChangeInfoForm, ContractChangeInfoQuery>>({
  form: { ...initFormData },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    contractChangeId: undefined,
    contractFlag: undefined,
    customerContractCode: undefined,
    contractCode: undefined,
    contractName: undefined,
    contractCategory: undefined,
    contractType: undefined,
    businessDirection: undefined,
    contractDeptId: undefined,
    contractDate: undefined,
    totalPrice: undefined,
    oneCustomerId: undefined,
    oneRepresent: undefined,
    oneDate: undefined,
    twoCustomerId: undefined,
    twoRepresent: undefined,
    twoDate: undefined,
    contractManagerId: undefined,
    templateId: undefined,
    ossId: undefined,
    paymentAccountId: undefined,
    paymentMethod: undefined,
    signatureAppendix: undefined,
    warrantyPeriod: undefined,
    internalContractCode: undefined,
    externalContractCode: undefined,
    orderContractCode: undefined,
    projectContractCode: undefined,
    deliveryStart: undefined,
    warrantyPeriodDescription: undefined,
    deliveryLocation: undefined,
    shipMethod: undefined,
    taxRate: undefined,
    signingPlace: undefined,
    materialRemark: undefined,
    contractTemplateFlag: undefined,
    capitalizedAmount: undefined,
    params: {}
  },
  rules: {}
});

const { queryParams, form, rules } = toRefs(data);

/** 查询合同变更信息列表 */
const getList = async () => {
  loading.value = true;
  const res = await listContractChangeInfo(queryParams.value);
  contractChangeInfoList.value = res.rows;
  total.value = res.total;
  loading.value = false;
};

/** 取消按钮 */
const cancel = () => {
  reset();
  dialog.visible = false;
};

/** 表单重置 */
const reset = () => {
  form.value = { ...initFormData };
  contractChangeInfoFormRef.value?.resetFields();
};

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
};

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields();
  handleQuery();
};

/** 多选框选中数据 */
const handleSelectionChange = (selection: ContractChangeInfoVO[]) => {
  ids.value = selection.map((item) => item.changeInfoId);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
};

/** 新增按钮操作 */
const handleAdd = () => {
  reset();
  dialog.visible = true;
  dialog.title = '添加合同变更信息';
};

/** 修改按钮操作 */
const handleUpdate = async (row?: ContractChangeInfoVO) => {
  reset();
  const _changeInfoId = row?.changeInfoId || ids.value[0];
  const res = await getContractChangeInfo(_changeInfoId);
  Object.assign(form.value, res.data);
  dialog.visible = true;
  dialog.title = '修改合同变更信息';
};

/** 提交按钮 */
const submitForm = () => {
  contractChangeInfoFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      buttonLoading.value = true;
      if (form.value.changeInfoId) {
        await updateContractChangeInfo(form.value).finally(() => (buttonLoading.value = false));
      } else {
        await addContractChangeInfo(form.value).finally(() => (buttonLoading.value = false));
      }
      proxy?.$modal.msgSuccess('操作成功');
      dialog.visible = false;
      await getList();
    }
  });
};

/** 删除按钮操作 */
const handleDelete = async (row?: ContractChangeInfoVO) => {
  const _changeInfoIds = row?.changeInfoId || ids.value;
  await proxy?.$modal.confirm('是否确认删除合同变更信息编号为"' + _changeInfoIds + '"的数据项？').finally(() => (loading.value = false));
  await delContractChangeInfo(_changeInfoIds);
  proxy?.$modal.msgSuccess('删除成功');
  await getList();
};

/** 导出按钮操作 */
const handleExport = () => {
  proxy?.download(
    'oa/erp/contractChangeInfo/export',
    {
      ...queryParams.value
    },
    `contractChangeInfo_${new Date().getTime()}.xlsx`
  );
};

onMounted(() => {
  getList();
});
</script>
