<template>
  <div class="dialog" v-if="dialogForm">
    <div class="head_box">
      <span class="title">{{ title }} 重点群体管理 </span>
      <div>
        <el-button type="primary" v-if="title == '新增'" size="small" :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"><Backinfo ref="backinfo" :disabled="disabled" :showBut="showBut" :dataList="listQuery" /></div>
        <div id="groupLabels-section"><GroupLabels ref="groupLabels" :disabled="disabled" :showBut="showBut" :dataList="listQuery" /></div>
        <div id="character-section"><Character ref="character" :disabled="disabled" :showBut="showBut" :dataList="listQuery" /></div>
        <div id="controlInfo-section"><ControlInfo ref="controlInfo" :disabled="disabled" :showBut="showBut" :dataList="listQuery" /></div>
        <div id="featinfo-section"><Featinfo ref="featinfo" :disabled="disabled" :showBut="showBut" :dataList="listQuery" /></div>
        <div id="demandsInfo-section"><DemandsInfo ref="demandsInfo" :disabled="disabled" :showBut="showBut" :dataList="listQuery" /></div>
        <div id="requestInfo-section"><RequestInfo ref="requestInfo" :disabled="disabled" :showBut="showBut" :dataList="listQuery" /></div>
        <div id="portrayal-section" v-if="portrayal"><Portrayal :disabled="disabled" :dataList="listQuery" /></div>
        <div id="personnel-section"><Personnel ref="personnel" :disabled="disabled" :showBut="showBut" :dataList="listQuery" /></div>
        <div id="judgmentRecord-section"><JudgmentRecord ref="judgmentRecord" :disabled="disabled" :showBut="showBut" :dataList="listQuery" /></div>
        <div id="historyAssembly-section"><HistoryAssembly ref="historyAssembly" :disabled="disabled" :showBut="showBut" :dataList="listQuery" /></div>
        <div id="joblogging-section"><Joblogging ref="joblogging" :disabled="disabled" :showBut="showBut" :dataList="listQuery" /></div>
      </div>
    </div>
  </div>

</template>

<script setup>
import { ref, getCurrentInstance, onUnmounted } from "vue";
import Info from '../model/info.vue'
import Backinfo from "../model/backinfo.vue";
import GroupLabels from '../model/groupLabels.vue'
import Character from "../model/character.vue";
import ControlInfo from '../model/controlInfo'
import Featinfo from '../model/featinfo'
import DemandsInfo from '../model/demandsInfo'
import RequestInfo from '../model/requestInfo'
import Personnel from '../model/personnel.vue'
import JudgmentRecord from "../model/judgmentRecord.vue";
import HistoryAssembly from "../model/historyAssembly.vue";
import Joblogging from "../model/joblogging.vue";
import Portrayal from '../model/portrayal.vue'
import { tbGsxtZdqtSelectVoById, tbZdqtQtxzBatchAdd, tbGsxtZdqtAdd, tbZdqtGkxxBatchAdd, tbZdqtSqBatchAdd } from '@/api/qt'
const { proxy } = getCurrentInstance();
const dialogForm = ref(false)
const listQuery = ref({})
const disabled = ref(false)
const showBut = ref()
const title = ref('新增')
const portrayal = ref(false)
const init = (type, row) => {
  dialogForm.value = true
  if (type == 'add') {
    listQuery.value = {}
    portrayal.value=false
    disabled.value = false
    showBut.value = false
    title.value = '新增'
  } else {
    portrayal.value = true
    if (type == 'edit') {
      showBut.value = true
      disabled.value = false
      title.value = '修改'
    } else {
      disabled.value = true
      showBut.value = false
      title.value = '详情'
    }
    tbGsxtZdqtSelectVoById(row.id).then(res => {
      listQuery.value = res
      console.log(res);
    })
  }
}
const info = ref(null)
const backinfo = ref(null)
const groupLabels = ref(null)
const character = ref(null)
const controlInfo = ref(null)
const featinfo = ref(null)
const demandsInfo = ref(null)
const requestInfo = ref(null)
const personnel = ref(null)
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 submit = async () => {
  try {
    // 使用Promise.all处理所有子组件的验证和数据获取
    const [infoData, backinfoData, groupLabelsData, characterData, controlInfoData, featinfoData, demandsInfoData, requestInfoData, personnelData] = await Promise.all([
      info.value.throwData(),
      backinfo.value.throwData(),
      groupLabels.value.throwData(),
      character.value.throwData(),
      controlInfo.value.throwData(),
      featinfo.value.throwData(),
      demandsInfo.value.throwData(),
      requestInfo.value.throwData(),
      personnel.value.throwData()
    ]);

    const datamasg = {
      ...infoData,
      qtBjzl: backinfoData.qtbjxx,
      qtFjZl: JSON.stringify(backinfoData.fileList),
      bqList: groupLabelsData,
      qttz: featinfoData,
      zyxx: demandsInfoData,
      sqfj: requestInfoData.fileList.length > 0 ? JSON.stringify(requestInfoData.fileList) : "",
      zdryList: personnelData
    }

    const res = await tbGsxtZdqtAdd(datamasg)

    const qtxz = {
      list: characterData.map(item => {
        return { ...item, qtid: res }
      })
    }

    const sqxx = {
      list: requestInfoData.sqlist.map(item => {
        return { sqnr: item.sqnr, qtid: res }
      })
    }

    const gkxx = {
      list: controlInfoData.map(item => { return { ...item, qtid: res } })
    }

    await tbZdqtQtxzBatchAdd(qtxz)
    await tbZdqtGkxxBatchAdd(gkxx)
    await tbZdqtSqBatchAdd(sqxx)

    proxy.$message({
      message: '新增成功',
      type: 'success',
    })

    close()
  } catch (error) {
    console.log(error);
    proxy.$message({
      message: error.message || '表单验证失败或保存出错，请检查输入信息',
      type: 'error'
    })
  }
};
// 关闭
const close = () => {
  dialogForm.value = false
};
defineExpose({
  init
});
</script>

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

.dialog {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.head_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background-color: #f8f9fa;
  border-bottom: 1px solid #ebeef5;
}

.title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.form_cnt {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  min-height: 400px;
}

.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>
