<template>
  <div class="container">
    <el-row style="margin: 150px auto 100px ;">
      <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; */
" />
    </el-row>
    <el-row class="content" style="background-color: #f5f8fe;">
      <el-col :span="7"
        style="padding: 20px; border-radius: 10px; min-height: 712px; overflow-x: 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.name)">
              <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 }">
                <img v-if="content.zx === '1'" src="../../assets/images/new.png" alt="new"
                  style="width: 28px; height: 28px; margin-left: -30px; vertical-align: middle;" />
                <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 v-if="content.remark"> ({{ content.remark }})</span>
                </span>
              </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 }">
              <img v-if="service.zx === '1'" src="../../assets/images/new.png" alt="new"
                style="width: 28px; height: 28px; margin-left: -30px; vertical-align: middle;" />
              <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 }}<span v-if="service.remark"> ({{ service.remark }})</span>
              </span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-col>
      <!-- 显示选项卡的内容 -->
      <el-col v-if="activeNameOuter === '产品'" :span="17"
        style="border-radius: 10px; min-height: 730px; background-color: #f5f8fe;">
        <div class="tabs">
          <el-tabs v-model="activeName" @tab-click="handleClick" type="card" class="custom-tabs">
            <el-tab-pane label="产品简介" name="first" :class="{ 'custom-active1': activeName === 'first' }">
              <el-card style="width: 100%;  height: 712px; overflow-y: auto;">
                <div v-html="`<style>
              .table-container table { border: 1px solid #888; border-collapse: collapse; }
              .table-container table tbody tr td { border: 1px solid #999; padding: 8px; text-align: left; }
            </style>${cpjj}`"></div>
              </el-card>
            </el-tab-pane>
            <el-tab-pane label="功能特点" name="second" :class="{ 'custom-active2': activeName === 'second' }">
              <el-card style="width: 100%; height: 712px; overflow-y: auto;">
                <div v-html="`<style>
              .table-container table { border: 1px solid #888; border-collapse: collapse; }
              .table-container table tbody tr td { border: 1px solid #999; padding: 8px; text-align: left; }
            </style>${gntd}`"></div>
              </el-card>
            </el-tab-pane>
            <el-tab-pane label="应用成效" name="third" :class="{ 'custom-active3': activeName === 'third' }">
              <el-card style="width: 100%;  height: 712px; overflow-y: auto;">
                <div v-html="`<style>
              .table-container table { border: 1px solid #888; border-collapse: collapse; }
              .table-container table tbody tr td { border: 1px solid #999; padding: 8px; text-align: left; }
            </style>${yycx}`"></div>
              </el-card>
            </el-tab-pane>
            <el-tab-pane label="用法介绍" name="fourth" :class="{ 'custom-active4': activeName === 'fourth' }">
              <el-card style="width: 100%;  height: 712px; overflow-y: auto;">
                <div v-html="`<style>
              .table-container table { border: 1px solid #888; border-collapse: collapse; }
              .table-container table tbody tr td { border: 1px solid #999; padding: 8px; text-align: left; }
            </style>${yfjs}`"></div>
              </el-card>
            </el-tab-pane>
          </el-tabs>
          <!-- <div class="remark">
            <div>{{ this.remark }}</div>
          </div> -->
        </div>
      </el-col>
      <!-- 外层折叠项 2 选中的内容 -->
      <el-col v-else-if="activeNameOuter === '服务类'" :span="17"
        style="border-radius: 10px; min-height: 700px; background-color: #f5f8fe;">
        <div class="tabs">
          <el-tabs v-model="activeName" @tab-click="handleClick" type="card" class="custom-tabs">
            <el-tab-pane label="团队介绍" name="first">
              <el-card style="width: 100%; height: 712px; overflow-y: auto;">
                <div v-html="`<style>
            .table-container table { border: 1px solid #888; border-collapse: collapse; }
            .table-container table tbody tr td { border: 1px solid #999; padding: 8px; text-align: left; }
          </style>${tdjs}`"></div>
              </el-card>
            </el-tab-pane>
            <el-tab-pane label="服务特色" name="second">
              <el-card style="width: 100%;  height: 712px; overflow-y: auto;">
                <div v-html="`<style>
            .table-container table { border: 1px solid #888; border-collapse: collapse; }
            .table-container table tbody tr td { border: 1px solid #999; padding: 8px; text-align: left; }
          </style>${fwts}`"></div>
              </el-card>
            </el-tab-pane>
            <el-tab-pane label="服务案例" name="third">
              <el-card style="width: 100%;  height: 712px; overflow-y: auto;">
                <div v-html="`<style>
            .table-container table { border: 1px solid #888; border-collapse: collapse; }
            .table-container table tbody tr td { border: 1px solid #999; padding: 8px; text-align: left; }
          </style>${fwal}`"></div>
              </el-card>
            </el-tab-pane>
          </el-tabs>
          <!-- <div class="remark">
            <div>{{ this.remark }}</div>
          </div> -->
        </div>
      </el-col>
    </el-row>

  </div>
</template>
<script>

import { getListcx, getListdt, } from "@/api/sy.js";
export default {
  name: "gasDigitization",
  // components: { footerNav },

  data() {
    return {
      isOuterMenuClicked: false,
      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}`;
    //       console.log(this.activeNameInner, ' this.activeNameInner');
    //       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}`;
    //         console.log(this.activeNameInner, 'this.activeNameInner');
    //         this.activeServiceId = firstProductChild.id;  // 设置 activeServiceId 为第一项的 ID
    //         console.log(this.activeServiceId, 'Selected Product ID');
    //         this.getListdt(this.activeServiceId);
    //       }
    //     }
    //   }
    // }
  },
  mounted() {
    this.getList();
  },
  methods: {
    // 获取列表数据
    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];

            if (firstContent) {
              this.setActiveInner(firstInnerItem.name, firstContent.mc, firstContent.id); // 设置默认内层菜单内容
            }

            this.defaultOpeneds = [firstOuterItem.px, firstInnerItem.px]; // 设置展开的菜单
          }
        }
      });
    },

    // 设置当前选中的外层菜单
    setActiveOuter(cplx) {
      this.activeNameOuter = cplx; // 更新外层菜单
      console.log('Outer menu set to:', this.activeNameOuter);

      // 根据选中的外层菜单类型设置默认的内层菜单
      const firstInnerItem = this.collapseDataOuter.find(item => item.cplx === cplx);
      console.log(firstInnerItem, 'firstInnerItem');

      if (firstInnerItem) {
        // 仅在第一次点击外层菜单时设置默认值
        if (!this.isOuterMenuClicked) {
          this.isOuterMenuClicked = true; // 设置状态为已点击外层菜单
          // 如果是产品，选择第三级菜单的第一项
          if (cplx === '产品' && firstInnerItem.cpChildren.length > 0) {
            const firstInner = firstInnerItem.cpChildren[0];
            this.activeNameInner = `${firstInner.name}-${firstInner.children2[0]?.mc || ''}`; // 设置第三级菜单的第一项
            this.setActiveInner(firstInner.name, firstInner.children2[0]?.mc, firstInner.children2[0]?.id); // 设置内容
          }
          // 如果是服务类，选择第二级菜单的第一项
          else if (cplx === '服务类' && firstInnerItem.fwlChildren.length > 0) {
            const firstService = firstInnerItem.fwlChildren[0];
            this.activeNameInner = `${firstInnerItem.mc}-${firstService.mc}`; // 设置第二级菜单的第一项
            this.handleServiceClick(firstInnerItem.mc, firstService.mc, firstService.id); // 设置内容
          }
        }
      }
    },


    handleInnerClick(innerName, contentName, contentId) {
      this.isOuterMenuClicked = false; // 取消外层菜单点击状态
      this.activeNameInner = `${innerName}-${contentName}`; // 更新内层菜单
      // 获取内容相关的数据
      this.getListdt(contentId);
    },

    handleServiceClick(outerName, serviceName, serviceId) {
      this.isOuterMenuClicked = false; // 取消外层菜单点击状态
      this.activeNameInner = `${outerName}-${serviceName}`; // 更新内层菜单
      // 获取服务相关的数据
      this.getListdt(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(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; // 更新活动名称
      console.log(this.activeName, ' this.activeName');
    },
  },
};
</script>

<style scoped lang="scss">
::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: 20px;
  /* 向上移动 */
  right: 30px;
  /* 向左移动 */
  white-space: nowrap;
  font-size: 18px;
  // font-weight: bold;
  font-family: PingFang SC;
  // font-weight: 800;
  // color: #222222;
  line-height: 40px
}

::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;
}
</style>
