<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="border: red 1px solid;background-color: #f5f8fe;">
      <el-col :span="5"
        style="padding: 20px; border-radius: 10px; min-height: 700px; background-color: #f5f8fe;border: black 1px solid;">
        <el-menu :default-active="activeNameInner" class="product-menu" :background-color="'transparent'"
          :text-color="'#333'" :active-text-color="'#409EFF'">
          <!-- 外层菜单 -->
          <el-submenu v-for="outerItem in collapseDataOuter" :key="outerItem.name" :index="outerItem.name"
            :default-active="activeNameOuter">
            <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.title }}
              </span>
            </template>

            <!-- 第二级菜单 -->
            <el-submenu v-for="innerItem in outerItem.collapseData" :key="innerItem.name" :index="innerItem.name"
              :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.title }}
                </span>
              </template>

              <!-- 第三级菜单 -->
              <el-menu-item v-for="content in innerItem.contents" :key="content" :index="innerItem.name + '-' + content"
                @click.native="setActiveInner(innerItem.name, content)"
                :class="{ 'menu-item-active': activeNameInner === innerItem.name + '-' + content }">

                <!-- 蓝色圆点 -->
                <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 ? '#165BFF' : '#222222',
                  lineHeight: '18px',  // 调整行高，进一步减少上下距离
                  margin: '2px 0', // 减少上下间距
                  textDecoration: activeNameInner === innerItem.name + '-' + content ? 'underline' : 'none',
                  textDecorationColor: activeNameInner === innerItem.name + '-' + content ? '#165BFF' : 'transparent'
                }">
                  {{ content }}
                </span>
              </el-menu-item>



            </el-submenu>
          </el-submenu>
        </el-menu>
      </el-col>

      <el-col :span="19"
        style=" border-radius: 10px; min-height: 700px; background-color: #f5f8fe;border: pink 1px solid;">
        <el-tabs v-model="activeName" @tab-click="handleClick" type="card">
          <el-tab-pane label="产品简介" name="first" :class="{ 'custom-active1': activeName === 'first' }">
            <el-card style="width: 100%;min-height: 712px;">
              <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">
            <el-card style="width: 100%;min-height: 712px;">
              <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">
            <el-card style="width:100%;min-height: 712px;">
              <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-active2': activeName === 'fourth' }">
            <el-card style="width: 100%;height: 712px;">
              <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>

      </el-col>
    </el-row>

  </div>
</template>
<script>


export default {
  name: "gasDigitization",
  // components: { footerNav },
  data() {
    return {
      cpjj: '',
      gntd: '',
      yycx: '',
      yfjs: '',
      activeNameOuter: "", // 默认选中的第一级选项
      activeNameInner: "", // 默认选中的第二级选项
      collapseDataOuter: [
        {
          name: "outer1",
          title: "外层折叠项 1",
          collapseData: [
            {
              name: "1",
              title: "智能化办公",
              contents: ["大模型", "会议系统", "数字员工"],
            },
            {
              name: "2",
              title: "生产化信息",
              contents: ["大模型", "哈哈哈哈", "嘻嘻嘻嘻"],
            },
          ],
        },
        {
          name: "outer2",
          title: "外层折叠项 2",
          collapseData: [
            {
              name: "3",
              title: "基础设施",
              contents: ["999", "777", "666"],
            },
            {
              name: "4",
              title: "其他",
              contents: ["内容1", "内容2", "内容3"],
            },
          ],
        },
      ],
      // -------------
      activeName: "first",
      name: null,
      ipdz: null,
      yl1: null,
      showDialog: false, // 控制对话框显示的变量
      form: {

      },

    };
  },
  computed: {},
  mounted() {
    // 设置默认选中的第一级和第二级
    if (this.collapseDataOuter.length > 0) {
      this.activeNameOuter = this.collapseDataOuter[0].name; // 默认选中第一个外层选项
      const firstInner = this.collapseDataOuter[0].collapseData[0];
      if (firstInner) {
        this.activeNameInner = firstInner.name + '-' + firstInner.contents[0]; // 默认选中第一个内层选项
      }
    }
  },
  methods: {

    setActiveInner(innerName, content = '') {
      if (content) {
        this.activeNameInner = innerName + '-' + content;
        console.log('activeNameInner updated to:', this.activeNameInner); // 调试打印
      }
    },



    isInnerActive(innerName) {
      return this.activeNameInner.startsWith(innerName); // 判断是否为活动状态
    },
    handleChange(val) {
      console.log(val);
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    getList() {
      // listOrganization().then(res => {
      //   console.log('组织领导', res)
      //   this.cpjj = res.data.bmjjwh
      //   this.gntd = res.data.zzld
      //   this.yycx = res.data.sjglry
      //   this.yfjs = res.data.sjglry
      // })
    },





  },
};
</script>

<style scoped lang="scss">
::v-deep.custom-active1 {
  border-radius: 10px 0 0 0;
  /* 第一个选项卡的圆角 */
  background-color: #165bff;
  /* 选中时的背景色 */
  color: white;
  /* 选中时的字体颜色 */
}

::v-deep.custom-active2 {
  border-radius: 0 10px 0 0;
  /* 第四个选项卡的圆角 */
  background-color: #165bff;
  /* 选中时的背景色 */
  color: white;
  /* 选中时的字体颜色 */
}


::v-deep .el-tabs__nav .el-tabs__item.is-active {
  background-color: #165bff;
  /* 选中时的背景色 */
  color: white;
  /* 选中时的字体颜色 */


}

::v-deep .el-tabs__nav .el-tabs__item {
  background-color: #d8e1eb;
  /* 未选中时的背景色 */
  color: black;
  /* 未选中时的字体颜色 */
}

::v-deep .el-tabs__nav .el-tabs__item:hover {
  background-color: #165bff;
  /* 悬停时的背景色 */
  color: white;
  /* 悬停时的字体颜色 */
}

::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: 10px 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: 100vh;
  background-image: url(../../assets/images/background1.png) !important;
  // background-size: cover;
  background-size: 100% 100%;
  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>
