<template>
  <div class="pcConfiguration-container">
    <el-container v-if="menuList.length" class="container-heigth">
      <el-aside style="width:160px" class="scrollBox">
        <el-menu :default-active="currentMenu">
          <el-menu-item v-for="(item, index) in menuList" :key="index" @click="selectMenu(item)" :index="item.menuUrl">{{ item.name }}</el-menu-item>
        </el-menu>
      </el-aside>
      <el-main style="padding: 0px; margin: 0px; overflow: hidden">
        <iframe style="width: 100%; height: 100%; border: 0" :src="m_src" v-if="isIframeShow"></iframe>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'containerLeftNav',
  props: {
    menuList: {
      type: Array,
      default () {
        return []
      }
    },
    tokenKey: {
      type: String,
      default: 'APP_TOKEN',
    },
  },
  data () {
    return {
      currentMenu: null,
      m_src: null,
      isIframeShow: false
    }
  },
  watch: {
    menuList: {
      handler () {
        if (this.menuList.length) {
          this.currentMenu = this.menuList[0].menuUrl
          this.selectMenu(this.menuList[0])
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    selectMenu (item) {
      this.isIframeShow = false
      let menuUrl = this.changeDevHost(item.menuUrl);
      let separator = menuUrl.indexOf('?') > -1 ? '&' : '?';
      let token = item.token || localStorage.getItem(this.tokenKey)
      menuUrl = menuUrl + separator + 'token=' + token

      if (menuUrl.indexOf('openType=blank') > -1) {
        menuUrl = menuUrl + '&parentMenuId=' + item.primaryKey
        window.open(menuUrl) 
      } else {
        menuUrl = menuUrl + '&menuId=' + item.primaryKey
        this.m_src = menuUrl
      }

      setTimeout(() => {
        this.isIframeShow = true
      }, 0)
    },
    changeDevHost (url) {
      let urlHost = url.match(/^(?:[^\/]|\/\/)*/)
      // 开发环境替换域名为本地ip
      if (process.env.NODE_ENV === 'development' && window.devHostMap && urlHost && window.devHostMap[urlHost]) {
        url = url.replace(urlHost, window.devHostMap[urlHost])
      }
      return url
    },
  },
};
</script>


<style lang="scss" scoped>
.container-heigth {
  height: calc(100vh - 100px);
}

.pcConfiguration-container {
  padding: 10px 30px;
}
.el-row {
  
}
.el-switch.is-checked {
  background-color: #fff;
}
.el-button--small {
  margin-left: 10px;
  border-radius: 20px;
}
.footer-pagination {
  margin-top: 10px;
  text-align: center;
}
</style>