jquery 弹窗创建选项卡选中返回数据

// $(document).ready(function () {

  
  var popoverData =[]
  var originalData=[]
  var activeTabId = '全部'
  var callBackData=''; // 点击返回的当前数据
  var callBackFlag=false;
  var callInputThis =''

  // 显示弹窗
  // $('#toufangxiangmu').click(function (event) {
    // event.preventDefault(); // 阻止默认点击事件
    // $('#myPopModal').show(); // 显示弹窗
//     popoverData = [{
//       action_group: '投放项目',
//       list: [{
//         "id": "30",
//         "action_name": "业务单元",
//         "action_type": "数据库动作",
//         "description": null,
//         "field_name": "trmo.business_line",
//         "field_type": "枚举",
//         "type": "投放中6",

//       }]
//     },
//     {
//       action_group: '主体项目',
//       list: [{
//         "id": "2",
//         "action_name": "三国志",
//         "action_type": "数据库动作",
//         "description": null,
//         "field_name": "trmo.business_line",
//         "field_type": "枚举",
//         "type": "投放中",

//       }]
//     },
//     {
//       action_group: '集团项目',
//       list: [{
//           "id": "3",
//           "action_name": "南京全民麻将",
//           "action_type": "数据库动作",
//           "description": null,
//           "field_name": "trmo.business_line",
//           "field_type": "枚举",
//           "type": "投放中2",

//         },
//         {
//           "id": "4",
//           "action_name": "南京全民麻将2",
//           "action_type": "数据库动作",
//           "description": null,
//           "field_name": "trmo.business_line",
//           "field_type": "枚举",
//           "type": "投放中3",

//         },
//         {
//           "id": "5",
//           "action_name": "弓箭勇者",
//           "action_type": "数据库动作",
//           "description": null,
//           "field_name": "trmo.business_line",
//           "field_type": "枚举",
//           "type": "投放中",

//         }
//       ]
//     },
//     {
//       action_group: '数据4',
//       list: [{
//         "id": "40",
//         "action_name": "解绳高手",
//         "action_type": "数据库动作",
//         "description": null,
//         "field_name": "trmo.business_line",
//         "field_type": "枚举",
//         "type": "投放中",

//       }]
//     }
//   ];
//   // 备份数据
  originalData = [{
    action_group: '数据1',
    list: [{
      "id": "30",
      "action_name": "名称1",
      "action_type": "数据库动作",
      "description": null,
      "field_name": "trmo.business_line",
      "field_type": "枚举",
      "type": "投放中6",

    }]
  },
  {
    action_group: '数据2',
    list: [{
      "id": "2",
      "action_name": "名称2",
      "action_type": "数据库动作",
      "description": null,
      "field_name": "trmo.business_line",
      "field_type": "枚举",
      "type": "投放中",

    }]
  },
  {
    action_group: '数据3',
    list: [{
        "id": "3",
        "action_name": "名称3",
        "action_type": "数据库动作",
        "description": null,
        "field_name": "trmo.business_line",
        "field_type": "枚举",
        "type": "投放中2",

      },
      {
        "id": "4",
        "action_name": "名称32",
        "action_type": "数据库动作",
        "description": null,
        "field_name": "trmo.business_line",
        "field_type": "枚举",
        "type": "投放中3",

      },
     
    ]
  },
  {
    action_group: '数据4',
    list: [{
      "id": "40",
      "action_name": "名称4",
      "action_type": "数据库动作",
      "description": null,
      "field_name": "trmo.business_line",
      "field_type": "枚举",
      "type": "投放中",

    }]
  }
]


// var allmydata = [{
//   "action_group": "全部",
//   "list": popoverData // 使用更新后的 popoverData  
// }];

// renderAllmydata(allmydata,popoverData); // 渲染初始的 allmydata  

// 初始化展示部分======

// 假设第一个 tab 的 action_group 是 'tab1'  
var defaultTabActionGroup = '全部';
var defaultTabContentId = defaultTabActionGroup; // 假设 content 的 id 与 action_group 相同  

// 选中第一个 tab  
var firstTabLink = $('.tablink').first(); // 选择第一个 tab 的链接
firstTabLink.addClass('active'); // 添加 active 类


console.log('activeTabId==========', activeTabId)

// 显示第一个 tab 对应的内容  
var defaultTabContent = $('#' + defaultTabContentId); // 选择第一个 tab 的内容  
defaultTabContent.addClass('active').show(); // 添加 active 类并显示内容 

// });

// 切换选项卡
$(document).on('click', '.tablink', function () {
  var tabId = $(this).data('tab');
  activeTabId = tabId
  console.log('activeTabId点2=========', activeTabId)
  // 隐藏所有选项卡内容
  $('.tabcontent').removeClass('active').hide();
  // 显示当前选中的选项卡内容
  $('#' + activeTabId).addClass('active').show();
  // 切换选项卡按钮的活动状态
  $('.tablink').removeClass('active');
  $(this).addClass('active');

});


  
  // 关闭弹窗
  // $('.popClose').click(function () {
  //   $('#myPopModal').hide();
  //   popoverData = []; // 清空 popoverData
  //   originalData=[]
  //   activeTabId = '全部'; // 重置 activeTabId 为默认值 "全部"

  //   // 清空 #searchInput 中的数据
  //   $('#searchInput').val('');
  //   renderAllmydata([])

  // });

// 销毁
  $('#chosentoufangModal .close').on('click', function () {
    $('#chosentoufangModal').hide(); // 销毁模态框

    activeTabId = '全部'; // 重置 activeTabId 为默认值 "全部"
    // 清空 #searchInput 中的数据
    $('#searchInput').val('');
    var resetAllmydata = [{
      "action_group": "全部",
      "list": originalData // 使用更新后的 popoverData  
    }];
    renderAllmydata(resetAllmydata,originalData); // 重置渲染初始的 allmydata  
});


$('#chosentoufangModal').on('hidden.bs.modal', function (e) {
  // do something...
  popoverData=[]
    activeTabId = '全部'; // 重置 activeTabId 为默认值 "全部"
    // 清空 #searchInput 中的数据
    $('#searchInput').val('');
  console.log('关闭模态框chosentoufangModal')
})

$('#chosentoufangModal').on('show.bs.modal', function (e) {
  callBackData=''
  console.log('打开模态框chosentoufangModal')
})




    // 初始化展示部分==============
  // 输入查询




  function renderAllmydata(data,popData) {
    console.log('Rendering:', data, popoverData,popData);
    const mapList = [...data, ...popData]
    console.log('mapList:', mapList);
    var everyJson = "" // 每一条的数据保存
    // 循环迭代 actionManage 数据
    $('.popTabs').empty(); // 清空 .popTabs 元素的内容  

    $('.popContTabs').empty();
    mapList.forEach(function (action, index) {

      // titleAllData.forEach(function (action, index) {
      // 创建选项卡按钮
      var tabDiv = `<div data-tab=${action.action_group} 
            class="ant-tabs-tab  tablink "  id="${action.action_group}">
            <div  class="ant-tabs-tab-btn" tabindex=${index}
            id="rc-tabs-1-tab-${index}" >${action.action_group}</div></div>`
      $('.popTabs').append(tabDiv);
      // })
      // 创建选项卡内容
      var tabContent = $('<div class="allListDiv">').addClass('tabcontent').attr('id', action.action_group);
      if (action.action_group === '全部') {
        // tabContent.addClass('active')
        tabContent.empty(); // 确保在开始添加内容之前清空 tabContent  
        action.list.forEach(function (item, inindex) {
          var nowDiv = `<div class="allBorder">
                <h4 class="titleTip">
                <span role="img" aria-label="solution" class="anticon anticon-solution">
                </span>${item.action_group}</h4>
                <div class="allListClass"> 
                </div>
               `
          var $nowDiv = $(nowDiv)
          $nowDiv.find('.allListClass').empty()
          item.list.forEach(function (every) {
            everyJson = JSON.stringify(every);
            // 为每个 every 元素创建一个 innderEvery 包裹  
            var innderEvery = `<div class="innderEvery"  data-everyjson=${everyJson}>  
                    <div class="inL">  
                        <span>${every.action_name}</span>  
                    </div>  
                    <div class="inR">  
                        <div class="ant-space-item" style="">${every.type}</div>  
                    </div>  
                </div>`;
            // 将 innderEvery 追加到 nowDiv 的 allListClass 中  
            $nowDiv.find('.allListClass').append(innderEvery);
          });

          // 将 nowDiv 添加到 tabContent 中
          tabContent.append($nowDiv);
          // 使用事件委托监听 .innderEvery 的点击事件  
          $nowDiv.on('click', '.innderEvery', function () {
            // 在这里处理点击事件  
            // 由于事件委托，this 指向被点击的 .innderEvery 元素  
            var everyjsonData = $(this).data('everyjson')

            // 调用处理函数并传递数据  
            handleEveryClick(everyjsonData);
          });

        })

        $('.popContent').find('.popContTabs').append(tabContent);


      } else {
        tabContent.empty(); // 确保在开始添加内容之前清空 tabContent  
        var nowDiv = `<div class="allBorder">
            <h4 class="titleTip">
            <span role="img" aria-label="solution" class="anticon anticon-solution">
            </span>${action.action_group}</h4>
            <div class="allListClass"> 
            </div>
           `
        var $nowDiv = $(nowDiv)
        action.list.forEach(function (every) {
          // 为每个 every 元素创建一个 innderEvery 包裹  
          // 序列化 every 对象为 JSON 字符串  
          everyJson = JSON.stringify(every);
          var innderEvery = `<div class="innderEvery" data-everyjson=${everyJson}>  
                <div class="inL">  
                    <span>${every.action_name}</span>  
                </div>  
                <div class="inR">  
                    <div class="ant-space-item" style="">${every.type}</div>  
                </div>  
            </div>`;

          // 将 innderEvery 追加到 nowDiv 的 allListClass 中  
          $nowDiv.find('.allListClass').append(innderEvery);

        });
        // 将 nowDiv 添加到 tabContent 中
        tabContent.append($nowDiv);
        $('.popContent').find('.popContTabs').append(tabContent);
        // 使用事件委托监听 .innderEvery 的点击事件  
        $nowDiv.on('click', '.innderEvery', function () {
          // 在这里处理点击事件  
          // 由于事件委托，this 指向被点击的 .innderEvery 元素  
          var everyjsonData = $(this).data('everyjson')

          // 调用处理函数并传递数据  
          handleEveryClick(everyjsonData);
        });

      }

      hoverFn()
    });

    $('.popTabs .tablink').removeClass('active');  
    $('.popContTabs .tabcontent').removeClass('active').hide();  


    if (activeTabId) {  
      $('.popTabs #' + activeTabId).addClass('active');  
    
      // 显示活动选项卡内容。这里假设内容ID是按钮ID加上'-content'后缀  
      $('.popContTabs #' + activeTabId).addClass('active').show(); 
    } 

  }



  var visibleGroupPop = true; // 当前展示弹窗
  $('#searchInput').on('input', function () {
        var text = $(this).val(); // 获取输入框的值  
        console.log('text', text)
      // 移除所有选项卡按钮的高亮，并隐藏所有选项卡内容  
      $('.popTabs .tablink').removeClass('active');  
      $('.popContTabs .tabcontent').removeClass('active').hide();  

  
      if (activeTabId) {  
        $('.popTabs #' + activeTabId).addClass('active');  
      
        // 显示活动选项卡内容。这里假设内容ID是按钮ID加上'-content'后缀  
        $('.popContTabs #' + activeTabId).addClass('active').show(); 
      } 




    console.log('activeTabId3', activeTabId, $('#' + activeTabId).attr('class'))

    console.log($('#' + activeTabId).attr('class'))
    if (visibleGroupPop) {
      // 根据搜索文本过滤数据  
      var filteredData = text ?
        originalData.map(function (item) {
          var filteredList = item.list.filter(function (listItem) {
            var actionName = listItem.action_name.toLowerCase();
            return actionName.includes(text.toLowerCase());
          });
          return {
            ...item,
            list: filteredList
          };
        }) :
        originalData; // 如果输入文本为空，则使用原始数据  

      console.log('filteredData', filteredData)
      updatePopoverData(filteredData); // 使用封装函数更新数据并触发事件  


    } else {
      // 清空搜索文本和重置数据  
      $(this).val(''); // 清空输入框  
      updatePopoverData([...popoverData]); // 使用封装函数更新数据并触发事件  
      // 保存原始数据（如果需要的话）  
      // ...  
    }
  });












  // 定义处理点击事件的函数    处理每个对象的值。 关闭弹窗。 返回数据到表单页
  function handleEveryClick(nowDiv) {
    console.log('点击的每个对象的值', nowDiv)
    callBackData=nowDiv
    console.log('callBackData updated:', callBackData);
    // 隐藏模态框
    callInputThis.val(callBackData.action_name);
    $('#chosentoufangModal').modal('hide');
    // activeTabId = '全部'; // 重置 activeTabId 为默认值 "全部"
    // // 清空 #searchInput 中的数据
    // $('#searchInput').val('');
  }




  // 移入添加样式
  function hoverFn() {
    $('.innderEvery').hover(
      function () {
        // 当鼠标移入元素时，添加 'hovered' 类名  
        $(this).addClass('hovered');
      },
      function () {
        // 当鼠标移出元素时，移除 'hovered' 类名  
        $(this).removeClass('hovered');
      }
    );
  }






// });

  // 更新数据 。查询重新渲染
  function updatePopoverData(newData) {
    console.log('进来否')
    popoverData = newData;
    // 更新 allmydata  
    allmydata = [{
      "action_group": "全部",
      "list": newData // 使用更新后的 popoverData  
    }];
   
    // 触发自定义事件以重新渲染  
    $(document).trigger('popoverDataUpdated', [allmydata]);
  }


  
    // 监听 popoverDataUpdated 事件并重新渲染  
    $(document).on('popoverDataUpdated', function (event, updatedData) {
      console.log('popoverDataUpdated', updatedData)
     
      renderAllmydata(updatedData,popoverData); // 使用更新后的 allmydata 进行渲染  
    });