<template>
  <div class="ls-left-nav">
		<span v-for="(item,index) in menus" :key="index">
			<span v-if="activeTopMenu == item.id">
				<el-collapse-transition>
					<el-menu 
            :collapse="isCollapse" 
            :default-active="activeLeftMenu">
						<sub-menu
              v-for="(item1, index) in item.childrens"
              :ref="item1.id"
              :key="index"
              :item="item1"
              @click-menu="clickMyMenu"></sub-menu>
					</el-menu>
				</el-collapse-transition>
			</span>
		</span>
  </div>
</template>

<script>
  import Vue from 'vue'
  import subMenu from "./subMenu";

  export default {
    name: 'left',
    components: {
      subMenu
    },
    mounted: function () { // vue 生命周期，加载完成
      let _that = this
      Vue.prototype.switchMenu = (param) => {
        return _that.switchMenu(param)
      }
    },
    methods: {
      setCollapse: function (isCollapse) { // true:收起，false展开
        this.isCollapse = isCollapse;
      },
      /**
       * 切换菜单
       * @param param
       */
      switchMenu: function (param) {
        let menu = param.menu;
        let params = param.params;
        if (params) {
          this.params = params;
        }
        if (menu) {
          this.activeLeftMenu = menu.id;
          this.activeMenu = menu;
        }
      },
      clickMyMenu: function (item) {
        this.activeLeftMenu = item.id;
        this.activeMenu = item;
      },
      clickMenu: function (item) {
        if (!item.target) {
          return;
        }
        var url = '';
        if (item.url.indexOf('http') >= 0) {
          url = item.url;
        } else {
          url = this.$config.getDomain('awsUrl') + 'r/' + item.url;
        }
        if (this.params) {// 追加参数
          var str = this.$common.urlEncode(this.params);
          if (url.indexOf('?') >= 0) {
            url += str;
          } else {
            url = url + '?t=1' + str;
          }
          this.params = null;//置空
        }
        if (item.target == 'mainFrame') {
          this.$store.commit('put_iframe_url', url);
        } else {
          window.open(url);
        }
      },

    },
    computed: {
      menus: function () {
        if (this.$store.state.menus.length > 0) {
          var length = this.$store.state.menus.length;
          for (var i = 0; i < length; i++) {
            var item = this.$store.state.menus[i];
            if (item.id == this.activeTopMenu) {
              //找到对应的leftMenu对象
              if (item.childrens.length == 0) {
                this.activeLeftMenu = item.id;
                this.activeMenu = item;
              } else {
                var length2 = item.childrens[0].childrens.length;
                if (length2 == 0) {
                  this.activeLeftMenu = item.childrens[0].id;
                  this.activeMenu = item.childrens[0];
                } else {
                  this.activeLeftMenu = item.childrens[0].childrens[0].id;
                  this.activeMenu = item.childrens[0].childrens[0];
                }
              }
            }
          }
        }
        return this.$store.state.menus;
      },
      activeTopMenu: function () {
        return this.$store.state.activeTopMenu;
      },

    },
    data: function () {
      return {
        isCollapse: false,
        activeLeftMenu: '',
        activeMenu: {},
        params: null,// 临时参数
      }
    },
    watch: {
      'activeMenu': function (newVal, oldVal) {
        this.clickMenu(newVal);
      }
    }
  }
</script>
