<template>
  <div class="bigone">
    <!-- 标题和目录 -->
    <xiding>
      <div style="padding: 0 0.9rem 0 0.5rem">
        <div class="containerheadone" id="listtop">
          <Title :basicInfo="basicInformation"></Title>
          <el-button
            type="primary"
            size="medium"
            plain
            style="
              border: none;
              background-color: rgba(43, 98, 241, 0.1);
              color: #2b62f1;
            "
            @click="goBack"
          >
            返回
          </el-button>
        </div>
        <!-- 目录 -->
        <div class="containerhead">
          <el-menu
            :default-active="activeSection"
            mode="horizontal"
            @select="scrollToSection"
            ref="menuRef"
            class="custom-menu"
            @click="handleMenuClick"
            @mousedown.native.prevent
          >
            <el-menu-item
              v-for="(item, index) in sections"
              :key="index"
              :index="item.id"
              class="custom-menu-item"
            >
              {{ item.label }}
            </el-menu-item>
          </el-menu>
        </div>
      </div>
    </xiding>
    <div class="containerbody" v-if="isContainerVisible" @scroll="handleScroll">
      <!-- 基本信息 -->
      <div id="basic">
        <Basic
          :action="action"
          :basicInfo="basicInformation"
          @update-data="handleDataUpdate('basicInformation', $event)"
        >
        </Basic>
      </div>
      <!-- 规划信息 -->
      <div id="programme">
        <Programme
          :action="action"
          :planInfo="planInformation"
          :xmId="projectId"
          @update-data="handleDataUpdate('planInformation', $event)"
        >
        </Programme>
      </div>
      <!-- 建筑信息 -->
      <div id="buildings">
        <Buildings :action="action" :xmId="projectId"></Buildings>
      </div>
      <!-- 要素模型信息 -->
      <div id="models">
        <Models
          :action="action"
          :wysmxInfo="wysmxInformations"
          @updata-data="handleDataUpdate('wysmxInformations', $event)"
        >
        </Models>
      </div>
      <!-- 月度进展信息 -->
      <div id="months">
        <Months :action="action" :xmId="projectId"></Months>
      </div>
      <!-- 企业入驻信息 -->
      <div id="companyenter">
        <Companyenter
          :xmId="projectId"
          :action="action"
          :qyrzInfo="qyrzInformation"
          @update-data="handleDataUpdate('qyrzInformation', $event)"
        >
        </Companyenter>
      </div>
      <!-- 项目画像 -->
      <div id="projectpicture">
        <Projectpicture :action="action" :id="projectId"></Projectpicture>
      </div>
      <!-- 项目图例 -->
      <div id="projectpicturetwo">
        <Projectdraw :action="action" :xmId="projectId"> </Projectdraw>
      </div>
      <!-- 项目巡礼 -->
      <div id="projectgift">
        <Projectgift :action="action" :xmId="projectId"></Projectgift>
      </div>
      <!-- 现场实况 -->
      <div id="liver">
        <Liver :action="action"></Liver>
      </div>
      <!-- 项目备忘录 -->
      <div id="memo">
        <Memo :action="action" :xmId="projectId"></Memo>
      </div>
      <!-- 其他信息 -->
      <div class="bottombox" id="others">
        <Others
          :action="action"
          :xmId="projectId"
          :anotherInfo="projectOtherInfos"
          @update-data="handleDataUpdate('projectOtherInfos', $event)"
        >
        </Others>
      </div>
      <div class="footer">
        <el-button
          type="primary"
          v-if="
            (checkRole(['company']) && !isSubmitted && action === 'fill') ||
            action === 'fill'
          "
          @click="submitAll"
          >提交审核</el-button
        >
        <el-button
          type="primary"
          v-if="
            (checkRole(['company']) && !isSubmitted && action === 'fill') ||
            action === 'fill'
          "
          @click="saveAll"
          >暂存</el-button
        >
      </div>
    </div>
    <!-- 返回顶部 -->
    <el-backtop
      target=".containerbody"
      :visibility-height="200"
      :bottom="50"
      :right="10"
      title="返回顶部"
      style="z-index: 1000"
    >
    </el-backtop>
  </div>
</template>

<script>
import xiding from "./index2.vue";
import Title from "@/views/components/ProjectDetails/Title.vue";
import Basic from "@/views/components/ProjectDetails/Basic.vue";
import Buildings from "@/views/components/ProjectDetails/Buildings.vue";
import Companyenter from "@/views/components/ProjectDetails/Companyenter.vue";
import Liver from "@/views/components/ProjectDetails/Liver.vue";
import Memo from "@/views/components/ProjectDetails/Memo.vue";
import Models from "@/views/components/ProjectDetails/Models.vue";
import Months from "@/views/components/ProjectDetails/Months.vue";
import Programme from "@/views/components/ProjectDetails/Programme.vue";
import Projectgift from "@/views/components/ProjectDetails/Projectgift.vue";
import Projectpicture from "@/views/components/ProjectDetails/Projectpicture.vue";
import Projectdraw from "@/views/components/ProjectDetails/Projectdraw.vue";
import Others from "@/views/components/ProjectDetails/Others.vue";
import { checkPermi, checkRole } from "@/utils/permission";
import {
  getBasicInformationById,
  fillBasicInformation,
  auditBasicInformation,
  tempBasicInformation,
  getqyBasicInformationPage,
} from "@/api/ManageApi/index";

export default {
  components: {
    Title,
    Basic,
    Buildings,
    Companyenter,
    Liver,
    Memo,
    Models,
    Months,
    Programme,
    Projectgift,
    Projectpicture,
    Projectdraw,
    Others,
    xiding,
  },
  data() {
    return {
      activeSection: "basic",
      sections: [
        { id: "basic", label: "基本信息" },
        { id: "programme", label: "规划信息" },
        { id: "buildings", label: "建筑信息" },
        { id: "models", label: "五要素模型信息" },
        { id: "months", label: "月度进展信息" },
        { id: "companyenter", label: "企业入驻信息" },
        { id: "projectpicture", label: "项目画像" },
        { id: "projectpicturetwo", label: "项目图例" },
        { id: "projectgift", label: "项目巡礼" },
        { id: "liver", label: "现场实况" },
        { id: "memo", label: "项目备忘录" },
        { id: "others", label: "其他信息" },
      ],
      projectId: null,
      isContainerVisible: true,
      isSubmitted: false,
      lastScrollTop: 0,
      scrollDirection: 'down',
      scrollTimeout: null,
      basicInformation: {
        acceptanceTime: "",
        begainTime: "",
        endTime: "",
        fj: "",
        introduction: "",
        issuingTime: "",
        jsdd: "",
        jsjd: "",
        jsms: 0,
        label: "",
        latitude: "",
        longitude: "",
        name: "",
        nature: 0,
        id: 0,
        phone: "",
        prioritize: "",
        projectLeader: "",
        sgdw: "",
        sjdw: "",
        ssgnq: 0,
        status: 0,
        tyshxydm: "",
        unitIntroduction: "",
        xmfrdwxz: "",
        xzfl: 0,
        zjzmj: 0,
        ztze: 0,
        zydmj: 0,
      },
      planInformation: {
        bzcjzmj: 0,
        dsjzmj: 0,
        dxjzmj: 0,
        fhdj: "",
        fjdctcw: 0,
        ghwj: "",
        jdctcw: 0,
        jrjljzmj: 0,
        jzds: 0,
        jzmd: 0,
        ldl: 0,
        id: 0,
        rjl: 0,
        xmId: 0,
        zgjzcs: 0,
        zgjzgd: 0,
        zjzmj: 0,
        zydmj: 0,
      },
      projectOtherInfos: [],
      wysmxInformations: [],
      qyrzInformation: {
        gycfpjwyf: 0,
        gycfpjzj: 0,
        kzczmj: 0,
        params: {},
        remark: "",
        rysl: 0,
        id: 0,
        rzl: 0,
        rzqyhylx: "",
        rzqys: 0,
        xmId: 0,
        yczmj: 0,
      },
      projectRemarks: [],
      loading: false,
      scrollTimeout: null,
    };
  },
  created() {
    this.projectId = Number(this.$route.params.id);
    this.loadData();
    this.action = this.$route.query.action;
    this.loadData();
    // 添加滚动监听
    window.addEventListener("scroll", this.handleScroll);
    const container = document.querySelector(".containerbody");
    if (container) {
      container.addEventListener("scroll", this.handleScroll);
    }
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScroll);
    const container = document.querySelector(".containerbody");
    if (container) {
      container.removeEventListener("scroll", this.handleScroll);
    }
  },
  methods: {
    checkPermi,
    checkRole,
    loadData() {
      this.loading = true;
      getBasicInformationById(this.projectId)
        .then((response) => {
          const data = response.data;
          this.basicInformation = data.basicInformation;
          this.planInformation = data.planInformation;
          this.projectOtherInfos = data.projectOtherInfos;
          this.wysmxInformations = data.wysmxResponses;
          this.qyrzInformation = data.qyrzInformation;
          this.projectRemarks = data.projectRemarks;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    scrollToSection(id) {
      this.activeSection = id;
      const element = document.getElementById(id);
      if (element) {
        element.scrollIntoView({ behavior: "smooth" });
        this.$nextTick(() => {
          // 移除菜单项焦点设置代码，仅设置内容区域焦点
          element.focus();
        });
      }
    },
    scrollToTop() {
      const basicSection = document.getElementById("listtop");
      if (basicSection) {
        basicSection.scrollIntoView({ behavior: "smooth" });
      }
    },
    goBack() {
      this.$router.go(-1);
    },
    handleScroll() {
      const container = document.querySelector(".containerbody");
      if (!container) return;
      if (this.scrollTimeout) {
        clearTimeout(this.scrollTimeout);
      }
      this.scrollTimeout = setTimeout(() => {
        const scrollPosition = container.scrollTop;
        if (scrollPosition > this.lastScrollTop) {
          this.scrollDirection = 'down';
        } else {
          this.scrollDirection = 'up';
        }
        this.lastScrollTop = scrollPosition;
        const offset = this.scrollDirection === 'down' ? 500 : 200;
        const adjustedScrollPosition = scrollPosition + offset;
        for (let i = this.sections.length - 1; i >= 0; i--) {
          const element = document.getElementById(this.sections[i].id);
          if (element) {
            const elementPosition = element.offsetTop - container.offsetTop;
            if (elementPosition <= adjustedScrollPosition) {
              if (this.activeSection !== this.sections[i].id) {
                console.log(`切换到 ${this.sections[i].label}，位置: ${elementPosition}，偏移: ${offset}`);
                this.activeSection = this.sections[i].id;
              }
              break;
            }
          }
        }
      }, 50);
    },
    // 子组件的更新
    handleDataUpdate(dataKey, updatedData) {
      if (dataKey === "projectOtherInfos" || dataKey === "wysmxInformations") {
        if (Array.isArray(updatedData)) {
          this[dataKey] = updatedData;
        } else {
          this[dataKey].push(updatedData);
        }
      } else {
        this[dataKey] = updatedData;
      }
      console.log(`接收到 ${dataKey} 1234更新:`, updatedData);
    },

    isDefault(obj, defaultObj) {
      for (const key in defaultObj) {
        if (obj[key] !== defaultObj[key]) {
          return false;
        }
      }
      return true;
    },
    // 暂存数据
    saveAll() {
      // 全局加载动画
      const loading = this.$loading({
        lock: true,
        text: "正在暂存中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });

      const tempData = this.prepareSubmitData(); // 复用数据

      tempBasicInformation(tempData)
        .then((response) => {
          this.$message.success("暂存成功");
        })
        .catch((error) => {
          this.$message.error("暂存失败");
        })
        .finally(() => {
          // 关闭动画
          loading.close();
        });
    },
    // 获取企业入驻总数
    async getEnterpriseCount() {
      try {
        const params = { xmId: this.projectId, current: 1, size: 1 }; // 只需要总数，size=1
        const response = await getqyBasicInformationPage(params);
        return response.data.total || 0; // 返回总数，默认为0
      } catch (error) {
        return 0;
      }
    },
    // 提交数据
    async submitAll() {
      // 创建全局加载动画
      const loading = this.$loading({
        lock: true,
        text: "正在提交...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });

      // 校验 wysmxInformations
      if (
        this.wysmxInformations.length === 0 ||
        this.wysmxInformations.includes(null)
      ) {
        this.$message.error("请填写模型管理信息");
        loading.close();
        return;
      }

      // 校验 qyrzInformation 的 rzqys
      const rzqys = await this.getEnterpriseCount();
      if (rzqys === 0 || rzqys === null || rzqys === undefined) {
        this.$message.error("请先导入企业入驻信息");
        loading.close();
        return;
      }

      // 校验 planInformation
      const planRequiredFields = [
        "zydmj",
        "rjl",
        "zjzmj",
        "jzds",
        "zgjzcs",
        "fhdj",
      ];
      const planMissingFields = planRequiredFields.filter(
        (field) => !this.planInformation[field]
      );
      if (planMissingFields.length > 0) {
        this.$message.error("请填写完整的规划信息");
        loading.close();
        return;
      }

      // 校验 basicInformation
      const basicRequiredFields = [
        "ssgnq",
        "begainTime",
        "endTime",
        "xzfl",
        "jsms",
      ];
      const basicMissingFields = basicRequiredFields.filter(
        (field) => !this.basicInformation[field]
      );
      if (basicMissingFields.length > 0) {
        this.$message.error("请填写完整的基本信息");
        loading.close();
        return;
      }

      // 准备数据并提交
      const submitData = this.prepareSubmitData();
      // console.log('准备提交的完整数据:', JSON.stringify(submitData, null, 2));

      fillBasicInformation(submitData)
        .then((response) => {
          this.$message.success("提交成功");
          this.isSubmitted = true;
          this.$router.push("/manage");
        })
        .catch((error) => {
          this.$message.error("提交失败");
          console.error("提交错误:", error);
        })
        .finally(() => {
          loading.close();
        });
    },

    // 审核通过的提交数据
    aduitAll() {
      this.loading = true;
      const submitData = this.prepareSubmitData();

      auditBasicInformation(submitData)
        .then((response) => {
          console.log("提交成功:", response);
          this.$message.success("审核通过");
          this.isContainerVisible = false;
          this.isSubmitted = true;
          this.$router.push("/manage");
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 准备数据（供暂存和提交共用）
    prepareSubmitData() {
      return {
        basicInformation: this.basicInformation,
        planInformation: this.planInformation,
        projectOtherInfos: this.projectOtherInfos,
        qyrzInformation: this.qyrzInformation,
        wysmxInformations: this.formatWysmxData(),
      };
    },

    // 格式化要素模型数据
    formatWysmxData() {
      return this.wysmxInformations.flatMap((item) =>
        item.list.map((listItem) => ({
          id: listItem.id,
          createTime: this.formatDate(new Date()),
          updateTime: this.formatDate(new Date()),
          xmId: this.projectId,
          ysmc: item.ysmc,
          zdinfor: listItem.zdinfor,
          zdname: listItem.zdname,
          createBy: "",
          updateBy: "",
          createId: 0,
          updateId: 0,
        }))
      );
    },

    // 日期格式化方法
    formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0");
      const day = String(date.getDate()).padStart(2, "0");
      const hours = String(date.getHours()).padStart(2, "0");
      const minutes = String(date.getMinutes()).padStart(2, "0");
      const seconds = String(date.getSeconds()).padStart(2, "0");
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    handleMenuClick() {
      if (this.$refs.menuRef) {
          this.$refs.menuRef.$el.blur();
      }
    },
  },
};
</script>

<style scoped>
.containerbody {
  height: calc(100% - 7rem);
  padding: 0.3rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  overflow: hidden;
  overflow-y: auto;
}

.containerheadone {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 1rem 0 0.7rem;
  background-color: #fff;
}

.containerhead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background-color: #ffffff;
}

.custom-menu {
  margin: 1rem 0rem;
  display: flex;
  gap: 1rem;
  border: none;
  outline: none !important;
}

.custom-menu-item {
  color: #3d424c;
  width: auto;
  height: 2rem;
  background: #f4f7fe;
  border-radius: 0.25rem 0.25rem 0.25rem 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 高亮 */
.custom-menu-item.is-active {
  background-color: #2b62f1;
  color: #fff !important;
}

/* 悬停 */
.custom-menu-item:hover {
  background-color: #2b62f1;
  color: #fff !important;
}

/* 默认的下划线 */
.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
  background-color: #2b62f1;
  border-bottom: none;
}

/* 移除菜单焦点样式 */
.custom-menu:focus,
.custom-menu:focus-within,
.custom-menu-item:focus,
.el-menu--horizontal .el-menu-item:focus {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

.bottombox {
  margin-bottom: 2rem;
}

.bigone {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.message-notice {
  position: fixed;
  bottom: 40%;
  right: 1%;
  z-index: 1000;
  font-size: 23px;
  cursor: pointer;
}

.footer {
  display: flex;
  padding: 0 0 2rem 0;
  justify-content: center;
}
</style>
