<template>
  <div class="dialog" v-if="dialogForm">
    <div class="head_box">
      <span class="title">{{ title }}重点人管理</span>
      <div>
        <el-button type="primary" size="small" v-if="butShow" :loading="loading" @click="submit">保存</el-button>
        <el-button size="small" @click="close">关闭</el-button>
      </div>
    </div>
    <div class="form_cnt flex just-between">
      <div class="left_box">
        <ul class="anchor-list">
          <li @click="scrollToSection('info-section')" :class="activeSection === 'info-section' ? 'active' : ''">基本信息
          </li>
          <li @click="scrollToSection('backinfo-section')"
            :class="activeSection === 'backinfo-section' ? 'active' : ''">人员标签</li>
          <li @click="scrollToSection('groupLabels-section')"
            :class="activeSection === 'groupLabels-section' ? 'active' : ''">群体标签</li>
          <li @click="scrollToSection('character-section')"
            :class="activeSection === 'character-section' ? 'active' : ''">群体性质</li>
          <li @click="scrollToSection('controlInfo-section')"
            :class="activeSection === 'controlInfo-section' ? 'active' : ''">管控信息</li>
          <li @click="scrollToSection('featinfo-section')"
            :class="activeSection === 'featinfo-section' ? 'active' : ''">群体特征</li>
          <li @click="scrollToSection('demandsInfo-section')"
            :class="activeSection === 'demandsInfo-section' ? 'active' : ''">主要诉求</li>
          <li @click="scrollToSection('requestInfo-section')"
            :class="activeSection === 'requestInfo-section' ? 'active' : ''">诉求信息</li>
          <li @click="scrollToSection('personnel-section')"
            :class="activeSection === 'personnel-section' ? 'active' : ''">重点人员</li>
          <li @click="scrollToSection('judgmentRecord-section')"
            :class="activeSection === 'judgmentRecord-section' ? 'active' : ''">研判记录</li>
          <li @click="scrollToSection('historyAssembly-section')"
            :class="activeSection === 'historyAssembly-section' ? 'active' : ''">历史汇集</li>
          <li @click="scrollToSection('joblogging-section')"
            :class="activeSection === 'joblogging-section' ? 'active' : ''">工作记录</li>
        </ul>
      </div>
      <div class="right_box" ref="rightBox">
        <div id="info-section">
          <Info ref="info" :disabled="disabled" :showBut="showBut" :dataList="listQuery" />
        </div>
        <div id="backinfo-section">
          <PersonnelTags ref="personnelTags" :disabled="disabled" :showBut="showBut" :dataList="listQuery" />
        </div>
        <div id="groupLabels-section">
          <Vehicle ref="vehicle" :disabled="disabled" :showBut="showBut" :dataList="listQuery" />
        </div>
        <div id="character-section">
          <BackInfo ref="backInfo" :disabled="disabled" :showBut="showBut" :dataList="listQuery" />
        </div>
        <div id="controlInfo-section">
          <controlInfo ref="controlInfo" :disabled="disabled" :showBut="showBut" :dataList="listQuery" />
        </div>
        <div id="deployment-section">
          <deployment ref="deployment" :disabled="disabled" :showBut="showBut" :dataList="listQuery" />
        </div>
        <div id="contact-section">
          <contact ref="contact" :disabled="disabled" :showBut="showBut" :dataList="listQuery" />
        </div>

        <div id="dynamicTrajectory-section">
          <dynamicTrajectory ref="dynamicTrajectory" :disabled="disabled" :showBut="showBut" />
        </div>
        <div class="behaviorInfo" style="">
          <h3>行为信息</h3>
          <!-- <el-button type="primary" :disabled="disabled" @click="AddPore">选择</el-button> -->

        </div>
        <div>
          <div class="textContent">
            基站认证信息：2022-3-33&ensp;12：30：30出现在乃宁市
          </div>
          <div class="textContent">
            基站认证信息：2022-3-33&ensp;12：30：30出现在乃宁市
          </div>
          <div class="textContent">
            基站认证信息：2022-3-33&ensp;12：30：30出现在乃宁市
          </div>
          <div class="textContent">
            基站认证信息：2022-3-33&ensp;12：30：30出现在乃宁市
          </div>
        </div>
        <div id="visitRecord-section">
          <visitRecord ref="visitRecord" :disabled="disabled" :showBut="showBut" :dataList="listQuery" />
        </div>
        <div id="caseInfo-section">
          <caseInfo ref="caseInfo" :disabled="disabled" :showBut="showBut" :dataList="listQuery" />
        </div>
        <div id="actualPerformance-section">
          <actualPerformance ref="actualPerformance" :disabled="disabled" :showBut="showBut" :dataList="listQuery" />
        </div>
        <div class="behaviorInfo" style="">
          <h3>操作日志</h3>
          <!-- <el-button type="primary" :disabled="disabled" @click="AddPore">选择</el-button> -->

        </div>
        <!-- 滚动列表容器 -->
        <div class="list-container">
          <!-- 固定标题行 -->
          <div class="list-header">
            <span>账号名称</span>
            <span>操作时间</span>
            <span>操作记录</span>
          </div>

          <!-- 可滚动内容 -->
          <div class="list-body">
            <div class="list-item" v-for="i in 30" :key="i">
              <span>张三</span>
              <span>2020-3030-2202</span>
              <span>新增操作记录</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- <ChooseMarks v-model="chooseMarksVisible" @choosed="choosed" :roleIds="roleIds" /> -->
</template>

<script setup>
import { getItem } from "@/utils/storage";
import { qcckGet, qcckPost, qcckPut } from "@/api/qcckApi.js";
import { tbGsxtZdrySelectVoById } from "@/api/zdr.js";
import controlInfo from '../../mpvGroup/model/controlInfo.vue'
import Info from "../model/info.vue";
import PersonnelTags from '../model/personnelTags.vue'
import Vehicle from '../model/vehicle.vue'
import BackInfo from '../model/bakInfo.vue'
import deployment from '../model/deployment.vue'
import contact from '../model/contact.vue'
import dynamicTrajectory from '../model/dynamicTrajectory.vue'
import visitRecord from '../model/visitRecord.vue'
import caseInfo from '../model/caseInfo.vue'
import actualPerformance from '../model/actualPerformance.vue'
import { ref, onUnmounted } from "vue";
const emit = defineEmits(["updateDate"]);
const chooseMarksVisible = ref(false);
const dialogForm = ref(false); //弹窗
const loading = ref(false);
const disabled = ref(false)
const showBut = ref(false)
const listQuery = ref({});
const butShow = ref(false)
const title = ref('新增')
// 初始化数据
const init = (type, row) => {
  dialogForm.value = true;
  if (type == 'add') {
    butShow.value = true
    title.value = '新增'
    disabled.value = false
    showBut.value = false
  } else {
    butShow.value = false
    tbGsxtZdrySelectVoById({ id: row.id }).then(res => {
      console.log(res, "dddddddddddddddd");

      Object.assign(listQuery.value, res)
    })
    if (type == 'edit') {
      showBut.value = true
      disabled.value = false
      title.value = '编辑'
    } else if (type == "del") {
      disabled.value = true
      showBut.value = false
      title.value = '删除'
    }
    else {
      disabled.value = true
      showBut.value = false
      title.value = '详情'
    }
  }
};

const activeSection = ref('info-section')
const rightBox = ref(null)
// 滚动到指定区域
const scrollToSection = (sectionId) => {
  const element = document.getElementById(sectionId);
  if (element && rightBox.value) {
    // 计算需要滚动的距离
    const elementTop = element.offsetTop;
    rightBox.value.scrollTo({
      top: elementTop - 150, // 减去一些偏移量，让内容更好看
      behavior: 'smooth' // 平滑滚动
    });
    activeSection.value = sectionId;
  }
}

// 监听滚动，更新当前激活的锚点
const handleScroll = () => {
  if (!rightBox.value) return;

  const scrollPosition = rightBox.value.scrollTop + 50;
  const sections = [
    'info-section', 'backinfo-section', 'groupLabels-section',
    'character-section', 'controlInfo-section', 'featinfo-section',
    'demandsInfo-section', 'requestInfo-section', 'personnel-section',
    'judgmentRecord-section', 'historyAssembly-section', 'joblogging-section'
  ];

  for (let i = sections.length - 1; i >= 0; i--) {
    const section = document.getElementById(sections[i]);
    if (section && section.offsetTop <= scrollPosition) {
      activeSection.value = sections[i];
      break;
    }
  }
}

// 监听右侧区域的滚动事件
if (typeof window !== 'undefined') {
  window.addEventListener('load', () => {
    if (rightBox.value) {
      rightBox.value.addEventListener('scroll', handleScroll);
    }
  });

  // 组件卸载时移除事件监听
  onUnmounted(() => {
    if (rightBox.value) {
      rightBox.value.removeEventListener('scroll', handleScroll);
    }
  });
}

const info = ref()
const personnelTags = ref()
// 提交
const submit = async () => {
  console.log(info.value.throwData());
  console.log(personnelTags.value.throwData());
  // 使用Promise.all处理所有子组件的验证和数据获取
  const [infoData, personnelTagsData] = await Promise.all([
    info.value.throwData(),
    personnelTags.value.throwData(),
  ]);

  console.log(infoData, personnelTagsData);

};


// 关闭
const close = () => {
  dialogForm.value = false;
  loading.value = false;
};

defineExpose({ init });
</script>

<style lang="scss" scoped>
@import "~@/assets/css/layout.scss";
@import "~@/assets/css/element-plus.scss";

.behaviorInfo {

  margin: 0 0 10px 0;
  // padding-bottom: 10px;
  border-bottom: 2px solid #409eff;
  position: relative;

  h3 {
    font-size: 18px;
    font-weight: 600;
    color: #303133;
  }

}

.textContent {
  margin-top: 10px;
}

/* 外层容器：控制尺寸和隐藏默认滚动条 */
.list-container {
  width: 100%;
  height: 400px;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  /* 隐藏外层滚动条，由内部控制 */
  margin: 20px auto;
  font-family: Arial, sans-serif;
}

/* 固定标题行 */
.list-header {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #f5f5f5;
  color: #333;
  font-weight: 600;
  padding: 0 16px;
  height: 50px;
  border-bottom: 2px solid #ddd;
  position: sticky;
  /* 关键：固定标题 */
  top: 0;
  z-index: 10;
  /* 确保在最上层 */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* 可滚动内容区域 */
.list-body {
  height: calc(100% - 50px);
  /* 容器高度减去标题高度 */
  overflow-y: auto;
  /* 垂直滚动 */
  overflow-x: hidden;
  background-color: #fff;
}

/* 每一行内容 */
.list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  height: 50px;
  border-bottom: 1px dashed #eee;
  font-size: 14px;
  color: #555;
}

.list-item:hover {
  background-color: #f9f9f9;
}

/* 自定义滚动条（可选） */
.list-container::-webkit-scrollbar {
  width: 8px;
}

.list-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.list-container::-webkit-scrollbar-thumb {
  background: #999;
  border-radius: 4px;
}

.list-container::-webkit-scrollbar-thumb:hover {
  background: #666;
}

/* Firefox 支持 */
.list-container {
  scrollbar-width: thin;
  scrollbar-color: #999 #f1f1f1;
}

::v-deep .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
  color: #0072ff;
  background: rgba(0, 114, 255, 0.3);
}

#contact-section {
  margin-top: 20px;
}

.boxlist {
  width: calc(99% - 50px);
  margin-top: 10px;
  overflow: hidden;
}

.depBox {
  border: 1px solid #e9e9e9;
  width: 305px;
  padding: 0 0 0 4px;
  border-radius: 4px;

  ::v-deep .el-input__inner {
    border: none;
  }

  ::v-deep .el-cascader .el-input.is-focus .el-input__inner {
    border-color: transparent !important;
  }

  ::v-deep .el-input__inner:focus {
    box-shadow: none;
  }

  ::v-deep .el-input.is-disabled .el-input__inner {
    border-color: transparent !important;
  }
}

.left_box {
  width: 220px;
  background-color: #fafafa;
  border: 1px solid #ebeef5;
  border-radius: 6px;
  padding: 15px;
  transition: all 0.3s ease;
}

.left_box:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border-color: #409eff;
}

// 锚点列表样式
.anchor-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.anchor-list li {
  padding: 10px 15px;
  margin-bottom: 5px;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s ease;
  font-size: 14px;
  color: #606266;
  position: relative;
}

.anchor-list li:hover {
  background-color: #e6f7ff;
  color: #409eff;
}

.anchor-list li.active {
  background-color: #409eff;
  color: #ffffff;
  font-weight: 500;
}

.anchor-list li.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: #ffffff;
  border-radius: 0 2px 2px 0;
}

.right_box {
  width: calc(100% - 240px);
  overflow-y: auto;
  // padding: 15px;
  background-color: #ffffff;
  // border: 1px solid #ebeef5;
  border-radius: 6px;

  .right_box>div {
    background-color: #f8f9fa;
    border-radius: 6px;
    padding: 20px;
    transition: all 0.3s ease;
    margin-bottom: 10px;
  }

  .right_box>div:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }

  .right_box h3 {
    font-size: 18px;
    font-weight: 600;
    color: #303133;
    margin: 0 0 10px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid #409eff;
    position: relative;
  }

  .right_box h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 60px;
    height: 2px;
    background-color: #409eff;
  }

  .headline {
    font-size: 16px;
    font-weight: 500;
    color: #303133;
    margin-bottom: 15px;
  }

  // 按钮样式优化
  .el-button {
    margin-left: 8px;
    transition: all 0.3s ease;
  }

  .el-button:first-child {
    margin-left: 0;
  }
}

// 响应式设计
@media screen and (max-width: 768px) {
  .form_cnt {
    flex-direction: column;
  }

  .left_box {
    width: 100%;
    margin-bottom: 20px;
  }

  .right_box {
    width: 100%;
  }

  .anchor-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }

  .anchor-list li {
    flex: 1 1 calc(33.333% - 10px);
    margin-bottom: 5px;
    text-align: center;
    padding: 8px 5px;
    font-size: 12px;
  }
}

::v-deep .avatar-uploader {
  display: flex
}
</style>
