tenant-Platform/src/views/quoteConfig/agreement/agreementDetails.vue

<!-- 模板区域 -->
<template>
  <div>
    <PageMain>
      <div class="headers">
        <div class="flex f-c a-start">
          <div class="flex j-s a-c" style="width: 100%;">
            <span class="title">{{ agreementInfo.agreementTitle }}</span>
            <div>
              <el-button type="default" @click="agreementAuth">协议授权</el-button>
              <el-button type="default" plain @click="agreementEdit">编辑</el-button>
              <el-dropdown trigger="click" @command="dropdownCommand" style="margin-left: 10px;">
                <el-button plain>
                  更多 <el-icon class="el-icon--right">
                    <CaretBottom />
                  </el-icon></el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item command="启用" v-if="agreementInfo.isEnable == '1'">启用</el-dropdown-item>
                    <el-dropdown-item command="禁用" v-else>禁用</el-dropdown-item>
                    <el-dropdown-item command="删除">删除</el-dropdown-item>
                    <el-dropdown-item command="复制协议">复制协议</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
          <div style="margin-top: 10px;" class="flex">
            <el-tag type="primary" style="margin-right: 20px;">{{
              getDict('is_enable').find(val => val.value == agreementInfo.isEnable)?.label}}</el-tag>
            <el-tag type="success">{{getDict('valid_status').find(val => val.value == agreementInfo.validStatus)?.label
            }}</el-tag>
          </div>
        </div>
        <el-descriptions :column="3" style="margin-top: 10px;">
          <el-descriptions-item label="协议号：">{{ agreementInfo.agreementCode }}</el-descriptions-item>
          <el-descriptions-item label="协议名称：">{{ agreementInfo.agreementTitle }}</el-descriptions-item>
          <el-descriptions-item label="归属机构：">{{ agreementInfo.deptName }}</el-descriptions-item>
          <el-descriptions-item label="授权机构数量：">{{ authDeptlength }}</el-descriptions-item>
          <el-descriptions-item label="添加人：">
            {{ agreementInfo.createBy }}
          </el-descriptions-item>
          <el-descriptions-item label="添加时间：">
            {{ agreementInfo.createTime }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </PageMain>
    <PageMain class="agreement ">
      <el-tabs v-model="activeName" class="demo-tabs">
        <el-tab-pane label="协议信息" name="agreementInfo">
          <el-descriptions title="基本信息" class="m-top-20" :column="3">
            <el-descriptions-item label="协议名称：">{{ agreementInfo.agreementTitle
              }}</el-descriptions-item>
            <el-descriptions-item label="协议简称：">{{ agreementInfo.agreementAbbreviation
              }}</el-descriptions-item>
            <el-descriptions-item label="协议生效时间：">{{ agreementInfo.startDate }}</el-descriptions-item>
            <el-descriptions-item label="协议失效时间：">{{ agreementInfo.endDate }}</el-descriptions-item>
            <el-descriptions-item label="是否含增值税结算：">
              {{getDict('with_tax').find(val => val.value == agreementInfo.withTax)?.label}}

            </el-descriptions-item>
            <el-descriptions-item label="结算周期：">T{{ agreementInfo.moneyTime }} </el-descriptions-item>
            <el-descriptions-item label="协议描述：">{{ agreementInfo.agreementName }}</el-descriptions-item>
          </el-descriptions>
          <el-descriptions title="其他信息" class="m-top-20" :column="3">
            <el-descriptions-item label="协议归属：">{{ agreementInfo.deptName }} </el-descriptions-item>
            <el-descriptions-item label="保险公司："> {{ agreementInfo.company }}</el-descriptions-item>
            <el-descriptions-item label="协议类型：">{{getDict('agreement_type').find(val => val.value ==
              agreementInfo.agreementType)?.label}} </el-descriptions-item>

            <el-descriptions-item label="管理人："> {{ agreementInfo.managerName }}</el-descriptions-item>
            <el-descriptions-item label="对接人："> {{ agreementInfo.dockingPerson }} </el-descriptions-item>
            <el-descriptions-item label="对接人手机号："> {{ agreementInfo.dockingPhone }} </el-descriptions-item>
            <el-descriptions-item label="出单账号："> {{ agreementInfo.username }} </el-descriptions-item>
          </el-descriptions>
          <div v-if="agreementInfo.fileUrl">
            <span class="strong" style="font-size: 16px;color: #303133;">协议文件</span>
            <span class="strong m-top-20 m-btn-10" style="display: block;">协议费用政策告知单</span>
            <div class="agreementNotice flex a-c j-s">
              <div class="flex  a-c">
                <img src="../../../assets/images/pdf.png" alt="">
                <div class="flex f-c j-s">
                  <span>{{ agreementInfo.fileName }}</span>
                  <span>{{ agreementInfo.fileSize }}</span>
                </div>
              </div>
              <div class="fileBtn flex a-c">
                <el-upload :show-file-list="false" :auto-upload="false" accept=".pdf, .doc, .docx, .xls, .xlsx"
                  @change="uploadImage($event)" style="display: flex; align-items: center;">
                  <el-icon class="btn-icon">
                    <Refresh />
                  </el-icon>
                </el-upload>
                <el-icon class="btn-icon" @click="Fileonload(agreementInfo.fileUrl, agreementInfo.fileName)">
                  <Download />
                </el-icon>
              </div>
            </div>
          </div>

        </el-tab-pane>
        <el-tab-pane label="费用管理" name="costManagement">
          <span class="strong m-right-20">规则与费用</span>
          <el-button type="primary" @click="addUnderwritingRule" plain>
            添加承保规则
            <template #icon>
              <el-icon>
                <Plus />
              </el-icon>
            </template>
          </el-button>
          <div class="flex f-c  RuleContainer" v-if="RulesList">
            <div class="list-item" v-for="(item, index) in RulesList" :key="index">
              <div class="header-title flex f-c ">
                <div class="flex a-c j-s">
                  <div class="flex a-c">
                    <img src="../../../assets/images/fee.png" alt="">
                    <span style="margin-right: 30px;font-size: 16px;" class="strong m-left-10">承保规则一{{ index + 1
                    }}</span>
                  </div>
                  <div class="flex">
                    <el-button link type="primary" :icon="Delete" @click="ruleDel(item.id)">删除</el-button>
                    <el-button link type="primary" :icon="Edit" @click="ruleEdit(item.id)">编辑</el-button>
                    <el-button v-if="!item.ruleFeeShow" link type="default"
                      @click="item.ruleFeeShow = !item.ruleFeeShow">展开<el-icon class="m-left-10">
                        <ArrowDownBold />
                      </el-icon> </el-button>
                    <el-button v-else link type="default" @click="item.ruleFeeShow = !item.ruleFeeShow">收起<el-icon
                        class="m-left-10">
                        <ArrowUpBold />
                      </el-icon></el-button>
                  </div>
                </div>
                <p class=" m-top-10" style="font-size: 14px;letter-spacing: 2px;">规则描述：{{ item.ruleDescription }}</p>
              </div>
              <div class="header-content" v-if="item.ruleFeeShow">
                <el-button plain type="primary" @click=" ruleFeeAdd(item)" class="m-top-20 m-btn-20">添加费用
                  <template #icon>
                    <el-icon>
                      <Plus />
                    </el-icon>
                  </template>
                </el-button>
                <el-tabs v-model="item.ruleFeeActive" :tab-position="ruleFeePosition" class="ruleFee"
                  v-if="item.costVoList">
                  <el-tab-pane v-for="(costitem, costindex) in item.costVoList" :key="costindex"
                    :label="costitem.productName" :name="costitem.productName">
                    <span class="strong">{{ costitem.productName }}费用（{{ costitem.ptlAgreementCostVoList.length
                      }}条）</span>
                    <ComplexTable :tableData="costitem.ptlAgreementCostVoList" :columns="columns" :maxHeight="250"
                      :showIndex="false" :columnwidth="200" :showSelect="false">
                      <template v-slot:operation="scope">
                        <el-button type="primary" link
                          @click="costitemEdit(scope.operationData.id, item, index, costindex)"> 编辑
                        </el-button>
                        <el-button type="primary" link @click="handleCopy(scope.operationData)"> 复制
                        </el-button>
                        <el-button type="primary" link @click="costitemDel(scope.operationData.id)"> 删除
                        </el-button>
                      </template>
                    </ComplexTable>
                  </el-tab-pane>
                </el-tabs>
                <Empty v-else />
              </div>
            </div>
          </div>
          <Empty v-else />
        </el-tab-pane>
      </el-tabs>
    </PageMain>
    <el-drawer v-model="addUnderwritingRuleShow" :direction="direction"  size="50%">
      <template #header>
        <div>添加承保规则</div>
      </template>
      <template #default>
        <el-form :model="rulesAttrListInfo" ref="OperationFormRef" :rules="rulesAttrListInfoRules" label-width="110">
          <el-form-item prop="startTime" label="生效起始时间">
            <el-date-picker v-model="rulesAttrListInfo.startTime" value-format="YYYY-MM-DD HH:mm:ss" type="datetime"
              placeholder="生效起始时间" />
          </el-form-item>
          <el-form-item prop="endTime" label="生效终止时间">
            <el-date-picker v-model="rulesAttrListInfo.endTime" value-format="YYYY-MM-DD HH:mm:ss" type="datetime"
              placeholder="生效终止时间" />
          </el-form-item>
        </el-form>
        <div class="flex a-c j-s ">
          <span class="strong title" style="margin-right: 20px;">规则条件</span>
          <el-button type="primary" link @click="addRules">
            添加条件
            <template #icon>
              <el-icon>
                <Plus />
              </el-icon>
            </template>
          </el-button>
        </div>
        <!-- 规则选择容器 -->
        <rule-Condition-Container :rulesAttrList="rulesAttrListInfo.rulesAttrList" @Del="rulesAttrDel"
          @selectChange="rulesAttrselectChange" />
      </template>
      <template #footer>
        <div class="flex a-c j-c">
          <el-button @click="addUnderwritingRuleShow = false">取消</el-button>
          <el-button type="primary" @click="UnderwritingRuleSave">保存</el-button>
        </div>
      </template>
    </el-drawer>
    <!-- 协议授权弹窗 -->
    <auth-Drawer :Drawer="agreementAuthDrawer" @cancel="agreementAuthDrawer = false" @save="DrawerSave"
      @query="Drawerquery" @echoValue="echoValue" :deptlist="deptauthList" :checkedKeys="checkedKeys"
      :checkedIds="checkedIds"></auth-Drawer>
    <!-- 规则条件弹窗 -->
    <RuleCondition ref="RuleConditionRefs" :ruleConditionVisible="ruleConditionVisible"
      @cancel="ruleConditionVisible = false" @save="ruleConditionSave" :attrIdList="rulesAttrListInfo.rulesAttrList" />
    <!-- 规则费用抽屉组件 -->
    <ruleFeeDialog v-if="ruleFeeVisible" :ruleFeeVisible="ruleFeeVisible" :agreementInfo="agreementInfo"
      :RulesInfo="RulesInfo" @save="ruleFeeSave" @cancel="ruleFeeVisible = false" />
    <!-- 规则费用编辑组件 -->
    <ruleFeeDialogEdit :ruleFeeVisible="ruleFeeEditVisible" :headerTitle="ruleFeeHeaderTitle"
      :agreementInfo="agreementInfo" :RulesInfo="RulesInfo" :costitemEditInfo="costitemEditInfo" @save="ruleFeeEditSave"
      @cancel="ruleFeeEditVisible = false" />

    <el-dialog :close-on-click-modal="false" v-model="copyDialog" title="复制" width="800">
      <el-form inline>
        <el-form-item label="协议">
          <el-select style="width:300px" v-model="agreementId" placeholder="请选择协议" @change="changeAgreement" filterable>
            <el-option v-for="item in agreementList" :key="item.id" :value="item.id"
              :label="item.agreementTitle"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="规则">
          <el-select style="width:300px" :disabled="!agreementId" v-model="coverRuleId" placeholder="请选择规则">
            <el-option v-for="(item, index) in rulesList" :key="item.id" :value="item.id"
              :label="'承保规则一' + (index + 1)"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button size="small" type="primary" @click="costitemCopy">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<!-- 行为区域 -->
<script lang='ts' setup>
import api from '@/api';
import { CaretBottom } from '@element-plus/icons-vue'
import type { FormRules } from "element-plus";
import { ElMessage, ElMessageBox, DrawerProps, TabsInstance } from 'element-plus'
import { ref, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router';
import { loadDicts, getDict } from '@/utils/composables/dictService';//字典组件
import { Fileonload, formatFileSize, processFileName } from '@/utils/composables/fileProcessing';//文件处理工具
import authDrawer from "./components/agreementAuth.vue";
import ruleFeeDialog from "./components/ruleFeeDialog.vue";
import ruleFeeDialogEdit from "./components/ruleFeeDialogEdit.vue";
import { Delete, Edit } from '@element-plus/icons-vue'
interface Agreement {
  [key: string]: string | number; // 协议名称
}
const agreementInfo = ref<Agreement>({}); // 初始值为 null
const route = useRoute();
const router = useRouter();
const id = ref(route.query.id as string);//id参数
const activeName = ref('agreementInfo')//默认标签页
const authDeptlength = ref<number>(0);

let RuleConditionRefs = ref()
const addRules = () => {
  ruleConditionVisible.value = true
  RuleConditionRefs.value.ruleAttr(agreementInfo.value.companyId)
}

onBeforeMount(async () => {
  await loadDicts(['agreement_type', 'valid_status', 'is_enable', 'with_tax', 'audit_status']);//获取多个字典
  if (id.value) {
    detailsInfo();//协议信息
    agreementRulesList();//承保规则
    regionLicenseRegion('0');//车牌地区
    regionLicenseNumber('14');//车牌号
    rulesAttrListInfo.agreementId = id.value;//赋值协议id
  }
  if (route.query.from as string) {
    activeName.value = 'costManagement'
  }
})
//协议详情
const detailsInfo = () => {
  api.agreementApi.agreementGet(id.value).then((res: any) => {
    if (res.code == '200') {
      if (res.data.fileUrl) {
        res.data.agreement.fileName = processFileName(res.data.agreement.fileName)
        res.data.agreement.fileSize = formatFileSize(res.data.agreement.fileSize);
      }
      agreementInfo.value = res.data.agreement;

      authDeptlength.value = res.data.dept.length;
      imageUrl.value = res.data.agreement.fileUrl;
    } else {
    }
  });
}

//编辑跳转
const agreementEdit = () => {
  router.push({
    name: 'AgreementAdd',
    query: {
      id: id.value
    }
  })
}
//协议授权
//检索事件
const imageUrl = ref('');//协议文件
const agreementAuthDrawer = ref(false)//授权弹窗
const deptauthList = ref([]);//授权机构列表
const checkedKeys = ref<string[]>([])//授权机构回显数据
const checkedIds = ref<string[]>([])//授权机构回显id
const Drawerquery = (name: any) => {
  agreementAuth(name)
}
//全选赋值
const echoValue = (ids: any[]) => {
  checkedKeys.value = ids;
}
//授权保存
const DrawerSave = (list: any) => {
  api.agreementApi.authSave({ deptIds: list, id: id.value }).then((res: any) => {
    if (res.code == '200') {
      ElMessage({
        type: 'success',
        message: res.msg,
        plain: true,
      })
      agreementAuthDrawer.value = false;
    } else {
    }
  });
}
//协议授权机构获取
const agreementAuth = (deptName: any) => {
  let name = typeof deptName === 'string' ? deptName : '';
  api.agreementApi.agreementdeptTree(id.value, name).then((res: any) => {
    if (res.code == '200') {
      agreementAuthDrawer.value = true;
      deptauthList.value = res.data;
      checkedKeys.value = getUncheckedIds(res.data);
      checkedIds.value = getUncheckedIds(res.data);
    } else {
    }
  });
}
// 递归回显数据
function getUncheckedIds(data: any[]): string[] {
  let ids: string[] = [];

  data.forEach((item) => {
    if (item.isCheck === 1) {
      ids.push(item.id); // 如果 isCheck 为 0，添加 id
    }
    if (item.children && item.children.length > 0) {
      // 如果有子项，递归调用
      ids = ids.concat(getUncheckedIds(item.children));
    }
  });

  return ids;
}

//更多操作集合
const dropdownCommand = (e: any) => {
  console.log(e)
  switch (e) {
    case '启用':
      api.agreementApi.sysUpAndDown({ ids: [id.value], opType: '0' }).then((res: any) => {
        if (res.code == '200') {
          ElMessage({
            type: 'success',
            message: res.msg,
            plain: true,
          })
          router.push({
            name: 'reload',
          })
        } else {
        }
      });
      break;
    case '禁用':
      ElMessageBox.confirm(
        '确定要禁用该协议吗，禁用后，该协议不在支持报价出单，并且已核保待缴费，待支付的订单，都将失效，请确认是否禁用？',
        '禁用协议',
        {
          confirmButtonText: '确定禁用',
          type: 'error',
          center: true,
          confirmButtonClass: 'el-button--danger',
        }
      )
        .then(() => {
          api.agreementApi.sysUpAndDown({ ids: [id.value], opType: '1' }).then((res: any) => {
            if (res.code == '200') {
              ElMessage({
                type: 'success',
                message: res.msg,
                plain: true,
              })
              router.push({
                name: 'reload',
              })
            }
          });
        })

      break;
    case '删除':
      ElMessageBox.confirm(
        '确定要删除该协议吗，删除后，该协议不在支持报价出单，并且已核保待缴费，待支付的订单，都将失效，请确认是否删除？',
        '删除协议',
        {
          confirmButtonText: '确定删除',
          type: 'error',
          center: true,
          confirmButtonClass: 'el-button--danger',
        }
      )
        .then(() => {
          api.agreementApi.agreementDelete({ ids: [id.value] }).then((res: any) => {
            if (res.code == '200') {
              ElMessage({
                type: 'success',
                message: res.msg,
                plain: true,
              })
              router.back()
            }
          });
        })
      break;
    case '复制协议':
      router.push({
        name: 'AgreementCopy',
        query: {
          id: id.value
        }
      })
      break;
    default:
      break;
  }

}
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 RulesList = ref([]);//承保规则数据
const addUnderwritingRuleShow = ref(false);//添加规则抽屉

const ruleFeePosition = ref<TabsInstance['tabPosition']>('left')
const direction = ref<DrawerProps['direction']>('rtl')
const addUnderwritingRule = () => {
  addUnderwritingRuleShow.value = true;
  rulesAttrListInfo.startTime = ''
  rulesAttrListInfo.endTime = ''
  rulesAttrListInfo.rulesAttrList = []
}
//承保规则保存事件
const UnderwritingRuleSave = () => {
  // "OwnersInfoAge" 车主年龄
  // "NonMotorInsurance" 非车险
  if (rulesAttrListInfo.id) {//判断id是否存在
    api.agreementApi.agreementRulesEdit(rulesAttrListInfo).then((res: any) => {
      if (res.code == '200') {
        ElMessage({
          type: 'success',
          message: res.msg,
          plain: true,
        })
        addUnderwritingRuleShow.value = false;
        agreementRulesList();
      } else {

      }
    });
  } else {
    api.agreementApi.agreementRulesAdd(rulesAttrListInfo).then((res: any) => {
      if (res.code == '200') {
        ElMessage({
          type: 'success',
          message: res.msg,
          plain: true,
        })
        addUnderwritingRuleShow.value = false;
        agreementRulesList();
      } else {
      }
    });
  }

}
//获取承保规则列表
const agreementRulesList = () => {
  api.agreementApi.agreementRulesList(id.value).then((res: any) => {
    if (res.code == '200') {
      res.data.map((val: any) => {
        val.ruleFeeShow = false;
        return val;
      })
      RulesList.value = res.data.map(v => {
        const index = RulesList.value.findIndex(k => k.id === v.id)
        const ruleFeeShow = RulesList.value[index]?.ruleFeeShow
        const ruleFeeActive = RulesList.value[index]?.ruleFeeActive
        return {
          ...v,
          ruleFeeShow,
          ruleFeeActive,
        }
      });

    } else {
    }
  });
}
//修改规则
const ruleEdit = (id: string) => {
  rulesAttrListInfo.id = id;
  addUnderwritingRuleShow.value = true;
  api.agreementApi.agreementRulesGet(id).then((res: any) => {
    if (res.code == '200') {
      rulesAttrListInfo.startTime = res.data.startTime;
      rulesAttrListInfo.endTime = res.data.endTime;
      rulesAttrListInfo.rulesAttrList = processArray(res.data.costsAttrLinks);
      console.log(rulesAttrListInfo.rulesAttrList)
    } 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 ruleDel = (id: string) => {
  ElMessageBox.confirm(
    '确定要删除该承保规则吗，删除后，该承保规则的费用也将同步删除，请确认是否删除？',
    '删除承保规则',
    {
      confirmButtonText: '确定删除',
      type: 'error',
      center: true,
      confirmButtonClass: 'el-button--danger',
    }
  )
    .then(() => {
      api.agreementApi.agreementRulesDelete(id).then((res: any) => {
        if (res.code == '200') {
          agreementRulesList();
          ElMessage({
            type: 'success',
            message: res.msg,
            plain: true,
          })
        }
      });
    })
}
//添加费用
const ruleFeeVisible = ref(false);//规则费用弹窗
const ruleFeeEditVisible = ref(false);//编辑弹窗
const ruleFeeHeaderTitle = ref();//编辑弹窗title
const costitemEditInfo = ref();
const RulesInfo = ref({});
const columns = [
  { prop: "costRules", label: "费用规则", width: '200', },
  { prop: "priorityLevel", label: "优先级", width: '60', },
  { prop: "costDescribe", label: "费用规则", width: '200', },
  {
    prop: "ptlAgreementCostTypeList", label: "交强险费用", width: '300', formatter: (row: any) => {
      let info = row.ptlAgreementCostTypeList.find((val: any) => val.costType == '交强险');
      if (info) {
        return `入口：${info.inlet?.toFixed(2)}% 出口：${info.export?.toFixed(2)}%\n加投：${info.addThrow?.toFixed(2)}% 手续费：${info.commission?.toFixed(2)}%`
      } else {
        return '-'
      }
    }
  },
  {
    prop: "agreementAbbreviation", label: "商业险费用", width: '300', formatter: (row: any) => {
      let info = row.ptlAgreementCostTypeList.find((val: any) => val.costType == '商业险');
      if (info) {
        return `入口：${info.inlet?.toFixed(2)}% 出口：${info.export?.toFixed(2)}%\n加投：${info.addThrow?.toFixed(2)}% 手续费：${info.commission?.toFixed(2)}%`
      } else {
        return '-'
      }
    }
  },
  {
    prop: "deptName", label: "驾意险费用", width: '300', formatter: (row: any) => {
      let info = row.ptlAgreementCostTypeList.find((val: any) => val.costType == '驾意险');
      if (info) {
        return `入口：${info.inlet?.toFixed(2)}% 出口：${info.export?.toFixed(2)}%\n加投：${info.addThrow?.toFixed(2)}% 手续费：${info.commission?.toFixed(2)}%`
      } else {
        return '-'
      }
    }
  },
  {
    prop: "auditMethod", label: "审核方式", width: '200',
    formatter: (row: any) => {
      if (row.auditMethod == '0') {
        return '自动审核'
      } else {
        return '手动审核'
      }
    }
  },
  {
    prop: "effectiveTime", label: "有效期", width: '200',
    formatter: (row: any) => {
      return `起${row.effectiveTime}\n止${row.failureTime}`
    }
  },
  {
    prop: "isEnabled", label: "费用状态", width: '200', component: "Tag",
    formatter: (row: any) => {
      let name = getDict('is_enable').find(val => val.value == row.isEnabled).label
      if (name) {
        return { type: 'danger', text: name };
      } else {
        return { type: 'primary', text: name };
      }
    }
  },
  {
    prop: "approved", label: "审核状态", width: '200', 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: "isValid", label: "有效状态", width: '200',
    component: "Tag",
    formatter: (row: any) => {
      let name = getDict('valid_status').find(val => val.value == row.isValid).label
      if (name) {
        return { type: 'danger', text: name };
      }
    }
  },
];
const ruleFeeAdd = (item: any) => {
  RulesInfo.value = item;
  ruleFeeVisible.value = true;
}
//费用提交
const ruleFeeSave = (data: object) => {
  api.agreementApi.ptlAgreementCostsave(data).then((res: any) => {
    if (res.code == '200') {
      ruleFeeVisible.value = false;
      agreementRulesList()
    } else {
      ElMessage({
        type: 'error',
        message: res.msg,
        plain: true,
      });
    }
  });
}
const ruleFeeEditSave = (data: object) => {
  api.agreementApi.AgreementFeeupdate(data).then((res: any) => {
    if (res.code == '200') {
      ElMessage({
        type: 'success',
        message: res.msg,
        plain: true,
      })
      agreementRulesList()
      ruleFeeEditVisible.value = false;

    }
  });
}
const index1 = ref(0)
const costindex1 = ref(0)
//编辑删除费用
const costitemEdit = (id: string, item: any, index: number, costindex: number) => {
  index1.value = index;
  costindex1.value = costindex;
  RulesInfo.value = item;
  api.agreementApi.AgreementFeeById(id).then((res: any) => {
    if (res.code == '200') {
      res.data.ruleConditions = processArray(res.data.ruleConditions);
      ruleFeeHeaderTitle.value = res.data.productName;
      costitemEditInfo.value = res.data;
      ruleFeeEditVisible.value = true;
    } else {
    }
  });
}

//删除费用
const costitemDel = (id: string) => {
  ElMessageBox.confirm(
    '确定要删除该费用，请确认是否删除？',
    '删除费用',
    {
      confirmButtonText: '确定删除',
      type: 'error',
      center: true,
      confirmButtonClass: 'el-button--danger',
    }
  )
    .then(() => {
      api.agreementApi.AgreementFeedeleteByIds([id]).then((res: any) => {
        if (res.code == '200') {
          agreementRulesList();
          ElMessage({
            type: 'success',
            message: res.msg,
            plain: true,
          })
        } else {
        }
      });
    })
}

const copyDialog = ref(false)
const costId = ref('')
const agreementId = ref('')
const coverRuleId = ref('')
const agreementList = ref([])
const rulesList = ref([])
/** 复制操作处理：记录当前行的ID并打开复制确认对话框 */
const handleCopy = (row) => {
  agreementId.value = ''
  coverRuleId.value = ''
  costId.value = row.id
  api.agreementApi.agreementList({ size: 10000, }).then((res: any) => {
    if (res.code == '200') {
      agreementList.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 = {
      costId: costId.value,
      agreementId: agreementId.value,
      coverRuleId: coverRuleId.value,
    }
    api.agreementApi.AgreementFeecopy(params).then((res: any) => {
      if (res.code == '200') {
        agreementRulesList();
        ElMessage({
          type: 'success',
          message: res.msg,
          plain: true,
        })
        copyDialog.value = false
      }
    });
  })
}
interface rulesAttrListInfo {
  id: string,
  agreementId: string,
  startTime: string,
  endTime: string,
  rulesAttrList: any[],
}
const ruleConditionVisible = ref(false);//规则条件弹窗
const rulesAttrListInfo = reactive<rulesAttrListInfo>({
  id: '',
  agreementId: "",
  startTime: "",
  endTime: "",
  rulesAttrList: []
});//规则条件列表数据
const rulesAttrListInfoRules = ref<FormRules>({
  startTime: [
    { required: true, trigger: "change", message: "请选择生效起始时间" }
  ],
  endTime: [
    { required: true, trigger: "change", message: "请选择生效终止时间" }
  ],
});
const ruleConditionSave = (list: string[]) => {//获取规则条件选中集合
  rulesAttrListInfo.rulesAttrList = list;
  ruleConditionVisible.value = false;
}
//条件删除
const rulesAttrDel = (index: number) => {
  rulesAttrListInfo.rulesAttrList.splice(index, 1)
}
//多选框事件数据格式处理
const rulesAttrselectChange = (item: any) => {
  rulesAttrListInfo.rulesAttrList[item.index].min = '';
  item.e.map((ele: any) => {
    rulesAttrListInfo.rulesAttrList[item.index].min += ele + ',';
  })
  // 去掉最后一个逗号
  if (rulesAttrListInfo.rulesAttrList[item.index].min.endsWith(',')) {
    rulesAttrListInfo.rulesAttrList[item.index].min = rulesAttrListInfo.rulesAttrList[item.index].min.slice(0, -1);
  }
}
//协议文件处理
//上传
const uploadImage = (file: any) => {
  let files = file.raw
  const params = new FormData(); // 声明formData数据类型
  params.append("file", files);
  api.commonApi.fileUpload(params).then((res: any) => {
    if (res.code == '200') {
      // imageName.value = processFileName(res.data.fileName);
      imageUrl.value = res.data.downloadUrl;
      api.agreementApi.agreementEditFile({ id: id.value, fileId: res.data.id }).then((res: any) => {
        if (res.code == '200') {

        }
      });
    } else {
    }
  });

}
</script>
<!-- 样式区域 -->
<style lang='scss' scoped>
:deep(.demo-tabs .el-tabs__item) {
  height: 60px;
  font-size: 20px;
  font-weight: bold !important;
}

:deep(.ruleFee .el-tabs__item) {
  height: 40px;
  font-size: 14px;
  font-weight: 500 !important;
}

:deep(.agreement .p-5) {
  padding-top: 0;
}

:deep(.el-descriptions__cell) {
  width: 33.33%;
}

:deep(.my-label) {
  font-weight: bold !important;
}

.headers {
  .title {
    font-size: 20px;
    font-weight: bold;
    color: #333;
  }
}

.RuleContainer {
  margin-top: 20px;

  .list-item {
    padding: 18px 16px;
    margin-bottom: 20px;
    border: 1px solid #e5e5e5;
    border-radius: 10px;

    .empty {
      font-size: 14px;
      color: #666;
      text-align: center;
    }
  }
}

.agreementNotice {
  width: max-content;
  padding: 18px 24px;
  border: 1px solid #eee;
  border-radius: 4px;

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

  img {
    width: 40px;
    height: 40px;
    margin-right: 20px;
  }

  span:first-child {
    margin-bottom: 2px;
    font-size: 14px;
    color: #333;
  }

  span:last-child {
    font-size: 14px;
    color: #666;
  }

  .fileBtn {
    margin-left: 40px;

    .btn-icon {
      margin: 0 10px;
      font-size: 20px;
      color: #999;
      cursor: pointer;

      &:hover {
        color: #00a0f4;
      }
    }
  }
}

.title {
  display: flex;

  &::before {
    display: inline-block;
    width: 4px;
    height: 18px;
    margin-right: 20px;
    content: "";
    margin-top: 6px;
    background-color: #0083ff;
  }
}
</style>