<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-03-20 14:36:37
 * @LastEditors: 无尘
 * @LastEditTime: 2020-09-18 14:51:29
 -->
<!--
  应用公共左侧菜单：
  <common-detail-left
    :tabListData="tabListData"
    :activeSelTab="activeSelTab"
    @setSelectTab="setSelectTab">
  </common-detail-left>
  // activeSelTab: 刷新时候传入的选中 menuUrl
  // tabListData: 列表数据
  // @setSelectTab: 选择后把选择的 menuUrl 返给父级
 -->
<template>
  <div class="p-t-12">
    <ul class="tab-left-list">
      <template v-for="(item, index) in tabData">
        <li :class="['tab-left-list-cell color-303133 font-14 border-box p-l-14', item.menuUrl == activeTab && (!item.children ||!item.children.length) ? 'active-tab' : '']" :key="index" @click="selectTab(item, false, index)">
          <i :class="['p-r-10 color-303133 iconfont', item.iconUrl, !!item.onlyIconActive ? '' : '']"></i>{{ item.tabName || item.menuName }}
          <!-- iconActive <i v-if="!!item.children && !!item.children.length" :class="[!!collapsFlag ? 'el-icon-arrow-up' : 'el-icon-arrow-down']"></i> -->
        </li>
        <ul class="child-tab-left-list" :key="'childitem' + index">
          <!-- v-if="!!item.collapsFlag"-->
          <template v-for="(childitem, childIndex) in item.children">
            <li :class="['tab-left-list-cell color-303133 font-14 border-box p-l-40', childitem.menuUrl == activeTab && (!childitem.children || !childitem.children.length) ? 'active-tab' : '']" :key="childIndex" @click="selectTab(childitem, 'child', index)">{{ childitem.tabName || childitem.menuName }}</li>
            <ul class="third-tab-left-list" :key="'thirditem' + childIndex">
              <template v-for="(thirditem, thirdIndex) in childitem.children">
                <li :class="['tab-left-list-cell color-303133 font-14 border-box p-l-60', thirditem.menuUrl == activeTab && (!thirditem.children || !thirditem.children.length) ? 'active-tab' : '']" :key="thirdIndex" @click="selectTab(thirditem, 'child', index)">{{ thirditem.tabName || thirditem.menuName }}</li>
              </template>
            </ul>
          </template>
        </ul>
      </template>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'CommonDetailLeft',
  props: {
    appName: {
      type: String,
      default() {
        return '';
      }
    },
    // 刷新时候传入的选中 menuUrl
    activeSelTab: {
      type: [ String, Number ],
      default() {
        return '';
      }
    },
    // 传入的 tabListData
    tabListData: {
      type: [ Array, Object ],
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      projectName: '', // 当前项目名
      activeTab: '1',
      tabData: this.tabListData,
      collapsFlag: true
    };
  },

  mounted() {
    this.activeTab = this.activeSelTab;
  },
  methods: {
    /**
     * 选择后触发方法，返回 menuUrl
     * @param {Object} item
     * @param {Boolean} flag
     * @param {Number} index
     * @returns {Boolean}
     * @author: 无尘
     */
    selectTab(item, flag, index) {
      const that = this;
      if (!!flag) {
        that.tabData[index].onlyIconActive = true;
      } else {
        that.tabData.forEach(ele => {
          ele.onlyIconActive = false;
        });
        if (item.hasOwnProperty('children') && !!item.children.length) {
          that.collapsFlag = !!that.collapsFlag && item.hasOwnProperty('children') && !!item.children.length ? false : true;
        }
      }
      // 判断已选 item, 判断只让 icon 变色
      if (item.hasOwnProperty('children') && !!item.children.length) {
        that.tabData[index].onlyIconActive = true;

        if (!!item.children[0] && item.children[0].hasOwnProperty('children') && item.children[0].children.length ) {
          that.activeTab = item.children[0].children[0].menuUrl;
          that.$emit('setSelectTab', item.children[0].children[0]);
          return false;
        }
        that.activeTab = item.children[0].menuUrl;
        that.$emit('setSelectTab', item.children[0]);
        return false;
      }
      that.activeTab = item.menuUrl;
      that.$emit('setSelectTab', item);
    }
  },
  watch: {
    tabListData: function(newData, oldData) {
      let that = this;
      that.tabData = newData;
    },
    activeSelTab: function(newData, oldData) {
      let that = this;
      that.activeTab = newData;
    }
  }
};
</script>
<style type="text/less" lang="less" scoped>
.tab-left-list {
  .tab-left-list-cell {
    position: relative;
    text-align: left; /* margin-top: 15px; */
    height: 40px;
    line-height: 40px;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    .iconActive {
      color: #2f54eb;
    }
    &:hover {
      color: #2f54eb;
      background: rgba(47, 84, 235, 0.05);
      i {
        color: #2f54eb;
      }
    }
    &.active-tab {
      color: #2f54eb;
      background: rgba(47, 84, 235, 0.05); /* &::before { content: ' '; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: #2F54EB; z-index: 1; } */
      i {
        color: #2f54eb;
      }
    }
  }
  .child-tab-left-list {
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    li {
      position: relative;
      text-align: left;
      height: 40px;
      line-height: 40px;
      white-space: nowrap;
      overflow: hidden;
      cursor: pointer;
      &:hover {
        color: #2f54eb;
        background: rgba(47, 84, 235, 0.05);
        i {
          color: #2f54eb;
        }
      }
      &.active-tab {
        color: #2f54eb;
        background: rgba(47, 84, 235, 0.05); /* &::before { content: ' '; position:
  absolute; left: 0; top: 0; bottom: 0; width: 2px; background: #2f54eb; z-index: 1; } */
        i {
          color: #2f54eb;
        }
      }
    }
  }
}
</style>
