<template>
  <div class="data-migration">
    <el-tabs v-model="tabs.activeName" @tab-click="handleTabClick">
      <el-tab-pane label="角色VersionId数据错误" name="first">
        <div class="top-box">
          <div class="title-box">针对角色图错误数据版本进行合并（1个流程的多个版本对应多个角色图，修正角色图的versionId）</div>
        </div>
        <div class="middle-box">
          <awsui-button style="cursor: pointer" type="primary" @click="checkErrorModel">检测角色数据</awsui-button>
          <awsui-button style="cursor: pointer" type="primary" :disabled="roleVersionIdError.updateStatus" @click="updateErrorModel">进行数据修正</awsui-button>
          <span style="color: red;"><b>{{roleVersionIdError.desc}}</b></span>
        </div>
        <div class="bottom-box">
          <el-table
              v-loading="roleVersionIdError.loading"
              :data="roleVersionIdError.list"
              stripe
              height="650"
              style="width: 100%">
            <el-table-column
                prop="no"
                label="序号"
                width="50">
            </el-table-column>
            <el-table-column
                prop="processName"
                label="流程名称"
                width="180">
            </el-table-column>
            <el-table-column
                prop="processVersion"
                label="版本号"
                width="50">
            </el-table-column>
            <el-table-column
                prop="processId"
                label="流程ID">
            </el-table-column>
            <el-table-column
                prop="processVersionId"
                label="流程版本ID">
            </el-table-column>
            <el-table-column
                prop="roleName"
                label="角色名称"
                width="180">
            </el-table-column>
            <el-table-column
                prop="roleVersion"
                label="版本号"
                width="50">
            </el-table-column>
            <el-table-column
                prop="roleId"
                label="角色ID">
            </el-table-column>
            <el-table-column
                prop="roleVersionId"
                label="角色版本ID">
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="角色使用状态错误" name="second">
        <div class="top-box">
          <div class="title-box">针对角色图与对应的流程的使用状态不一致的数据进行修正（1个流程V3处于使用中，但是对应角色图却是非使用中，修正角色图的使用状态，以流程图使用状态为准，使角色图与流程图一致）</div>
        </div>
        <div class="middle-box">
          <awsui-button style="cursor: pointer" type="primary" @click="checkErrorUseModel">检测角色数据</awsui-button>
          <awsui-button style="cursor: pointer" type="primary" :disabled="roleUseError.updateStatus" @click="updateErrorUseModel">进行数据修正</awsui-button>
          <span style="color: red;"><b>{{roleUseError.desc}}</b></span>
        </div>
        <div class="bottom-box">
          <el-table
              v-loading="roleUseError.loading"
              :data="roleUseError.list"
              stripe
              height="650"
              style="width: 100%">
            <el-table-column
                prop="no"
                label="序号"
                width="50">
            </el-table-column>
            <el-table-column
                prop="processName"
                label="流程名称"
                width="180">
            </el-table-column>
            <el-table-column
                prop="processVersion"
                label="版本号"
                width="50">
            </el-table-column>
            <el-table-column
                prop="processUse"
                label="流程使用状态"
                width="50">
            </el-table-column>
            <el-table-column
                prop="processId"
                label="流程ID">
            </el-table-column>
            <el-table-column
                prop="processVersionId"
                label="流程版本ID">
            </el-table-column>
            <el-table-column
                prop="roleName"
                label="角色名称"
                width="180">
            </el-table-column>
            <el-table-column
                prop="roleVersion"
                label="版本号"
                width="50">
            </el-table-column>
            <el-table-column
                prop="roleUse"
                label="角色使用状态"
                width="50">
            </el-table-column>
            <el-table-column
                prop="roleId"
                label="角色ID">
            </el-table-column>
            <el-table-column
                prop="roleVersionId"
                label="角色版本ID">
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="角色版本号错误" name="third">
        <div class="top-box">
          <div class="title-box">针对角色图与对应的流程的版本号不一致的数据进行修正（1个流程V3对应角色图却是V2，修正角色图的版本号，以流程图使用状态为准，使角色图与流程图一致）</div>
        </div>
        <div class="middle-box">
          <awsui-button style="cursor: pointer" type="primary" @click="checkErrorVerModel">检测角色数据</awsui-button>
          <awsui-button style="cursor: pointer" type="primary" :disabled="roleVerError.updateStatus" @click="updateErrorVerModel">进行数据修正</awsui-button>
          <span style="color: red;"><b>{{roleVerError.desc}}</b></span>
        </div>
        <div class="bottom-box">
          <el-table
              v-loading="roleVerError.loading"
              :data="roleVerError.list"
              stripe
              height="650"
              style="width: 100%">
            <el-table-column
                prop="no"
                label="序号"
                width="50">
            </el-table-column>
            <el-table-column
                prop="processName"
                label="流程名称"
                width="180">
            </el-table-column>
            <el-table-column
                prop="processVersion"
                label="版本号"
                width="50">
            </el-table-column>
            <el-table-column
                prop="processId"
                label="流程ID">
            </el-table-column>
            <el-table-column
                prop="processVersionId"
                label="流程版本ID">
            </el-table-column>
            <el-table-column
                prop="roleName"
                label="角色名称"
                width="180">
            </el-table-column>
            <el-table-column
                prop="roleVersion"
                label="版本号"
                width="50">
            </el-table-column>
            <el-table-column
                prop="roleId"
                label="角色ID">
            </el-table-column>
            <el-table-column
                prop="roleVersionId"
                label="角色版本ID">
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="多余角色版本错误" name="fourth">
        <div class="top-box">
          <div class="title-box">针对角色图与对应的流程对应数量不一致的数据进行检测（1个流程V3对应2个角色图V2和V3，查询涉及到的流程图与相对应的角色图）</div>
        </div>
        <div class="middle-box">
          <awsui-button style="cursor: pointer" type="primary" @click="checkErrorMultiModel">检测角色数据</awsui-button>
          <awsui-button style="cursor: pointer" type="primary" :disabled="roleMultiError.updateStatus" @click="updateErrorMultiModel">进行数据修正</awsui-button>
          <span style="color: red;"><b>{{roleMultiError.desc}}</b></span>
        </div>
        <div class="bottom-box">
          <el-table
              v-loading="roleMultiError.loading"
              :data="roleMultiError.list"
              height="650"
              :row-style="getRowStyle"
              @selection-change="handleSelectionChange"
              style="width: 100%">
            <el-table-column
                type="selection"
                width="55">
            </el-table-column>
            <el-table-column
                prop="no"
                label="序号"
                width="50">
            </el-table-column>
            <el-table-column
                prop="processName"
                label="流程名称"
                width="180">
            </el-table-column>
            <el-table-column
                prop="processVersion"
                label="版本号"
                width="50">
            </el-table-column>
            <el-table-column
                prop="processId"
                label="流程ID">
            </el-table-column>
            <el-table-column
                prop="processVersionId"
                label="流程版本ID">
            </el-table-column>
            <el-table-column
                prop="roleName"
                label="角色名称"
                width="180">
            </el-table-column>
            <el-table-column
                prop="activeRelationCount"
                label="关联了..."
                width="50">
              <template #default="scope">
                <template  v-if="scope.row.activeRelationCount > 0">
                  <el-popover
                      trigger="hover"
                      placement="top"
                      width="500px"
                  >
                    <!-- 关联模型标题 -->
                    <div class="popover-section-title">关联了其他模型</div>

                    <!-- 表格容器（带滚动条） -->
                    <div class="popover-table-container">
                      <table class="popover-table">
                        <thead>
                        <tr>
                          <th>当前角色节点</th>
                          <th>模型名称</th>
                          <th>节点名称</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr
                            v-for="item in scope.row.activeRelationList"
                            :key="item.id"
                        >
                          <td>{{ item.currShapeName }}</td>
                          <td>{{ item.modelName }}</td>
                          <td>{{ item.shapeName }}</td>
                        </tr>
                        </tbody>
                      </table>
                    </div>

                    <!-- 触发元素（显示关联数量） -->
                    <template #reference>
                      <el-tag
                          size="medium"
                          type="info"
                      >
                        {{ scope.row.activeRelationCount }}
                      </el-tag>
                    </template>
                  </el-popover>
                </template>
                <template v-else>
                  <span class="zero-count">0</span>
                </template>
              </template>
            </el-table-column>
            <el-table-column
                prop="passiveRelationCount"
                label="被...关联"
                width="50">
              <template #default="scope">
                <template v-if="scope.row.passiveRelationCount > 0">
                  <el-popover
                      trigger="hover"
                      placement="top"
                      width="600px"
                  >
                    <!-- 关联模型标题 -->
                    <div class="popover-section-title">被其他模型关联</div>

                    <!-- 表格容器（带滚动条） -->
                    <div class="popover-table-container">
                      <table class="popover-table">
                        <thead>
                        <tr>
                          <th>当前角色节点</th>
                          <th>模型名称</th>
                          <th>节点名称</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr
                            v-for="item in scope.row.passiveRelationList"
                            :key="item.id"
                        >
                          <td>{{ item.currShapeName }}</td>
                          <td>{{ item.modelName }}</td>
                          <td>{{ item.shapeName }}</td>
                        </tr>
                        </tbody>
                      </table>
                    </div>

                    <!-- 触发元素（显示关联数量） -->
                    <template #reference>
                      <el-tag
                          size="medium"
                          type="info"
                      >
                        {{ scope.row.passiveRelationCount }}
                      </el-tag>
                    </template>
                  </el-popover>
                </template>
                <span v-else class="zero-count">0</span>
              </template>
            </el-table-column>
            <el-table-column
                prop="roleId"
                label="角色ID">
            </el-table-column>
            <el-table-column
                prop="roleVersionId"
                label="角色版本ID">
            </el-table-column>
            <el-table-column
                prop="createUser"
                label="创建人">
            </el-table-column>
            <el-table-column
                prop="createTime"
                label="创建时间">
            </el-table-column>
            <el-table-column
                prop="updateUser"
                label="修改人">
            </el-table-column>
            <el-table-column
                prop="updateTime"
                label="修改时间">
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>



  </div>
</template>

<script lang="ts">
import {defineComponent, getCurrentInstance, reactive, ref, nextTick} from 'vue';
import LogCodemirror from "./log-codemirror";
export default defineComponent({
  name: "role-error-change",
  components: {
    LogCodemirror,
  },
  setup() {
    const {proxy: $this} = getCurrentInstance();
    const dataCodemirrorRef = ref();
    let tabs = reactive({
      activeName: 'first'
    })
    const multipleSelection = ref([])
    const handleSelectionChange = (val) => {
      multipleSelection.value = val;
      console.log(multipleSelection.value)
    };
    let roleVersionIdError = reactive({
      list: [],
      desc: '',
      loading: false,
      updateStatus: false
    })
    let roleUseError = reactive({
      list: [],
      desc: '',
      loading: false,
      updateStatus: false
    })
    let roleVerError = reactive({
      list: [],
      desc: '',
      loading: false,
      updateStatus: false
    })
    let roleMultiError = reactive({
      list: [],
      desc: '',
      loading: false,
      updateStatus: false
    })
    let info = reactive({
      activeStep: 0,
      steps: [{title: "上传"}, {title: "校验"}, {title: "结果"}],
      fileList: [],
      uploadAction: '',
      repositoryName: 'versionNoExcel',
      groupValue: 'upfile',
      fileValue: '',
      appId: 'com.actionsoft.apps.coe.pal.datamigration',
      fileName: ''
    });
    let dlg = reactive({
      visible: false
    })
    let logCodemirror = reactive({
      height: '100%',
      width: '100%',
      logStr: ''
    })
    const result = reactive({
      path: '',
      logId : '',
      totalCount : 0,
      importingCount: 0,
      resultStatus: 0,
      interval: null, // 查询日志定时器
      timer:0, // 时间戳记录
    })
    const handleClose = (done: () => void) => {
      done();
    }
    const handlePreview = () => {
    }
    const handleRemove = () => {
    }
    const beforeRemove = () => {
    }
    const handleExceed = () => {
    }
    const handleSuccess = (res: any, uploadFile: any, uploadFiles: any) => {
      console.log(res, '---', uploadFile, '----', uploadFiles)
      info.fileName = res.files.name
      let tempFileObj = {id: uploadFile.uid, name: res.files.name, downloadUrl: res.data.data.attrs.downloadUrl}
      info.fileList.push(tempFileObj)
      console.info('fileList', info.fileList)
    }
    const dlgClose = () => {
      if (result.resultStatus == 0) {
        $this.$message({message: '导入正在进行中，关闭窗口不影响导入的执行', type: 'warning',})
      }
      clearResult();
      logCodemirror.logStr = '';
    }
    const clearResult = () => {
      if (result.interval != null) {
        removeInterval();
      }
      result.path = '';
      result.logId = '';
      result.totalCount = 0;
      result.importingCount = 0;
      result.resultStatus = 0;
      result.interval = null; // 查询日志定时器
      result.timer = 0; // 时间戳记录
    }
    const next = () => {
      if (info.fileList.length === 0) {
        $this.$message({type: 'warning', message: '请上传文件'});
        return;
      }
      dlg.visible = true;
      const param = {
        url: './jd',
        data: {
          cmd: 'com.actionsoft.apps.coe.pal.datamigration_version_no_import',
          sid: settingParam.sessionId,
          wsId: settingParam.wsId ? settingParam.wsId : '1b19ab87-5727-4621-bc3f-117183b06e59',
          groupValue: info.groupValue,
          fileValue: info.fileValue,
          fileName: info.fileName
        }
      }
      $this.awsuiaxios.post(param)
          .then((ro: any) => {
            result.path = ro.data.path;
            result.logId = ro.data.logId;
            result.resultStatus = ro.data.resultStatus;
            if (ro.result == 'ok') {
              result.totalCount = ro.data.totalCount;
              result.importingCount = ro.data.importingCount;
            } else {
              // $this.$message.error(ro.msg);
            }
            getImportInfoEvent();
          })
          .catch((err: any) => {
          })
    }
    // 获取导入进度
    const getImportInfoEvent = () => {
      result.interval = setInterval(queryLog, 1000);
    }
    const queryLog = () => {
      const that = $this;
      result.timer = new Date().getTime();
      const param = {
        url: './jd',
        data: {
          cmd: 'com.actionsoft.apps.coe.pal.datamigration_version_no_import_log_query',
          sid: settingParam.sessionId,
          logId: result.logId,
          path: result.path,
          timer: result.timer
        }
      }
      that.awsuiaxios.post(param)
          .then((ro: any) => {
            if (ro.result === 'ok') {
              if (parseInt(ro.data.timer) <= result.timer) {
                logCodemirror.logStr = ro.data.content;
                // 添加内容后定位到行尾
                nextTick(()=> {
                  moveLogEnd();
                });
                result.resultStatus = ro.data.resultStatus;
                if (result.resultStatus != 0) {
                  removeInterval();
                  result.importingCount = result.totalCount;// 出错或成功，直接100%
                } else {
                  result.importingCount = ro.data.importingCount;
                }
              }
            } else {
              that.$message.error(ro.msg);
              removeInterval();
            }
          })
          .catch((err: any) => {
          })
    }
    // log-codemirror日志内容移动到行尾部
    const moveLogEnd = () => {
      dataCodemirrorRef.value.moveTextToEnd();
    }
    const removeInterval= () => {
      clearInterval(result.interval);
    }
    const downloadLog = () => {
      // 下载日志
      const that = $this;
      if (result.path == '') {
        that.$message({message: '获取日志失败', type: 'warning'});
        return;
      }
      if (result.resultStatus == 0) {
        that.$message({message: '正在导入，请稍等', type: 'warning'});
        return;
      }
      const param = {
        url:'./jd',
        data:{
          cmd : "com.actionsoft.apps.coe.pal.datamigration_version_no_import_log_download",
          path: result.path,
          logId: result.logId
        }
      };
      that.awsuiaxios.post(param)
          .then((ro: any) => {
            if (ro.result === 'ok') {
              window.open(ro.data.url);
            } else {
              that.$message.error(ro.msg);
            }
          })
          .catch((err: any) => {
          })
    }
    const removeFile = () => {
      info.fileList = [];
    }
    const handleUploadBtn = () => {
      debugger;
      info.fileValue = 'versionNoExcel-' + transDate(new Date());
      info.uploadAction = axiosBaseUrl + 'uf?sid=' + settingParam.sessionId + '&repositoryName=' + info.repositoryName + '&groupValue='
          + info.groupValue + '&fileValue=' + info.fileValue + '&appId=' + info.appId;
    }
    const transDate = (date: Date) => {
      var ndate = new Date(date);
      let type = 'yyyy-MM-dd-hhmmss';
      const o = {
        'M+': ndate.getMonth() + 1, // 月份
        'd+': ndate.getDate(), // 日
        'h+': ndate.getHours(), // 小时
        'm+': ndate.getMinutes(), // 分
        's+': ndate.getSeconds(), // 秒
        'q+': Math.floor((ndate.getMonth() + 3) / 3), // 季度
        'S': ndate.getMilliseconds() // 毫秒
      }
      if (/(y+)/.test(type)) type = type.replace(RegExp.$1, (ndate.getFullYear() + '').substr(4 - RegExp.$1.length))
      for (const k in o) {
        if (new RegExp('(' + k + ')').test(type)) type = type.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
      }
      return type;
    }
    const checkErrorModel = () => {// 检测角色versionId错误
      const that = $this;
      if (that.roleVersionIdError.loading) {
        that.$message({message: '正在查询，请稍等', type: 'warning'});
        return;
      }
      that.roleVersionIdError.loading = true;
      const param = {
        url: './jd',
        data: {
          cmd: 'com.actionsoft.apps.coe.pal.datamigration_role_versionid_error_query',
          sid: settingParam.sessionId
        }
      }
      that.awsuiaxios.post(param)
          .then((ro: any) => {
            that.roleVersionIdError.loading = false;
            if (ro.result === 'ok') {
              that.roleVersionIdError.list = ro.data.list;
              that.roleVersionIdError.desc = ro.data.desc;
            } else {
              that.$message.error(ro.msg);
            }
          })
          .catch((err: any) => {
          })
    }
    const updateErrorModel = () => {// 修正角色versionId错误
      const that = $this;
      if (that.roleVersionIdError.list.length == 0) {
        that.$message({message: '当前没有需要修正的数据', type: 'warning'});
        return;
      }
      that.roleVersionIdError.updateStatus = true;
      that.$confirm('建议使用平台人数比较少时进行修正, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const param = {
          url: './jd',
          data: {
            cmd: 'com.actionsoft.apps.coe.pal.datamigration_role_versionid_error_update',
            sid: settingParam.sessionId
          }
        }
        that.awsuiaxios.post(param)
            .then((ro: any) => {
              if (ro.result === 'ok') {
                that.roleVersionIdError.updateStatus = false;
                that.$message({message: ro.msg, type: 'success'});
                that.roleVersionIdError.list = [];
                that.roleVersionIdError.desc = '';
              } else {
                that.$message.error(ro.msg);
              }
            })
            .catch((err: any) => {
            })
      }).catch(() => {
        that.roleVersionIdError.updateStatus = false;
      });
    }
    const checkErrorUseModel = () => {// 检测角色使用状态错误
      const that = $this;
      if (that.roleUseError.loading) {
        that.$message({message: '正在查询，请稍等', type: 'warning'});
        return;
      }
      that.roleUseError.loading = true;
      const param = {
        url: './jd',
        data: {
          cmd: 'com.actionsoft.apps.coe.pal.datamigration_role_use_error_query',
          sid: settingParam.sessionId
        }
      }
      that.awsuiaxios.post(param)
          .then((ro: any) => {
            that.roleUseError.loading = false;
            if (ro.result === 'ok') {
              that.roleUseError.list = ro.data.list;
              that.roleUseError.desc = ro.data.desc;
            } else {
              that.$message.error(ro.msg);
            }
          })
          .catch((err: any) => {
          })
    }
    const updateErrorUseModel = () => {// 修正角色使用状态错误
      const that = $this;
      if (that.roleUseError.list.length == 0) {
        that.$message({message: '当前没有需要修正的数据', type: 'warning'});
        return;
      }
      that.roleUseError.updateStatus = true;
      that.$confirm('建议使用平台人数比较少时进行修正, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const param = {
          url: './jd',
          data: {
            cmd: 'com.actionsoft.apps.coe.pal.datamigration_role_use_error_update',
            sid: settingParam.sessionId
          }
        }
        that.awsuiaxios.post(param)
            .then((ro: any) => {
              if (ro.result === 'ok') {
                that.roleUseError.updateStatus = false;
                that.$message({message: ro.msg, type: 'success'});
                that.roleUseError.list = [];
                that.roleUseError.desc = '';
              } else {
                that.$message.error(ro.msg);
              }
            })
            .catch((err: any) => {
            })
      }).catch(() => {
        that.roleUseError.updateStatus = false;
      });
    }
    const checkErrorVerModel = () => {// 检测角色版本号错误
      const that = $this;
      if (that.roleVerError.loading) {
        that.$message({message: '正在查询，请稍等', type: 'warning'});
        return;
      }
      that.roleVerError.loading = true;
      const param = {
        url: './jd',
        data: {
          cmd: 'com.actionsoft.apps.coe.pal.datamigration_role_ver_error_query',
          sid: settingParam.sessionId
        }
      }
      that.awsuiaxios.post(param)
          .then((ro: any) => {
            that.roleVerError.loading = false;
            if (ro.result === 'ok') {
              that.roleVerError.list = ro.data.list;
              that.roleVerError.desc = ro.data.desc;
            } else {
              that.$message.error(ro.msg);
            }
          })
          .catch((err: any) => {
          })
    }
    const updateErrorVerModel = () => {// 修正角色版本号错误
      const that = $this;
      if (that.roleVerError.list.length == 0) {
        that.$message({message: '当前没有需要修正的数据', type: 'warning'});
        return;
      }
      that.roleVerError.updateStatus = true;
      that.$confirm('建议使用平台人数比较少时进行修正, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const param = {
          url: './jd',
          data: {
            cmd: 'com.actionsoft.apps.coe.pal.datamigration_role_ver_error_update',
            sid: settingParam.sessionId
          }
        }
        that.awsuiaxios.post(param)
            .then((ro: any) => {
              if (ro.result === 'ok') {
                that.roleVerError.updateStatus = false;
                that.$message({message: ro.msg, type: 'success'});
                that.roleVerError.list = [];
                that.roleVerError.desc = '';
              } else {
                that.$message.error(ro.msg);
              }
            })
            .catch((err: any) => {
            })
      }).catch(() => {
        that.roleVerError.updateStatus = false;
      });
    }
    const checkErrorMultiModel = () => {// 检测角色版本号错误
      const that = $this;
      if (that.roleMultiError.loading) {
        that.$message({message: '正在查询，请稍等', type: 'warning'});
        return;
      }
      that.roleMultiError.loading = true;
      const param = {
        url: './jd',
        data: {
          cmd: 'com.actionsoft.apps.coe.pal.datamigration_role_multi_error_query',
          sid: settingParam.sessionId
        }
      }
      that.awsuiaxios.post(param)
          .then((ro: any) => {
            that.roleMultiError.loading = false;
            if (ro.result === 'ok') {
              that.roleMultiError.list = ro.data.list;
              that.roleMultiError.desc = ro.data.desc;
            } else {
              that.$message.error(ro.msg);
            }
          })
          .catch((err: any) => {
          })
    }
    const updateErrorMultiModel = () => {// 修正角色版本号错误
      const that = $this;
      if (that.roleMultiError.list.length == 0) {
        that.$message({message: '当前没有需要修正的数据', type: 'warning'});
        return;
      }
      if (that.multipleSelection.length == 0) {
        that.$message({message: '没有选择需要删除的角色模型', type: 'warning'});
        return;
      }

      // 已选中的角色数据整理
      let delRoleData: any[] = [];// 待删除的角色ID
      let checkedData = that.multipleSelection;// 已选中的数据
      let checkedDataObj : {[key: string]: number} = {};// 以processId为key，记录选择的对应的角色个数
      for (let i = 0; i < checkedData.length; i++) {
        let item = checkedData[i];
        if (!Object.prototype.hasOwnProperty.call(checkedDataObj, item.processId)) {
          checkedDataObj[item.processId] = 0;
        }
        checkedDataObj[item.processId] = checkedDataObj[item.processId] + 1;
        delRoleData.push(item.roleId);
      }

      // 表格所有数据整理
      let errDataObj: {[key: string]: number} = {};// 以processId为key，记录对应的角色个数
      let errDataObj2: {[key: string]: string} = {};
      for (let i = 0; i < that.roleMultiError.list.length; i++) {
        let item = that.roleMultiError.list[i];
        if (!Object.prototype.hasOwnProperty.call(errDataObj, item.processId)) {
          errDataObj[item.processId] = 0;
        }
        errDataObj[item.processId] = errDataObj[item.processId] + 1;
        errDataObj2[item.processId] = item;
      }

      // 若删除流程下的角色模型数量大于等于该流程下角色个数，则不允许删除，即至少保留一条数据
      for (let key in checkedDataObj) {
        if (checkedDataObj[key] >= errDataObj[key]) {
          let item = errDataObj2[key];
          that.$message({message: '流程：' + item.processName + '下对应的角色至少保留一个', type: 'warning'});
          return;
        }
      }

      // 开始删除
      that.roleMultiError.updateStatus = true;
      that.$confirm('建议使用平台人数比较少时进行删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const param = {
          url: './jd',
          data: {
            cmd: 'com.actionsoft.apps.coe.pal.datamigration_role_multi_error_update',
            sid: settingParam.sessionId,
            delRoleData: JSON.stringify(delRoleData)
          }
        }
        that.awsuiaxios.post(param)
            .then((ro: any) => {
              if (ro.result === 'ok') {
                that.roleMultiError.updateStatus = false;
                that.$message({
                  message: ro.msg, //提示的信息
                  type:'success', //类型是成功
                  duration:1000, //显示时间, 毫秒。设为 0 则不会自动关闭
                  onClose:()=>{
                    that.roleMultiError.list = [];
                    that.roleMultiError.desc = '';
                    that.$message({message: '请重新查询错误数据',type:'success' });
                  }
                });

              } else {
                that.$message.error(ro.msg);
              }
            })
            .catch((err: any) => {
            })
      }).catch(() => {
        that.roleMultiError.updateStatus = false;
      });
    }
    const handleTabClick = (tab, event) => {
      const that = $this;
      that.roleVersionIdError.list = [];
      that.roleVersionIdError.desc = '';
      that.roleUseError.list = [];
      that.roleUseError.desc = '';
      that.roleVerError.list = [];
      that.roleVerError.desc = '';
      that.roleMultiError.list = '';
      that.roleMultiError.desc = '';
    }
    const getRowStyle = ({row}) => {
      return {
        backgroundColor: row.color,
        color: $this.getTextColor(row.color), // 自动适配文字颜色
      };
    }
    const getTextColor = (bgColor) => {
      if (!bgColor) return "#f00";
      const hex = bgColor.replace("#", "");
      const r = parseInt(hex.substr(0, 2), 16);
      const g = parseInt(hex.substr(2, 2), 16);
      const b = parseInt(hex.substr(4, 2), 16);
      const brightness = (r * 299 + g * 587 + b * 114) / 1000;
      return brightness > 128 ? "#000" : "#fff";
    }
    return {
      tabs,
      roleVersionIdError,
      roleUseError,
      roleVerError,
      roleMultiError,
      dataCodemirrorRef,
      info,
      dlg,
      logCodemirror,
      result,
      handlePreview,
      handleRemove,
      beforeRemove,
      handleExceed,
      handleUploadBtn,
      handleSuccess,
      next,
      removeFile,
      handleClose,
      dlgClose,
      downloadLog,
      checkErrorModel,
      updateErrorModel,
      handleTabClick,
      checkErrorUseModel,
      updateErrorUseModel,
      checkErrorVerModel,
      updateErrorVerModel,
      checkErrorMultiModel,
      updateErrorMultiModel,
      getRowStyle,
      getTextColor,
      multipleSelection,
      handleSelectionChange
    }
  }
})
</script>

<style lang="less" scoped>
.el-table__row {
  background-color: inherit !important;
}
.popover-table-container {
  max-height: 280px;  /* 限制高度 */
  overflow-y: auto;   /* 内容过多时显示滚动条 */
  margin: 10px 0;     /* 增加外边距 */
}
.popover-table {
  width: 100%;
  border-collapse: collapse;
}
.popover-table th,
.popover-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #ebeef5;
  text-align: left;
}
.popover-table th {
  background-color: #f5f7fa;  /* 表头背景色 */
  font-weight: bold;
}
.popover-section-title {
  font-weight: bold;
  margin-bottom: 8px;
}
.zero-count {
  color: #999;
  font-size: 14px;
}
.data-migration {
  width: 100%;
  height: 100%;
  background-color: #F7F7FB;

  .top-box {
    height: 45px;
    margin: 0 35px 0 35px;
    display: flex;
    justify-content: space-between;

    .title-box {
      line-height: 45px;
      font-size: 18px;
    }

    .step-box {
      width: 45%;
      padding: 5px 0;
    }
  }
  .middle-box {
    height: 40px;
    margin: 0 35px 0 35px;
  }

  .bottom-box {
    height: 650px;
    margin: 0 35px 0 35px;
    background-color: rgb(255, 255, 255);
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;

    .empty-box {
      width: 500px;
      height: 500px;

      .upload-box {
        text-align: center;
      }
    }

    .file-list-box {
      width: 100%;

      :deep(.el-scrollbar) {
        padding: 0 25px;
      }

      .scrollbar-demo-item {
        font-size: 16px;
        height: 35px;
        margin: 10px;
        border-radius: 4px;
        background: var(--el-color-primary-light-9);
        color: var(--el-color-primary);
        line-height: 35px;
      }
    }
  }
}
</style>