<template>
  <div>
    <el-menu
      :default-active="$route.path"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      active-text-color="#3da9fc"
      background-color="#fff"
      text-color="#000"
      router
    >
      <el-menu-item index="/">首页</el-menu-item>
      <!--      <el-submenu index="2">-->
      <!--        <template slot="title" id="tab_test">价格计划</template>-->
      <!--        <div class="menu-dropdown-inner">-->
      <!--          &lt;!&ndash; 左侧导航 &ndash;&gt;-->
      <!--          <div class="menu-dropdown-sidebar pull-left" id="pull-left">-->
      <!--            <div id="pull-left-ul">-->
      <!--              <div-->
      <!--                class="menu-dropdown-sidebar-span"-->
      <!--                v-for="item in apidata"-->
      <!--                :key="item.id"-->
      <!--                :id="item.id"-->
      <!--                @mouseenter="test1(item.nodeList, item.id)"-->
      <!--                :style="{-->
      <!--                  color: hoverItem === item.id ? 'rgb(0 111 255)' : '#000',-->
      <!--                }"-->
      <!--              >-->
      <!--                <i></i>{{ item.name }}-->
      <!--              </div>-->
      <!--            </div>-->
      <!--          </div>-->

      <!--          &lt;!&ndash; 右侧导航 &ndash;&gt;-->
      <!--          <div class="menu-dropdown-content">-->
      <!--            <div id="pullright">-->
      <!--              <div-->
      <!--                v-if="IsShow == false"-->
      <!--                id="pullright1"-->
      <!--                v-for="item in maindata"-->
      <!--                :key="item.id"-->
      <!--                style="display: flex"-->
      <!--              >-->
      <!--                &lt;!&ndash; <p style="font-weight: bold; color: #0000FF;">{{ item.name }}</p> &ndash;&gt;-->
      <!--                <p-->
      <!--                  v-for="son_item in item.leafList"-->
      <!--                  :key="son_item.id"-->
      <!--                  :id="son_item.id"-->
      <!--                  :class="{ active: $route.path === son_item.url }"-->
      <!--                >-->
      <!--                  <router-link :to="son_item.url">{{-->
      <!--                    son_item.name-->
      <!--                  }}</router-link>-->
      <!--                  &lt;!&ndash; <span style="color: rgb(121 114 114)">{{ item.name }}</span> &ndash;&gt;-->
      <!--                </p>-->
      <!--              </div>-->

      <!--              <div-->
      <!--                v-if="IsShow == true"-->
      <!--                id="pullright1"-->
      <!--                v-for="item in MenuData"-->
      <!--                :key="item.id"-->
      <!--              >-->
      <!--                &lt;!&ndash; <p style="font-weight: bold; color: #0000FF;">{{ item.name }}</p> &ndash;&gt;-->
      <!--                <p-->
      <!--                  v-for="son_item in item.leafList"-->
      <!--                  :key="son_item.id"-->
      <!--                  :id="son_item.id"-->
      <!--                  :class="{ active: $route.path === son_item.url }"-->
      <!--                >-->
      <!--                  <router-link :to="son_item.url">{{-->
      <!--                    son_item.name-->
      <!--                  }}</router-link>-->
      <!--                  &lt;!&ndash; <span style="color: rgb(121 114 114)">{{ item.name }}</span> &ndash;&gt;-->
      <!--                </p>-->
      <!--              </div>-->
      <!--            </div>-->
      <!--          </div>-->

      <!--          &lt;!&ndash; 华丽的分割线 &ndash;&gt;-->
      <!--        </div>-->
      <!--      </el-submenu>-->
      <el-menu-item index="/pricing/highBandwidthServer">价格计划</el-menu-item>
      <el-menu-item index="/cases">客户案例</el-menu-item>

      <el-menu-item index="/aws-services">AWS服务</el-menu-item>
      <el-menu-item index="/knowledge-center">知识中心</el-menu-item>
      <el-submenu index="/about" popper-append-to-body="false">
        <template slot="title">关于我们</template>
        <div class="menu-dropdown-inner dropdown-content">
          <!-- 左侧导航 -->
          <div class="menu-dropdown-sidebar pull-left" id="pull-left">
            <div id="pull-left-ul">
              <div
                class="menu-dropdown-sidebar-span"
                v-for="item in apidata1"
                :key="item.id"
                :id="item.id"
                @mouseenter="test2(item.nodeList, item.id)"
                :style="{
                  color: hoverItem1 === item.id ? 'rgb(0 111 255)' : '#000',
                }"
              >
                <i></i>{{ item.name }}
              </div>
            </div>
          </div>

          <!-- 右侧导航 -->
          <div class="menu-dropdown-content">
            <div id="pullright">
              <div
                v-if="IsShow2 == false"
                id="pullright1"
                v-for="item in maindata2"
                :key="item.id"
                style="display: flex"
              >
                <!-- <p style="font-weight: bold; color: #0000FF;">{{ item.name }}</p> -->
                <p
                  v-if="item.name != '联系方式'"
                  v-for="son_item in item.leafList"
                  :key="son_item.id"
                  :id="son_item.id"
                  :class="{ active: $route.path === son_item.url }"
                >
                  <router-link :to="son_item.url">{{
                      son_item.name
                    }}
                  </router-link>
                  <!-- <span style="color: rgb(121 114 114)">{{ item.name }}</span> -->
                </p>
                <div
                  v-if="item.name == '联系方式'"
                  v-for="i in contactList"
                  class="contact_box"
                >
                  <div @mouseenter="ShowBOX(i.title)"
                       @mouseleave="IsShowBOX(i.title)" class="item">
                    <a :href="i.url">
                      <div style="width: 100%; height: 100%"><img :src="i.icon" alt=""/></div>
                    </a>
                    <div v-if="i.imgshow" class="IMGBOX">
                      <img :src="i.img" alt="i.title">
                    </div>
                  </div>
                </div>
              </div>

              <div v-if="IsShow2 == true" id="pullright1">
                <!-- <p style="font-weight: bold; color: #0000FF;">{{ item.name }}</p> -->
                <div v-for="i in contactList" class="contact_box">
                  <div class="item">
                    <a :href="i.url"><img :src="i.icon" alt=""/></a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShowBOX: false,
      hoverItem: "1-1",
      hoverItem1: "1-1",
      MenuData: [
        {
          id: "1-1",
          name: "云服务器",
          nodeList: null,
          leafList: [
            {
              id: "1-1-1",
              name: "大带宽服务器",
              url: "/pricing/highBandwidthServer",
            },
            {
              id: "1-1-2",
              name: "站群服务器",
              url: "/CloudClustersServers",
            },
          ],
        },
        {
          id: "2-1",
          name: "",
          nodeList: null,
          leafList: [
            {
              id: "2-1-3",
              name: "轻量云服务器",
              url: "/LightweightCloudServers",
            },
            {
              id: "2-1-4",
              name: "高防服务器",
              url: "/HighSecurityServers",
            },
          ],
        },
      ],
      MenuData2: [
        {
          // 模拟的接口数据
          id: "1-1",
          parentId: null,
          name: "联系方式",
          nodeList: [
            {
              id: "1-1",
              name: "联系方式",
              nodeList: null,
              leafList: [
                {
                  id: "1-1-1",
                  img: "",
                  url: "/pricing/highBandwidthServer",
                },
                {
                  id: "1-1-2",
                  img: "",
                  url: "/clusterServer",
                },
              ],
            },

            {
              id: "2-1",
              name: "",
              nodeList: null,
              leafList: [
                {
                  id: "2-1-3",
                  img: "",
                  url: "/lightCloudInstance",
                },
                {
                  id: "2-1-4",
                  img: "",
                  url: "/antiDDoSServer",
                },
              ],
            },
          ],
          leafList: null,
        },
      ],
      apidata: [
        {
          // 模拟的接口数据
          id: "1-1",
          parentId: null,
          name: "服务器",
          nodeList: [
            {
              id: "1-1",
              name: "云服务器",
              nodeList: null,
              leafList: [
                {
                  id: "1-1-1",
                  name: "大带宽服务器",
                  url: "/pricing/highBandwidthServer",
                },
                {
                  id: "1-1-2",
                  name: "站群服务器",
                  url: "/clusterServer",
                },
              ],
            },

            {
              id: "2-1",
              name: "",
              nodeList: null,
              leafList: [
                {
                  id: "2-1-3",
                  name: "轻量云服务器",
                  url: "/lightCloudInstance",
                },
                {
                  id: "2-1-4",
                  name: "高防服务器",
                  url: "/antiDDoSServer",
                },
              ],
            },
          ],
          leafList: null,
        },
        {
          id: "4-1",
          name: "区块链",
          nodeList: [
            {
              id: "4-1-1",
              name: "区块链",
              nodeList: null,
              leafList: [
                {
                  id: "4-1-1-1",
                  name: "区块链搭建",
                  url: "/BlockchainConstruction",
                },
              ],
            },
            {
              id: "4-1-2",
              name: "",
              nodeList: null,
              leafList: [
                {
                  id: "4-1-2-1",
                  name: "多种数据库服务",
                  url: "/MultipleDatabaseServices",
                },
              ],
            },
          ],
          leafList: null,
        },
        {
          id: "5-1",
          name: "存储",
          nodeList: [
            {
              id: "5-1-1",
              name: "存储数据服务",
              nodeList: null,
              leafList: [
                {
                  id: "5-1-1-1",
                  name: "可拓展对象存储（S3）",
                  url: "/ScalableObiectStorage",
                },
                {
                  id: "5-1-1-2",
                  name: "低成本归档存储",
                  url: "/CloudObjectStorage",
                },
              ],
            },
            {
              id: "5-1-2",
              name: "",
              nodeList: null,
              leafList: [
                {
                  id: "5-1-2-1",
                  name: "块存储",
                  url: "/BlockStorage",
                },
              ],
            },
          ],
          leafList: null,
        },
        {
          id: "3-1",
          parentId: null,
          name: "网络服务",
          nodeList: [
            {
              id: "3-1-1",
              name: "网络服务",
              nodeList: null,
              leafList: [
                {
                  id: "3-1-1-1",
                  name: "CDN",
                  url: "/CloudCDN",
                },
                {
                  id: "3-1-1-2",
                  name: "高防盾（Shield）",
                  url: "/AwsShield",
                },
              ],
            },
            {
              id: "3-1-2",
              name: "",
              nodeList: null,
              leafList: [
                {
                  id: "3-1-2-1",
                  name: "跨境数据传输",
                  url: "/CrossborderDataTransmission",
                },
                {
                  id: "3-1-2-2",
                  name: "全球骨干网",
                  url: "/CrossborderDataTransmission",
                },
              ],
            },
          ],
          leafList: null,
        },

        {
          id: "6-1",
          name: "游戏",
          nodeList: [
            {
              id: "6-1-1",
              name: "游戏云服务",
              nodeList: null,
              leafList: [
                {
                  id: "6-1-1-1",
                  name: "亚马逊 GameLife",
                  url: "/AmazonGameLift",
                },
                {
                  id: "6-1-1-2",
                  name: "亚马逊 GameSparks",
                  url: "/AmazonGameSparks",
                },
              ],
            },
            {
              id: "6-1-2",
              name: "",
              nodeList: null,
              leafList: [
                {
                  id: "6-1-2-1",
                  name: "AWS 游戏套件",
                  url: "/AwsGameSuite",
                },
              ],
            },
            // {
            //   "id": "1522393003681185793",
            //   "parentId": "1522393000157970433",
            //   "path": "/1522393000157970433/1522393003681185793",
            //   "name": "混合云存储",
            //   "orderNo": "1522393003681185793",
            //   "nodeList": null,
            //   "leafList": [{
            //     "id": "1522393004197085186",
            //     "categoryId": "1522393003681185793",
            //     "name": "混合云存储",
            //     "url": "https://www.baidu.com",
            //     "orderNo": "1522393004197085186"
            //   },
            //   {
            //     "id": "1522393004532629506",
            //     "categoryId": "1522393003681185793",
            //     "name": "云存储网关 CSG",
            //     "url": "https://www.baidu.com",
            //     "orderNo": "1522393004532629506"
            //   },
            //   {
            //     "id": "1522393004880756737",
            //     "categoryId": "1522393003681185793",
            //     "name": "混合云容灾 HDR",
            //     "url": "https://www.baidu.com",
            //     "orderNo": "1522393004880756737"
            //   }
            //   ]
            // },
          ],
          leafList: null,
        },
        {
          id: "7-1",
          name: "技术支持",
          nodeList: [
            {
              id: "7-1-1",
              name: "技术支持",
              nodeList: null,
              leafList: [
                {
                  id: "7-1-1-1",
                  name: "亚马逊 Bedrock",
                  url: "/Bedrock",
                },
                {
                  id: "7-1-1-2",
                  name: "亚马逊 SageMaker",
                  url: "/SageMaker",
                },
              ],
            },
            {
              id: "7-1-2",
              name: "",
              nodeList: null,
              leafList: [
                {
                  id: "7-1-2-1",
                  name: "亚马逊 Augmented AI",
                  url: "/AugmentedAI",
                },
                {
                  id: "7-1-2-2",
                  name: "亚马逊 CodeWhisperer",
                  url: "/CodeWhisperer",
                },
              ],
            },
          ],
          leafList: null,
        },
        {
          id: "8-1",
          name: "媒体视频",
          nodeList: [
            {
              id: "8-1-1",
              name: "媒体视频",
              nodeList: null,
              leafList: [
                {
                  id: "8-1-1-1",
                  name: "亚马逊 Elastic Transcoder",
                  url: "/ElasticTranscoder",
                },
                {
                  id: "8-1-1-2",
                  name: "亚马逊 Interactive Video Service",
                  url: "/InteractiveVideoService",
                },
              ],
            },
            {
              id: "8-1-2",
              name: "",
              nodeList: null,
              leafList: [
                {
                  id: "8-1-2-1",
                  name: "亚马逊 Nimble Studio",
                  url: "/NimbleStudio",
                },
              ],
            },
          ],
          leafList: null,
        },
      ],
      apidata1: [
        {
          // 模拟的接口数据
          id: "1-1",
          parentId: null,
          name: "联系方式",
          nodeList: [
            {
              id: "1-1",
              name: "联系方式",
              nodeList: null,
              leafList: [
                {
                  id: "1-1-1",
                  img: "",
                  url: "/pricing/highBandwidthServer",
                },
                {
                  id: "1-1-2",
                  img: "",
                  url: "/clusterServer",
                },
              ],
            },

            {
              id: "2-1",
              name: "",
              nodeList: null,
              leafList: [
                {
                  id: "2-1-3",
                  img: "",
                  url: "/lightCloudInstance",
                },
                {
                  id: "2-1-4",
                  img: "",
                  url: "/antiDDoSServer",
                },
              ],
            },
          ],
          leafList: null,
        },
        {
          id: "4-1",
          name: "关于我们",
          nodeList: [
            {
              id: "4-1-1",
              name: "关于我们",
              nodeList: null,
              leafList: [
                {
                  id: "4-1-1-1",
                  name: "联系我们",
                  url: "/contact",
                },
              ],
            },
            {
              id: "4-1-2",
              name: "",
              nodeList: null,
              leafList: [
                {
                  id: "4-1-2-1",
                  name: "关于我们",
                  url: "/about",
                },
              ],
            },
          ],
          leafList: null,
        },
      ],
      contactList: [
        {index: "1", icon: require("@/assets/Home_IMG/TG1.png"), url: "https://t.me/"},
        {
          index: "2",
          icon: require("@/assets/cases/pay1.png"),
          url: "/contact",
          title: "微信",
          img: require("@/assets/widgetApp/weixi.png"),
          imgshow: false,
        },
        {
          index: "3",
          icon: require("@/assets/Home_IMG/whatsApp1.png"),
          url: "/contact",
        },
        {
          index: "4",
          icon: require("@/assets/Home_IMG/fb2.png"),
          url: "https://www.facebook.com/profile.php?id=61565734855142"
        },
        {index: "5", icon: require("@/assets/pricing/twiite.png"), url: "/contact"},
        {index: "5", icon: require("@/assets/pricing/whatsApp.png"), url: "/contact"},
        {index: "5", icon: require("@/assets/pricing/email.png"), url: "/contact"},
        {index: "5", icon: require("@/assets/pricing/ins.png"), url: "https://www.instagram.com/raylinxcloud/"},
      ],
      maindata: [],
      maindata2: [],
      Asidedata: [],
      IsShow: false,
      IsShow2: true,
    };
  },
  created() {
    // this.get_data();
    this.IsShow = true;
    this.showMenu = "0";
  },
  methods: {
    ShowBOX(title) {
      for (let i = 0; i < this.contactList.length; i++) {
        if (this.contactList[i].title === title && this.contactList[i].img != null) {
          this.contactList[i].imgshow = true;
        } else if (this.contactList[i].title === title) {
          this.contactList[i].imgshow = false;
        }
      }
    },
    IsShowBOX(title) {
      for (let i = 0; i < this.contactList.length; i++) {
        if (this.contactList[i].title === title && this.contactList[i].img != null) {
          this.contactList[i].imgshow = false;
          break;  // Stop the loop once the correct item is found and processed
        }
      }
    },
    test1(val, itemId) {
      console.log("test1:", val, "itemId", itemId);
      this.maindata = val;
      let leftUl = document.getElementById("pull-left-ul");

      // 把左侧的li color展示成黑色
      let leftLi = leftUl.childNodes;
      for (let index = 0; index < leftLi.length; index++) {
        leftLi[index].style.color = "#000";
      }

      // 获取左侧div的高度 pull-left
      let pullLeft = document.getElementById("pull-left");
      // console.log("div的宽度", pullLeft.style.height)

      // itemId 设置左侧的数据上去的颜色
      // let itemIdDoc = document.getElementById(itemId);
      // itemIdDoc.style.borderBottom = '2px solid rgb(56, 71, 236)';

      // pull-right
      let pullright = document.getElementById("pullright");
      // console.log("pullright,", pullright.style.width)

      // pull-right
      // let pullright1 = document.getElementById('pullright1');
      // console.log("pullright1,", pullright1.style.width)
      this.hoverItem = itemId;
      this.IsShow = false;
    },
    test2(val, itemId) {
      console.log("test1:", val, "itemId", itemId);
      this.maindata2 = val;
      let leftUl = document.getElementById("pull-left-ul");

      // 把左侧的li color展示成黑色
      let leftLi = leftUl.childNodes;
      for (let index = 0; index < leftLi.length; index++) {
        leftLi[index].style.color = "#000";
      }

      // 获取左侧div的高度 pull-left
      let pullLeft = document.getElementById("pull-left");
      // console.log("div的宽度", pullLeft.style.height)

      // itemId 设置左侧的数据上去的颜色
      // let itemIdDoc = document.getElementById(itemId);
      // itemIdDoc.style.borderBottom = '2px solid rgb(56, 71, 236)';

      // pull-right
      let pullright = document.getElementById("pullright");
      // console.log("pullright,", pullright.style.width)

      // pull-right
      // let pullright1 = document.getElementById('pullright1');
      // console.log("pullright1,", pullright1.style.width)
      this.hoverItem1 = itemId;
      this.IsShow2 = false;
    },
    handleSelect(key, keyPath) {
      // console.log(key, keyPath);
    },
    clear() {
      this.showMenu = 0;
    },
  },
};
</script>

<style lang="scss" scoped>

::v-deep .el-menu--horizontal > .el-submenu .el-submenu__title {
  height: 80px;
  line-height: 80px;
  border-bottom: 2px solid transparent;
  color: #909399;
}
::v-deep .el-menu--popup{
  margin-left: -100px !important;
}
::v-deep.el-menu-item {
  height: 80px;
  line-height: 80px;
}

::v-deep .el-submenu__title {
  background-color: #fff !important;
}

::v-deep .el-menu.el-menu--horizontal {
  border-bottom: 0;
}

#pull-left-ul {
  display: flex;
}

.IMGBOX {
  width: 150px;
  height: 150px;
  box-shadow: 0px 4px 10px rgba(79, 79, 79, 0.726);

  img {
    width: 150px !important;
    height: 150px !important;
  }
}

.contact_box {
  display: flex;

  .item {
    width: 70px;
    height: 70px;
    margin-left: 3%;

    img {
      width: 70px;
      height: 70px;
    }
  }
}

.menu-dropdown-inner {
  background: url("@/assets/Home_IMG/home_banner2.png") no-repeat;
  width: 632px;
  left: 0px;
  height: 150px;
  padding: 24px;
  z-index: 0;
}

.menu-dropdown-sidebar-span {
  margin-right: 5%;
}

.active {
  background-color: rgb(203 234 255);
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 15px;
  border-radius: 3px;
  //   padding: 10px;
  /* 其他样式 */
}

#pullright {
  display: flex;
  border-left: 3px solid rgb(0, 136, 255);
  min-height: 100px;
  margin-top: 10px;
  padding: 12px;
}

#pullright1 {
  display: flex;
  margin-right: 5%;

  p {
    margin-right: 5%;
    min-width: 150px;

    a {
      text-decoration: none;
      color: #000;
    }
  }
}
</style>
