<template>
  <div class="sidebarBox">
    <ul class="menuBoxUl">
      <!-- <li class="menuItem" @click="linkHome()">
        <a>首页</a>
      </li> -->
      <li class="menuItem" v-for="(item, index) in routeItem" :key="index">
        <router-link :to="item.path"> {{ item.name }} </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hostName: "",
      isProduction: "",
      routeItem: [
        {
          path: "/home",
          name: "首页",
        },
        {
          path: "/dataReport",
          name: "数据报表",
        },
        {
          path: "/equipment",
          name: "设备台账管理",
        },
        // {
        //   path: "/systemManagement",
        //   name: "系统管理",
        // },
        {
          path: "/icdConfig",
          name: "icd配置",
        },
        {
          path: "/paramBinding",
          name: "参数绑定",
        },
        {
          path: "/alarmRules",
          name: "告警规则",
        },
        {
          path: "/I2config",
          name: "I2配置",
        },
      ],
    };
  },
  mounted() {
    console.log(window.location.host);
    console.log(process.env.NODE_ENV);
    this.isProduction = process.env.NODE_ENV === "production";
    if (this.isProduction) {
      // 使用服务器IP或域名作为图片地址
      if (window.location.pathname.includes("/cac")) {
        this.hostName = window.location.origin + "/cac/";
      } else {
        this.hostName = window.location.origin;
      }

      console.log("aaaaaaaaaaaa");
    } else {
      // 使用代理的 target 作为图片地址（开发环境）
      console.log("开发环境");
      this.hostName = "http://localhost:9527/#/"; // 这里使用你的本地 target 地址
    }
  },
  watch: {},
  methods: {
    linkHome() {
      console.log(this.hostName);
      window.location.href = this.hostName;
    },
  },
  created() {},
};
</script>

<style lang="less">
.sidebarBox {
  // width: 55%;
  // margin: 0 auto;
  display: flex;
  align-items: center;
  .menuBoxUl {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-around;
    .menuItem {
      list-style: none;
      display: flex;
      height: 40px;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      font-size: 14px;
      margin-right: 16px;
      width: 100px;
      a {
        color: #fff;
        background-image: url(../assets/menu.png);
        height: 40px;
        line-height: 40px;
        padding: 0 12px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        overflow: hidden;
        width: 100px;
        text-align: center;
      }
      .router-link-active {
        color: #6de1ff;
      }
    }
  }
}
</style>
