<template>
  <div class="container">
    <el-row style="margin: 0px auto 150px">
      <div class="bjt">
        <img
          src="../../assets/images/background.png"
          alt=""
          style="
            height: 111px;
            width: 877px;
            /* background-size: cover;
      position: absolute;
      top: 50%;
      left: 50%; 
      transform: translate(-50%, -50%);
      object-fit: cover; */
          "
        />
      </div>
    </el-row>
    <el-row class="content" style="background-color: #f5f8fe; height: 100vh">
      <el-col
        :xs="24"
        :sm="24"
        :md="24"
        :lg="24"
        :xl="24"
        style="
          padding: 20px;
          border-radius: 10px;
          height: auto;
          background-color: #f5f8fe;
        "
      >
        <el-menu
          v-if="activeNameOuter === '产品'"
          :default-active="activeNameInner"
          class="product-menu"
          :background-color="'transparent'"
          :text-color="'#333'"
          :active-text-color="'#409EFF'"
          :default-openeds="defaultOpeneds"
        >
          <!-- 外层菜单 -->
          <el-submenu
            v-for="outerItem in collapseDataOuter"
            :key="outerItem.px"
            :index="outerItem.px"
            @click.native="setActiveOuter(outerItem.cplx)"
          >
            <template #title>
              <img src="../../assets/images/tag.png" alt="" />
              <span
                style="
                  font-family: 'PingFang SC';
                  font-weight: 800;
                  font-size: 23px;
                  color: #222222;
                  line-height: 40px;
                "
              >
                {{ outerItem.mc }}
              </span>
            </template>

            <!-- 第二级菜单 -->
            <el-submenu
              v-for="innerItem in outerItem.cpChildren"
              :key="innerItem.id"
              :index="innerItem.px"
              :class="{ 'inner-submenu-active': isInnerActive(innerItem.name) }"
              @click.native="setActiveInner(innerItem.mc)"
            >
              <template #title>
                <span
                  style="
                    font-family: 'PingFang SC';
                    font-weight: 800;
                    font-size: 17px;
                    color: #222222;
                    line-height: 26px;
                  "
                >
                  {{ innerItem.mc }}
                </span>
              </template>

              <!-- 第三级菜单 -->
              <el-menu-item
                v-for="content in innerItem.children2"
                :key="content.id"
                :index="innerItem.name + '-' + content.mc"
                @click.native="
                  handleInnerClick(
                    innerItem.name,
                    content.mc,
                    content.id,
                    content.remark
                  )
                "
                :class="{
                  'menu-item-active':
                    activeNameInner === innerItem.name + '-' + content.mc,
                }"
              >
                <span
                  :style="{
                    width: '6px',
                    height: '6px',
                    background: '#165BFF',
                    borderRadius: '50%',
                    display: 'inline-block',
                    marginRight: '10px',
                  }"
                ></span>
                <span
                  :style="{
                    fontFamily: 'PingFang SC',
                    fontWeight: '500',
                    fontSize: '15px',
                    color:
                      activeNameInner === innerItem.name + '-' + content.mc
                        ? '#165BFF'
                        : '#222222',
                    textDecoration:
                      activeNameInner === innerItem.name + '-' + content.mc
                        ? 'underline'
                        : 'none',
                    textDecorationColor:
                      activeNameInner === innerItem.name + '-' + content.mc
                        ? '#165BFF'
                        : 'transparent',
                    textUnderlineOffset:
                      activeNameInner === innerItem.name + '-' + content.mc
                        ? '8px'
                        : '0',
                  }"
                >
                  {{ content.mc }}
                </span>
                <img
                  v-if="content.zx === '1'"
                  src="../../assets/images/new.png"
                  alt="new"
                  style="
                    width: 40px;
                    height: 40px;
                    margin-left: 5px;
                    vertical-align: middle;
                  "
                />
              </el-menu-item>
            </el-submenu>
          </el-submenu>
        </el-menu>
        <el-menu
          v-if="activeNameOuter === '服务类'"
          :default-active="activeNameInner"
          class="product-menu"
          :background-color="'transparent'"
          :text-color="'#333'"
          :active-text-color="'#409EFF'"
          :default-openeds="defaultOpeneds"
        >
          <!-- 外层菜单 -->
          <el-submenu
            v-for="outerItem in collapseDataOuter"
            :key="outerItem.px"
            :index="outerItem.px"
            @click.native="setActiveOuter(outerItem.cplx)"
          >
            <template #title>
              <img src="../../assets/images/tag.png" alt="" />
              <span
                style="
                  font-family: 'PingFang SC';
                  font-weight: 800;
                  font-size: 23px;
                  color: #222222;
                  line-height: 40px;
                "
              >
                {{ outerItem.mc }}
              </span>
            </template>
            <!-- 服务类的第二级菜单 -->
            <el-menu-item
              v-for="service in outerItem.fwlChildren"
              :key="service.id"
              :index="service.mc"
              @click.native="
                handleServiceClick(
                  outerItem.mc,
                  service.mc,
                  service.id,
                  service.remark
                )
              "
              :class="{
                'menu-item-active':
                  activeNameInner === outerItem.mc + '-' + service.mc,
                'service-menu-item-active':
                  activeNameInner === outerItem.mc + '-' + service.mc,
              }"
            >
              <span
                :style="{
                  width: '6px',
                  height: '6px',
                  background: '#165BFF',
                  borderRadius: '50%',
                  display: 'inline-block',
                  marginRight: '10px',
                }"
              ></span>
              <span
                :style="{
                  fontFamily: 'PingFang SC',
                  fontWeight: '500',
                  fontSize: '15px',
                  color:
                    activeNameInner === outerItem.mc + '-' + service.mc
                      ? '#165BFF'
                      : '#222222',
                  textDecoration:
                    activeNameInner === outerItem.mc + '-' + service.mc
                      ? 'underline'
                      : 'none',
                  textDecorationColor:
                    activeNameInner === outerItem.mc + '-' + service.mc
                      ? '#165BFF'
                      : 'transparent',
                  textUnderlineOffset:
                    activeNameInner === outerItem.mc + '-' + service.mc
                      ? '8px'
                      : '0',
                }"
              >
                {{ service.mc }}
                <!-- 判断 zx 是否为 1，如果是则显示图片 -->
                <img
                  v-if="service.zx === '1'"
                  src="../../assets/images/new.png"
                  alt="new"
                  style="
                    width: 40px;
                    height: 40px;
                    margin-left: 5px;
                    vertical-align: middle;
                  "
                />
              </span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { getListcx, getListdt } from "@/api/sy.js";
export default {
  name: "gasDigitization",
  // components: { footerNav },

  data() {
    return {
      remark: "", // 新增的remark属性
      defaultOpeneds: [], // 根据需要初始化 defaultOpeneds
      selectedId: null, // 用于存储选中项的ID
      cpjj: "",
      gntd: "",
      yycx: "",
      yfjs: "",
      tdjs: "",
      fwts: "",
      fwal: "",
      activeNameOuter: "产品", // 默认选中的第一级选项
      activeNameInner: "", // 默认选中的第二级选项
      collapseDataOuter: [],
      activeName: "first",
      name: null,
      ipdz: null,
      yl1: null,
      showDialog: false, // 控制对话框显示的变量
      form: {},
    };
  },

  watch: {
    activeNameOuter(newValue) {
      console.log(newValue, "newValue");
      if (newValue === "服务类") {
        const selectedItem = this.collapseDataOuter.find(
          (item) => item.mc === "智能化服务类"
        );
        if (selectedItem && selectedItem.fwlChildren.length > 0) {
          const firstService = selectedItem.fwlChildren[0];
          this.activeNameInner = `智能化服务类-${firstService.mc}`;
          this.activeServiceId = firstService.id; // 设置 activeServiceId 为第一项的 ID
          console.log(this.activeServiceId, "Selected Service ID");
          this.getListdt(this.activeServiceId);
        }
      } else if (newValue === "产品") {
        const selectedItem = this.collapseDataOuter.find(
          (item) => item.mc === "软硬件产品"
        );
        if (
          selectedItem &&
          selectedItem.cpChildren &&
          selectedItem.cpChildren.length > 0
        ) {
          const firstProduct = selectedItem.cpChildren[0]; // 从 cpChildren 中获取第一个产品
          if (firstProduct.children2 && firstProduct.children2.length > 0) {
            const firstProductChild = firstProduct.children2[0]; // 从 children2 中获取第一个子产品
            this.activeNameInner = `软硬件产品-${firstProductChild.mc}`;
            this.activeServiceId = firstProductChild.id; // 设置 activeServiceId 为第一项的 ID
            console.log(this.activeServiceId, "Selected Product ID");
            this.getListdt(this.activeServiceId);
          }
        }
      }
    },
  },

  mounted() {
    this.getList();
  },
  methods: {
    setActiveOuter(cplx) {
      this.activeNameOuter = cplx; // 设置选中的外层菜单类型
      this.activeNameInner = ""; // 清空内层选中的状态

      // 查找对应的外层菜单项
      const selectedOuterItem = this.collapseDataOuter.find(
        (item) => item.cplx === cplx
      );

      if (selectedOuterItem) {
        // 处理产品类型的情况
        if (cplx === "产品") {
          if (
            selectedOuterItem.cpChildren &&
            selectedOuterItem.cpChildren.length > 0
          ) {
            const firstInnerItem = selectedOuterItem.cpChildren[0];
            const firstContent =
              firstInnerItem.children2 && firstInnerItem.children2[0]; // 确保存在内容

            if (firstContent) {
              this.setActiveInner(
                firstInnerItem.name,
                firstContent.mc,
                firstContent.id,
                firstContent.zx
              ); // 传递 zx
              this.displaySelectedInfo(firstInnerItem.name, firstContent); // 展示选中的信息
            }
          }
        } else if (cplx === "服务类") {
          if (
            selectedOuterItem.fwlChildren &&
            selectedOuterItem.fwlChildren.length > 0
          ) {
            const firstService = selectedOuterItem.fwlChildren[0]; // 默认选中第一个服务
            this.setActiveInner(
              selectedOuterItem.mc,
              firstService.mc,
              null,
              firstService.id,
              firstService.zx
            ); // 传递 zx
            this.displaySelectedInfo(selectedOuterItem.mc, firstService); // 展示选中的信息
          }
        }

        // 设置展开的菜单项
        this.defaultOpeneds = [selectedOuterItem.px]; // 展开外层菜单
      }
    },

    displaySelectedInfo(menuName, content) {
      // 在这里更新展示选中的内容的信息
      // 你可以根据需要展示的内容更新相应的数据属性
      this.selectedMenuName = menuName; // 例如设置当前选中的菜单名称
      this.selectedContent = content; // 设置当前选中的内容

      // 其他逻辑，例如更新界面中的某些元素的显示
    },

    getList() {
      getListcx().then((res) => {
        console.log("res", res);
        this.collapseDataOuter = res.data;

        // 获取数据后，设置默认选中的第一个外层和内层菜单项
        if (this.collapseDataOuter.length > 0) {
          const firstOuterItem = this.collapseDataOuter[0];
          this.activeNameOuter = firstOuterItem.cplx;

          if (
            firstOuterItem.cpChildren &&
            firstOuterItem.cpChildren.length > 0
          ) {
            const firstInnerItem = firstOuterItem.cpChildren[0];
            const firstContent = firstInnerItem.children2[0]; // 假设有第三级菜单内容

            // 默认选中第一项
            this.setActiveInner(
              firstInnerItem.mc,
              firstContent.mc,
              firstContent.id
            );

            // 设置展开的菜单项
            this.defaultOpeneds = [firstOuterItem.px, firstInnerItem.px]; // 外层和内层菜单都展开
          }
        }
      });
    },

    setActiveOuter(cplx) {
      this.activeNameOuter = cplx;
      console.log("Outer menu set to:", this.activeNameOuter);
    },
    handleInnerClick(innerName, contentName, contentId) {
      this.activeNameInner = `${innerName}-${contentName}`;
      // 传递 contentId 到路由中
      this.$router.push({
        path: "/sj",
        query: {
          id: contentId,
        },
      });
      // 处理内容相关的逻辑，比如获取内容等
      this.getListdt(contentId);
      console.log(contentId, "contentId");
    },

    handleServiceClick(outerName, serviceName, serviceId) {
      this.activeNameInner = `${outerName}-${serviceName}`;
      // 传递 serviceId 到路由中
      this.$router.push({
        path: "/sj",
        query: {
          id: serviceId,
        },
      });
      // 处理服务相关的逻辑，比如获取内容等
      this.getListdt(serviceId);
      console.log(serviceId, "serviceId");
    },

    setActiveInner(innerName, content = "", id = null) {
      if (content) {
        this.activeNameInner = `${innerName}-${content}`;
        console.log(this.activeNameInner, "this.activeNameInner");
        this.selectedId = id; // 更新选中项的ID
        console.log("activeNameInner updated to:", this.activeNameInner);
        this.getListdt(this.selectedId); // 获取内容数据
      }
    },
    getListdt(id) {
      // 假设你的getListdt接口是一个异步函数
      getListdt(id)
        .then((res) => {
          console.log("12222:", res.data.remark);
          this.cpjj = res.data.cpjj;
          this.gntd = res.data.gntd;
          this.yycx = res.data.yycx;
          this.yfjs = res.data.yfjs;
          this.tdjs = res.data.tdjs;
          this.fwts = res.data.fwts;
          this.fwal = res.data.fwal;
          this.remark = res.data.remark;

          // 在这里处理返回的数据
        })
        .catch((error) => {
          console.error("Error fetching data:", error);
        });
    },

    isInnerActive(innerName) {
      return this.activeNameInner.startsWith(innerName); // 判断是否为活动状态
    },
    handleChange(val) {
      console.log(val);
    },
    handleClick(tab, event) {
      this.activeName = tab.name; // 确保更新activeName
      console.log(this.activeName, " this.activeName");
    },
  },
};
</script>

<style scoped lang="scss">
@media (max-width: 1199px) {
  .bjt {
    height: 150px;
    // background: rgba(255, 255, 255, 0.9);
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    padding: 0 15px;
    // z-index: 20;
    box-shadow: 0 1px 3px 2px rgba(0, 0, 0, 0.06);
    display: block;
  }
}

::v-deep.tabs {
  display: flex;
  align-items: flex-start;
}

::v-deep.custom-tabs {
  flex-grow: 1;
  // padding-right: 10px
}

::v-deep.remark {
  position: absolute;
  top: 5px;
  /* 向上移动 */
  right: 30px;
  /* 向左移动 */
  white-space: nowrap;
  font-size: 18px;
  font-weight: bold;
}

::v-deep.menu-item-active {
  background-color: #ffffff;
  /* 选中项背景白色 */
}

::v-deep.related-menu-item-active {
  background-color: #ffffff;
  /* 兄弟项背景白色 */
}

::v-deep .service-menu-item-active {
  background-color: #ffffff !important; // 服务类选中项背景色为白色
}

::v-deep img {
  max-width: 90% !important;
  height: auto !important;
}

::v-deep video {
  max-width: 90% !important;
  height: auto !important;
}

::v-deep .rounded-corner-start {
  border-radius: 10px 0 0 0 !important;
}

::v-deep.rounded-corner-end {
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  /* 其他可能需要的样式 */
}

::v-deep.el-submenu .el-menu-item {
  height: 39px;
  line-height: 50px;
  padding: 0 45px;
  min-width: 200px;
}

::v-deep.el-submenu .el-submenu__title {
  border-bottom-color: #1890ff;
  height: 46px;
}

::v-deep.custom-tabs .el-tabs__nav .el-tabs__item {
  padding: 0 20px;
  height: 43px;
  box-sizing: border-box;
  line-height: 40px;
  display: inline-block;
  list-style: none;
  font-size: 15px;
  font-weight: 500;
  color: #303133;
  position: relative;
  width: 120px;
  text-align: center;
}

// ::v-deep.el-tabs .el-tabs__header.el-tabs__nav .el-tabs__item {
//   color: #ff0000;
//   /* 设置字体颜色 */
// }

::v-deep.el-tabs--card > .el-tabs__header .el-tabs__nav {
  border: 1px none;
}

::v-deep .el-tabs__nav .el-tabs__item:nth-child(1):hover {
  background-color: #165bff;
  color: white;
  border-radius: 10px 0 0 0;
}

::v-deep .el-tabs__nav .el-tabs__item:nth-child(2):hover {
  background-color: #165bff;
  color: white;
  border-radius: 0;
}

::v-deep .el-tabs__nav .el-tabs__item:nth-child(3):hover {
  background-color: #165bff;
  color: white;
  border-radius: 0;
}

::v-deep .el-tabs__nav .el-tabs__item:nth-child(4):hover {
  background-color: #165bff;
  color: white;
  border-radius: 0 10px 0 0;
}

::v-deep .el-tabs__nav .el-tabs__item:nth-child(1).is-active {
  background-color: #165bff;
  color: white;
  border-radius: 10px 0 0 0;
}

::v-deep .el-tabs__nav .el-tabs__item:nth-child(2).is-active {
  background-color: #165bff;
  color: white;
  border-radius: 0;
}

::v-deep .el-tabs__nav .el-tabs__item:nth-child(3).is-active {
  background-color: #165bff;
  color: white;
  border-radius: 0;
}

::v-deep .el-tabs__nav .el-tabs__item:nth-child(4).is-active {
  background-color: #165bff;
  color: white;
  border-radius: 0 10px 0 0;
}

::v-deep .el-tabs__nav .el-tabs__item:nth-child(1) {
  background-color: #d8e1eb;
  color: black;
  border-radius: 10px 0 0 0;
}

::v-deep .el-tabs__nav .el-tabs__item:nth-child(2) {
  background-color: #d8e1eb;
  color: black;
  border-radius: 0;
}

::v-deep .el-tabs__nav .el-tabs__item:nth-child(3) {
  background-color: #d8e1eb;
  color: black;
  border-radius: 0;
}

::v-deep .el-tabs__nav .el-tabs__item:nth-child(4) {
  background-color: #d8e1eb;
  color: black;
  border-radius: 0 10px 0 0;
}

::v-deep.el-tabs .el-tabs__header {
  padding: 0;
  position: relative;
  margin: 0 0 0px !important;
}

::v-deep.product-menu {
  // 内层菜单展开时的背景色
  .inner-submenu-active {
    background-color: #ffffff; // 内层菜单背景色为白色

    // 设置箭头图标颜色为蓝色
    .el-submenu__icon-arrow {
      color: #165bff; // 改变箭头颜色
    }
  }

  // 默认状态的箭头颜色
  .el-submenu {
    .el-submenu__icon-arrow {
      color: #000; // 默认箭头颜色
    }
  }
}

::v-deep.product-menu .menu-item-active {
  color: #165bff !important;
  /* 选中菜单项的字体颜色 */
}

::v-deep.product-menu .el-menu-item {
  background-color: #ffffff;
  /* 第三级菜单的背景色 */
}

// .text-align {
//   display: flex;
//   justify-content: flex-end;
//   margin: 0px 10px;
// }

// .text {
//   margin-left: auto;
//   margin: 3px 15px;
// }

// .row {
//   display: flex;
//   flex-direction: row;
//   align-items: inherit;
//   justify-content: center;
//   margin: 20px 0 20px -30px;
// }

// .box {
//   position: relative;
//   top: -20px;
//   left: 0;
//   margin-bottom: -20px;
//   width: 100%;
//   min-height: 102vh;
//   background-image: url(../../assets/images/background1.png) !important;
//   background-size: cover;
//   background-repeat: no-repeat;
//   background-position: left top;
//   background-color: #f55202;
// }

.container {
  overflow-y: auto;
  // height: 1080px;
  background-image: url(../../assets/images/background1.png) !important;
  // background-size: cover;
  // background-size: 100% 60%;
  background-repeat: no-repeat;
}

h1 {
  text-align: center;
  color: #333;
}

// .content {
//     margin: 20px auto;
//     max-width: 70%;
//     min-height: calc(100vh - 420px);
//     padding: 20px;
//     background: #F5F8FE;
//     border-radius: 10px 10px 0px 0px;
//     /* 设置背景色 */
//     border-radius: 10px;
//     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
// }

.bt {
  text-indent: 3.6em;
  margin: 20px auto;
  /* max-width: 70%; */
  width: 1200px;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  overflow-y: auto;
}

h2 {
  font-size: 24px;
  color: #333;
  margin-bottom: 15px;
  font-family: "方正小标宋", "Fangzheng Xiaobiao Song", serif;
}

p {
  font-size: 16px;
  color: #555;
  line-height: 1.6;
  font-family: "FangSong_GB2312";
}

.title {
  font-family: Microsoft YaHei;
  font-weight: bold;
  font-size: 14px;
  color: #c80000;
  line-height: 30px;
}

.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.bttext {
  font-family: PingFang SC;
  font-weight: bold;
  font-size: 14px;
  color: #222222;
  line-height: 26px;
  margin-left: 10px;
  text-decoration: none;
}

.bttext:hover {
  color: #165bff;
  text-decoration: underline;
}

.custom-title {
  font-family: PingFang SC;
  font-weight: 800;
  font-size: 16px;
  color: #165bff;
  line-height: 26px;
}
.el-menu {
  border-right: 1px none !important;
}
</style>
