tenant-Platform/src/views/quoteConfig/costManagement.vue

<template>
  <div>
    <PageMain class="vh100">
      <SearchForm :fields="fields" isOffset :formInline="formInline" :onSearch="agreementQuery" :onReset="resetForm" />
      <ComplexTable :tableData="tableData" :columns="columns" :showIndex="false" :columnwidth="200" :showSelect="true"
        :pageInfo="pageInfo" @getList="getList" rowKey="costId" @selectionChange="selectionChange"
        uniqueIdName="costId">
        <template v-slot:table-title-btn>
          <el-button type="primary" @click="agreementSelection()">
            添加费用
            <template #icon>
              <el-icon>
                <Plus />
              </el-icon>
            </template>
          </el-button>
          <el-dropdown placement="bottom-start">
            <el-button> 批量管理<el-icon>
                <arrow-down />
              </el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item :disabled="!sysUpAndDownList.length" @click="handleCopy()">批量复制</el-dropdown-item>
                <el-dropdown-item :disabled="!sysUpAndDownList.length"
                  @click="handleUpdateValidDate()">批量设置有效期</el-dropdown-item>
                <el-dropdown-item :disabled="!sysUpAndDownList.length"
                  @click="handleUpdateCostRatio()">批量设置比例</el-dropdown-item>
                <el-dropdown-item :disabled="!sysUpAndDownList.length" @click="batchDel">删除</el-dropdown-item>
                <el-dropdown-item :disabled="!sysUpAndDownList.length" @click="batchdisable">禁用</el-dropdown-item>
                <el-dropdown-item :disabled="!sysUpAndDownList.length" @click="batchenable">启用</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
        <template v-slot:operation="scope">
          <el-button type="primary" link @click="agreemenUpdate(scope.operationData)"> 编辑
          </el-button>
          <el-button type="primary" link @click="operatorTrajectoryRef.operAtorTrajectory(scope.operationData.costId)">
            查看轨迹
          </el-button>
          <el-dropdown placement="bottom-start" trigger="click">
            <span class="el-dropdown-link">
              更 多
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="enable(scope.operationData.costId)">启用</el-dropdown-item>
                <el-dropdown-item @click="disable(scope.operationData.costId)">禁用</el-dropdown-item>
                <el-dropdown-item @click="del(scope.operationData.costId)">删除</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </ComplexTable>
    </PageMain>
    <el-dialog :close-on-click-modal="false" v-model="agreementSelectionVisible" title="选择协议" width="50%">
      <div class="Selection flex ">
        <div class="agreement flex f-c">
          <div class="flex a-c">
            <el-input v-model="agreementQueryName" style="width: 240px;margin-right: 10px;"
              placeholder="输入协议名称，简称，编码查找" />
            <el-button type="primary" @click="agreement">查询</el-button>
          </div>
          <div class="flex f-c m-top-20" style="max-height: 400px;overflow-y: auto;">
            <div class="agreementItem flex f-c " :class="{ active: agritem.id == AgreementId }"
              v-for="(agritem, agrindex) in agreementList" :key="agrindex" @click="ItemClick(agritem)">
              <span class="m-btn-10">{{ agritem.agreementCode }}</span>
              <span>{{ agritem.agreementTitle }}-{{ agritem.agreementAbbreviation }}-{{ agritem.agreementName }}</span>
            </div>
          </div>
        </div>
        <div class="rule flex f-c">
          <span class="strong">承保规则</span>
          <div class="flex f-c m-top-20" style="max-height: 400px;overflow-y: auto;">
            <el-radio-group v-model="ruleId">
              <div class="flex f-c  ">
                <el-radio :value="item.id" v-for="(item, index) in ruleList" :key="index" @change="ruleItemclick"
                  style="margin: 20px 0;">
                  <p class="white-space">{{ item.ruleDescription }}</p>
                </el-radio>
              </div>
            </el-radio-group>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button class="border-[#0083FF] color-[#0083FF]" plain
            @click="agreementSelectionVisible = false">取消</el-button>
          <el-button type="primary" @click="agreementSelectionConfirm" :disabled="!ruleInfo">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" v-model="copyDialog2" title="批量设置有效期" width="500">
      <el-form>
        <el-form-item label="开始时间">
          <el-date-picker v-model="effectiveTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" />
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker v-model="failureTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" />
        </el-form-item>
      </el-form>
      <template #footer>
        <autoLoadingButton type="primary" :on-click="submitUpdate">确定</autoLoadingButton>
      </template>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" v-model="copyDialog3" title="批量设置比例" width="1000">
      <el-form :model="costRatioForm" label-width="120px" inline>
        <el-form-item label="操作类型" class="w-full">
          <el-radio-group v-model="costRatioForm.operationType">
            <el-radio value="ADD" size="large">增加</el-radio>
            <el-radio value="SUBTRACT" size="large">减少</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="交强入口比例">
          <el-input-number v-model="costRatioForm.jqInletRatio" :min="0" :max="100" :precision="2" :step="1" />
        </el-form-item>
        <el-form-item label="商业入口比例">
          <el-input-number v-model="costRatioForm.syInletRatio" :min="0" :max="100" :precision="2" :step="1" />
        </el-form-item>
        <el-form-item label="驾意入口比例">
          <el-input-number v-model="costRatioForm.jyInletRatio" :min="0" :max="100" :precision="2" :step="1" />
        </el-form-item>
        <el-form-item label="交强出口比例">
          <el-input-number v-model="costRatioForm.jqExportRatio" :min="0" :max="100" :precision="2" :step="1" />
        </el-form-item>
        <el-form-item label="商业出口比例">
          <el-input-number v-model="costRatioForm.syExportRatio" :min="0" :max="100" :precision="2" :step="1" />
        </el-form-item>
        <el-form-item label="驾意出口比例">
          <el-input-number v-model="costRatioForm.jyExportRatio" :min="0" :max="100" :precision="2" :step="1" />
        </el-form-item>
      </el-form>
      <template #footer>
        <autoLoadingButton type="primary" :on-click="submitUpdate1">确定</autoLoadingButton>
      </template>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" v-model="copyDialog" title="复制" width="880">
      <el-form inline>
        <el-form-item label="协议">
          <el-select style="width:200px" v-model="agreementId" placeholder="请选择协议" @change="changeAgreement" filterable>
            <el-option v-for="item in agreementList1" :key="item.id" :value="item.id"
              :label="item.agreementTitle"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="规则">
          <el-select style="width:200px" :disabled="!agreementId" v-model="coverRuleId" placeholder="请选择规则">
            <el-option v-for="(item, index) in rulesList" :key="item.id" :value="item.id"
              :label="item.inputDescription"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="险种">
          <el-select style="width:200px" v-model="productId" placeholder="请选择险种">
            <el-option v-for="item in insurance_type" :key="item.id" :value="item.value"
              :label="item.label"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="costitemCopy">确定</el-button>
      </template>
    </el-dialog>
    <!-- 规则费用抽屉组件 -->
    <ruleFeeDialog v-if="ruleFeeVisible" :ruleFeeVisible="ruleFeeVisible" :agreementInfo="AgreementInfo"
      :RulesInfo="ruleInfo" @save="ruleFeeSave" @cancel="ruleFeeVisible = false" :handlingFee="handlingFeeInfo" />
    <!-- 规则费用编辑组件 -->
    <ruleFeeDialogEdit :ruleFeeVisible="ruleFeeEditVisible" :headerTitle="ruleFeeHeaderTitle" :isHideFoot="true"
      :agreementInfo="AgreementInfo" :RulesInfo="ruleInfo" :costitemEditInfo="costitemEditInfo" @save="ruleFeeEditSave"
      @cancel="ruleFeeEditVisible = false" />
    <operatorTrajectory ref="operatorTrajectoryRef" />
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus'
import { loadDicts, getDict } from '@/utils/composables/dictService';//字典组件
import ruleFeeDialog from "./agreement/components/ruleFeeDialog.vue";
import ruleFeeDialogEdit from "./agreement/components/ruleFeeDialogEdit.vue";
import autoLoadingButton from "./agreement/components/autoLoadingButton.vue";

import operatorTrajectory from "./agreement/components/operatorTrajectory.vue";
const operatorTrajectoryRef = ref(null)

import api from '@/api';
interface PageInfo {
  pageNum: number;
  pageSize: number;
  sizes: number[];
  total: number;
}
onBeforeMount(async () => {
  await loadDicts(['valid_status', 'is_enable', 'audit_status', 'insurance_type']);//获取多个字典
  if (id.value) {
    formInline.agreement = id.value;
  }
  findpage();//列表数据
  getDeptTree();
  agreement();
  initCompany();
  valid_status.value = getDict('valid_status');//生效状态
  is_enable.value = getDict('is_enable');//协议状态
  insurance_type.value = getDict('insurance_type')
  audit_status.value = getDict('audit_status')

});
const tableData = ref([
]);
const agreementQueryName = ref();//选择协议查询
const agreementList = ref();//协议列表
const sysUpAndDownList = ref<string[]>([])//选中id
const deptOptions = ref()//机构数据
const insurance_type = ref();
const valid_status = ref();
const audit_status = ref();
const is_enable = ref();
const route = useRoute();
const router = useRouter();
const id = ref(route.query.id as string);//id参数
const pageInfo = ref({
  pageNum: 1,
  pageSize: 20,
  sizes: [10, 20, 30, 40, 50],
  total: 100,
});
const formInline = reactive({
  agreement: '',//协议信息
  productId: "",//归属
  rulesName: '',//保险公司id
  costRules: [],//协议类型
  agreementStatus: "",//有效状态
  auditStatus: "",//协议状态
  validState: "",
  effectiveTime: [],
  failureTime: [],
  updateTimeArr: [],
  companyId: [],
  contactPerson: "",
})

// 保险公司
let companyOption = ref([])
const initCompany = () => {
  // api.projectApi.getCompanyList().then(res => {
  api.insuranceApi.leftList('').then((res: any) => {
    if (res.code == 200) {
      companyOption.value = res.data.map(item => {
        return {
          label: item.name,
          value: item.id
        }
      })
    } else {
      ElMessage({
        message: res.msg,
        type: 'warning'
      })
    }
  })
}

//表格字段数据
const fields = ref([
  { label: "所属协议", model: "agreement", type: "input", placeholder: "输入协议号，名称，简称查找" },
  {
    label: "险种", model: "productId", type: "select", options: insurance_type,
  },
  {
    label: "承保规则", model: "rulesName", type: "input", placeholder: "输入业务规则查找",
  },
  {
    label: "费用描述", model: "costRules", type: "inputTag", placeholder: "输入费用描述关键字查找",
  },
  {
    label: "费用状态", model: "agreementStatus", type: "select", placeholder: "选择状态", options: is_enable,
  },
  {
    label: "审核状态", model: "auditStatus", type: "select", placeholder: "选择状态", options: audit_status,
  },
  {
    label: "有效状态", model: "validState", type: "select", placeholder: "请选择状态", options: valid_status,
  },
  {
    label: "生效时间", model: "effectiveTime", type: "date", dateType: "datetimerange", startplaceholder: "开始时间", endplaceholder: "结束时间",
    format: "YYYY-MM-DD HH:mm:ss", valueFormat: "YYYY-MM-DD HH:mm:ss", timeFormat: "HH:mm:ss",
    onChange: (value: any) => {
      console.log(value)
      formInline.effectiveTime = value;
    }
  },
  {
    label: "失效时间", model: "failureTime", type: "date", dateType: "datetimerange", startplaceholder: "开始时间", endplaceholder: "结束时间",
    format: "YYYY-MM-DD HH:mm:ss", valueFormat: "YYYY-MM-DD HH:mm:ss", timeFormat: "HH:mm:ss",
    onChange: (value: any) => {
      formInline.failureTime = value;
    }
  },
  {
    label: "保险公司", model: "companyId", type: "select", placeholder: "选择保险公司", options: companyOption, filterable: true
  },
  {
    label: "对接人", model: "contactPerson", type: "input", placeholder: "输入对接人",
  },
  {
    label: "修改时间", model: "updateTimeArr", type: "date", dateType: "datetimerange",valueFormat:"YYYY-MM-DD HH:mm:ss", startplaceholder: "开始时间", endplaceholder: "结束时间",
    onChange: (value: any) => {
      formInline.updateTimeArr = value;
    }
  },
]);

//费用数据查询
function findpage(newCostIds = []) {
  let params = {
    pages: pageInfo.value.pageNum, size: pageInfo.value.pageSize, ...formInline
  }
  if (newCostIds.length) params = { pages: 1, size: newCostIds.length, newCostIds }
  api.agreementApi.queryByFeePage(params).then((res: any) => {
    if (res.code == '200') {
      tableData.value = res.data.records;
      pageInfo.value.pageNum = res.data.current;
      pageInfo.value.total = res.data.total;
    }
  });
}
//协议列表查询
function agreement() {
  api.agreementApi.agreementList({ pages: pageInfo.value.pageNum, size: 99999, searchValue: agreementQueryName.value }).then((res: any) => {
    if (res.code == '200') {
      agreementList.value = res.data.records;
    } else {
    }
  });
}
const columns = [
  { prop: "companyName", label: "保险公司", width: '120', },
  {
    prop: "agreementAbbreviation", label: "协议信息", width: '300',
    formatter: (row: any) => {
      return `${row.agreementCode}\n${row.agreementTitle}-${row.agreementAbbreviation}-${row.agreementName ?? ''}`
    }
  },
  {
    prop: "ruleDescription", label: "承保规则", width: '500',
  },
  { prop: "productName", label: "险种", width: '120', },
  { prop: "effectiveTime", label: "生效时间", width: '200' },
  { prop: "failureTime", label: "失效时间", width: '200' },
  {
    prop: "costDescribe", label: "费用描述", width: '500',
  },
  {
    prop: "costRules", label: "费用规则", width: '500',
  },
  { prop: "updateTime", label: "修改时间", width: '200' },
  {
    prop: "ruleConditions", label: "交强费用", width: '300', formatter: (row: any) => {
      let info = row.ruleConditions.find((val: any) => val.costType == '交强险');
      if (info) {
        return `入口：${info.inlet.toFixed(2)}% 出口：${info.export.toFixed(2)}%\n加投：${info.addThrow.toFixed(2)}%`
      } else {
        return '-';
      }
    }
  },
  {
    prop: "ruleConditions", label: "商业费用", width: '300', formatter: (row: any) => {
      let info = row.ruleConditions.find((val: any) => val.costType == '商业险');
      if (info) {
        return `入口：${info.inlet.toFixed(2)}% 出口：${info.export.toFixed(2)}%\n加投：${info.addThrow.toFixed(2)}%`
      } else {
        return '-';
      }
    }
  },
  {
    prop: "ruleConditions", label: "驾意险费用", width: '300', formatter: (row: any) => {
      let info = row.ruleConditions.find((val: any) => val.costType == '驾意险');
      if (info) {
        return `入口：${info.inlet.toFixed(2)}% 出口：${info.export.toFixed(2)}%\n加投：${info.addThrow.toFixed(2)}%`
      } else {
        return '-';
      }
    }
  },
  {
    prop: "isEnabled", label: "费用状态", width: '100', component: "Tag",
    formatter: (row: any) => {
      let name = getDict('is_enable').find(val => val.value == row.isEnabled).label
      if (name) {
        return { type: 'primary', text: name };
      }
    }
  },
  {
    prop: "approved", label: "审核状态", width: '120', component: "Tag",
    formatter: (row: any) => {
      let name = getDict('audit_status').find(val => val.value == row.approved).label
      if (name) {
        return { type: 'warning', text: name };
      }
    }
  },
  { prop: "dockingPerson", label: "对接人", width: '100' },


];
//分页事件
function getList(item: PageInfo) {
  pageInfo.value.pageNum = item.pageNum;
  pageInfo.value.pageSize = item.pageSize;
  findpage();

};

const agreemenUpdate = async (item: any) => {
  let obj = agreementList.value.find(sub => sub.agreementCode === item.agreementCode)
  ruleFeeHeaderTitle.value = item.productName;
  AgreementInfo.value = { agreementCode: item.agreementCode, agreementTitle: item.agreementAbbreviation, companyId: obj?.companyId };
  ruleInfo.value = { ruleDescription: item.ruleDescription };
  await regionLicenseRegion('0');//车牌地区
  await regionLicenseNumber('14');//车牌号
  await api.agreementApi.AgreementFeeById(item.costId).then((res: any) => {
    if (res.code == '200') {
      res.data.ruleConditions = processArray(res.data.ruleConditions);
      costitemEditInfo.value = res.data;
      ruleFeeEditVisible.value = true;
    }
  });
}
const ruleFeeEditSave = (data: object) => {
  api.agreementApi.AgreementFeeupdate(data).then((res: any) => {
    if (res.code == '200') {
      ElMessage({
        type: 'success',
        message: res.msg,
        plain: true,
      })
      ruleFeeEditVisible.value = false;
      findpage();
    } else {
    }
  });
}
//添加车牌和车牌地区
const processArray = (array: any[]) => {
  return array.map((val) => {
    switch (val.attrType) {
      case 'inputNumber':
      case 'datetime':
        if (!val.operator) {
          val.operator = '1'; // 设置默认值
        }
        break;
      default:
        break;
    }
    if (val.attrCode == 'LicenseNo') {
      val.dictLabal = licensePlateNumber.value;
    }
    if (val.attrCode == 'LicenseArea') {
      val.dictLabal = licensePlateRegion.value;
    }
    return val;
  });
};
const licensePlateRegion = ref();//车牌地区
const licensePlateNumber = ref();//车牌号
const regionLicenseRegion = (value: string) => {
  api.agreementApi.getAreaLicense(value).then((res: any) => {
    if (res.code == '200') {
      let data: any = [];
      res.data.map((val: any) => {
        data.push({
          code: val.areaNumber,
          name: val.license,
        })
        return val;
      })
      licensePlateRegion.value = data;
    } else {
    }
  });
}
const regionLicenseNumber = (value: string) => {
  api.agreementApi.getAreaLicense(value).then((res: any) => {
    if (res.code == '200') {
      let data: any = [];
      res.data.map((val: any) => {
        data.push({
          code: val.areaNumber,
          name: val.license,
        })
        return val;
      })
      licensePlateNumber.value = data;
    } else {
    }
  });
}
//多选事件
const selectionChange = (val: any) => {
  sysUpAndDownList.value = val;
}
//禁用
const disable = (value: string) => {
  console.log(value)
  ElMessageBox.confirm(
    '确定要禁用该协议吗，禁用后，该协议不在支持报价出单，并且已核保待缴费，待支付的订单，都将失效，请确认是否禁用？',
    '禁用协议',
    {
      confirmButtonText: '确定禁用',
      type: 'error',
      center: true,
      confirmButtonClass: 'el-button--danger',
    }
  )
    .then(() => {
      sysUpAndDown(false, [value]);
    })
}
//启用
const enable = (value: string) => {
  sysUpAndDown(true, [value]);
}
const del = (value: string) => {
  ElMessageBox.confirm(
    '确定要删除该协议吗，删除后，该协议不在支持报价出单，并且已核保待缴费，待支付的订单，都将失效，请确认是否删除？',
    '删除协议',
    {
      confirmButtonText: '确定删除',
      type: 'error',
      center: true,
      confirmButtonClass: 'el-button--danger',
    }
  )
    .then(() => {
      api.agreementApi.AgreementFeedeleteByIds([value]).then((res: any) => {
        if (res.code === 200) {
          findpage()
          ElMessage({
            type: 'success',
            message: res.msg,
            plain: true,
          })
        }
      });
    })
}
//批量删除
const batchDel = () => {
  ElMessageBox.confirm(
    '确定要删除该协议吗，删除后，该协议不在支持报价出单，并且已核保待缴费，待支付的订单，都将失效，请确认是否删除？',
    '删除协议',
    {
      confirmButtonText: '确定删除',
      type: 'error',
      center: true,
      confirmButtonClass: 'el-button--danger',
    }
  )
    .then(() => {
      api.agreementApi.deleteByIds(sysUpAndDownList.value).then((res: any) => {
        if (res.code == '200') {
          ElMessage({
            type: 'success',
            message: res.msg,
            plain: true,
          })
          router.push({
            name: 'reload',
          })
        }
      });
    })

}
//批量禁用
const batchdisable = () => {
  ElMessageBox.confirm(
    '确定要禁用该协议吗，禁用后，该协议不在支持报价出单，并且已核保待缴费，待支付的订单，都将失效，请确认是否禁用？',
    '禁用协议',
    {
      confirmButtonText: '确定禁用',
      type: 'error',
      center: true,
      confirmButtonClass: 'el-button--danger',
    }
  )
    .then(async () => {
      await sysUpAndDown(false, undefined);
    })
    .catch(() => {
    })


}
//批量启用
const batchenable = async () => {
  await sysUpAndDown(true, undefined);
}
const agreementQuery = () => {
  findpage();
}
const sysUpAndDown = async (type: boolean, list?: string[]) => {
  await api.agreementApi.AgreementFeeEnableByIds(type, list ? list : sysUpAndDownList.value).then((res: any) => {
    if (res.code == '200') {
      findpage();
      ElMessage({
        type: 'success',
        message: '操作成功',
        plain: true,
      })
    }
  });
}
const resetForm = () => {
  formInline.agreement = '';//协议信息
  formInline.productId = "";//归属
  formInline.rulesName = '';//保险公司id
  formInline.costRules = '';//协议类型
  formInline.costRulesList = [];//协议类型
  formInline.agreementStatus = "";//有效状态
  formInline.auditStatus = "";//协议状态
  formInline.validState = "";
  formInline.effectiveTime = [];
  formInline.failureTime = [];
  formInline.companyId = [];
  formInline.contactPerson = "";
  formInline.updateTimeArr = [];
  findpage();
}
const getDeptTree = () => {
  api.institutionApi.institutionList({}).then((res: any) => {
    if (res.code == '200') {
      deptOptions.value = res.data;
    } else {
    }
  });
}
//选择协议弹窗
const agreementSelectionVisible = ref(false);
const ruleFeeVisible = ref(false);
const ruleFeeEditVisible = ref(false);//编辑弹窗
const ruleFeeHeaderTitle = ref();//编辑弹窗title
const costitemEditInfo = ref();//编辑对象
const AgreementInfo = ref();//协议对象
const ruleInfo = ref();//规则对象
const AgreementId = ref();//规则id
const ruleId = ref();//规则id
const ruleList = ref();//协议规则列表
const agreementSelection = () => {
  AgreementId.value = '';
  ruleList.value = []
  agreementSelectionVisible.value = true;
}
let handlingFeeInfo = ref({})

const ItemClick = (item: any) => {
  AgreementInfo.value = item;
  AgreementId.value = item.id;
  ruleId.value = '';
  api.agreementApi.agreementRulesList(AgreementId.value).then((res: any) => {
    if (res.code == '200') {
      ruleList.value = res.data;
    }
  });
  api.agreementApi.agreementGet(AgreementId.value).then((res: any) => {
    if (res.code == '200') {
      handlingFeeInfo.value = { jqEntranceFeeRatio: res.data.agreement.jqEntranceFeeRatio, syEntranceFeeRatio: res.data.agreement.syEntranceFeeRatio, jyEntranceFeeRatio: res.data.agreement.jyEntranceFeeRatio };
    } else {
    }
  });
}
//
const ruleItemclick = (value: string | number | boolean | undefined) => {
  let info = ruleList.value.find((val: any) => val.id == value);
  ruleInfo.value = info;
}
const agreementSelectionConfirm = () => {
  if (!AgreementId.value) {
    ElMessage.error('请选择协议')
    return
  }
  if (!ruleId.value) {
    ElMessage.error('请选择规则')
    return
  }
  agreementSelectionVisible.value = false;
  ruleFeeVisible.value = true;
}
//规则弹窗回调方法
const ruleFeeSave = (data: object) => {
  api.agreementApi.ptlAgreementCostsave(data).then((res: any) => {
    if (res.code == '200') {
      ElMessage({
        type: 'success',
        message: res.msg,
        plain: true,
      })
      ruleFeeVisible.value = false;
      findpage();
    } else {
      ElMessage({
        type: 'error',
        message: res.msg,
        plain: true,
      })
    }
  });
}

const copyDialog2 = ref(false)
const effectiveTime = ref()
const failureTime = ref()
const handleUpdateValidDate = () => {
  if (!sysUpAndDownList.value.length) {
    ElMessage.error('请选择费用')
    return
  }
  effectiveTime.value = ''
  failureTime.value = ''
  copyDialog2.value = true
}
const submitUpdate = () => {
  const params = {
    costIds: sysUpAndDownList.value,
    effectiveTime: effectiveTime.value,
    failureTime: failureTime.value,
  }
  api.agreementApi.agreementCostBatchUpdateValidDate(params).then((res: any) => {
    if (res.code == '200') {
      ElMessage.success('修改成功')
      copyDialog2.value = false
      findpage()
    }
  });
}

const copyDialog3 = ref(false)
const costRatioForm = ref({})
const handleUpdateCostRatio = () => {
  if (!sysUpAndDownList.value.length) {
    ElMessage.error('请选择费用')
    return
  }
  costRatioForm.value = {
    operationType: 'ADD',
    jqInletRatio: undefined,
    syInletRatio: undefined,
    jyInletRatio: undefined,
    jqExportRatio: undefined,
    syExportRatio: undefined,
    jyExportRatio: undefined,
  }
  copyDialog3.value = true
}
const submitUpdate1 = () => {
  const params = {
    costIds: sysUpAndDownList.value,
    ...costRatioForm.value
  }
  api.agreementApi.batchAdjustCostRatio(params).then((res: any) => {
    if (res.code == '200') {
      ElMessage.success('修改成功')
      copyDialog3.value = false
      findpage()
    }
  });
}

const copyDialog = ref(false)
const agreementId = ref('')
const coverRuleId = ref('')
const productId = ref('')
const companyId = ref('')
const agreementList1 = ref([])
const rulesList = ref([])
/** 复制操作处理：记录当前行的ID并打开复制确认对话框 */
const handleCopy = () => {
  agreementId.value = ''
  coverRuleId.value = ''
  openDialog()
}

const openDialog = () => {
  const params = { pages: 1, size: sysUpAndDownList.value.length, newCostIds: sysUpAndDownList.value }

  api.agreementApi.queryByFeePage(params).then((res: any) => {
    if (res.code == '200') {
      const companyIdList = Array.from(new Set(res.data.records.map(v => v.companyId)))
      if (companyIdList.length > 1) {
        ElMessage.error('请选择同一个公司的费用')
      } else {
        companyId.value = companyIdList[0]
        api.agreementApi.agreementList({ size: 10000, companyId: companyId.value }).then((res: any) => {
          if (res.code == '200') {
            agreementList1.value = res.data.records;
          }
        });
        copyDialog.value = true
      }
    }
  });
}

const changeAgreement = () => {
  api.agreementApi.agreementRulesList(agreementId.value).then((res: any) => {
    if (res.code == '200') {
      rulesList.value = res.data
    }
  });
}
//复制费用
const costitemCopy = () => {
  if (!agreementId.value) {
    ElMessage.warning('请选择协议')
    return
  }
  if (!coverRuleId.value) {
    ElMessage.warning('请选择规则')
    return
  }
  ElMessageBox.confirm(
    '确定要复制该费用，请确认是否复制？',
    '复制费用',
    {
      confirmButtonText: '确定复制',
      type: 'warning',
      center: true,
      confirmButtonClass: 'el-button--primary',
    }
  ).then(() => {
    const params = {
      costIds: sysUpAndDownList.value,
      agreementId: agreementId.value,
      coverRuleId: coverRuleId.value,
      productId: productId.value,
      productName: insurance_type.value.find(v => v.value === productId.value)?.label,
    }
    api.agreementApi.AgreementFeecopy(params).then((res: any) => {
      if (res.code == '200') {
        findpage(res.data);
        if(res.msg) ElMessage.warning(res.msg)
        if(!res.msg) ElMessage.success('复制成功')
        copyDialog.value = false
      }
    });
  })
}
</script>

<style lang="scss" scoped>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}

:deep(.el-dropdown-link) {
  display: flex;
  align-items: center;
  margin-left: 15px;
  color: var(--el-color-primary);
  cursor: pointer;
}

.el-inputs {
  width: 100% !important;
}

.Selection {
  border: 1px solid #dcdfe6;
  border-radius: 4px;

  .agreement {
    width: 40%;
    padding: 15px;
    border-right: 1px solid #dcdfe6;

    .agreementItem {
      padding: 10px;
      border-radius: 5px;

      &:hover {
        background: #f2f2f2;
      }
    }
  }

  .active {
    color: #1890ff;
    background: #f2f2f2;
  }

  .rule {
    width: 60%;
    padding: 15px;

    .white-space {
      display: inline-block;
      margin-bottom: 10px;
      white-space: normal;
    }
  }
}
</style>