<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-03-20 14:36:37
 * @LastEditors: 无尘
 * @LastEditTime: 2020-03-05 12:05:14
 -->
<!--
  应用公共左侧菜单：
  <common-detail-left
    :tabListData="tabListData"
    :activeSelTab="activeSelTab"
    @setSelectTab="setSelectTab">
  </common-detail-left>
  // activeSelTab: 刷新时候传入的选中 tabId
  // tabListData: 列表数据
  // @setSelectTab: 选择后把选择的 tabId 返给父级
 -->
<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.tabId == activeTab ? 'active-tab' : '']" :key="index" @click="selectTab(item, false, index)"><i :class="['p-r-10 color-303133 iconfont', item.icon]"></i>{{ item.tabName }}<i v-if="!!item.children && !!item.children.length" :class="[!!item.collapsFlag ? 'el-icon-arrow-up' : 'el-icon-arrow-down']"></i></li>
        <ul class="child-tab-left-list" :key="'childitem' + index" :style="{ height: !!item.collapsFlag && item.children ? 'auto' : 0 }">
          <!-- 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.tabId == activeTab ? 'active-tab' : '']" :key="childIndex" @click="selectTab(childitem, 'child', index)">{{ childitem.tabName }}<i v-if="!!childitem.children && !!childitem.children.length" :class="[!!childitem.collapsFlag ? 'el-icon-arrow-up' : 'el-icon-arrow-down']"></i></li>
            <ul class="third-tab-left-list" :key="'thirditem' + childIndex" v-if="childitem.children" :style="{ height: !!childitem.collapsFlag && childitem.children ? 'auto' : 0 }">
              <template v-for="(thirditem, thirdIndex) in childitem.children">
                <li :class="['tab-left-list-cell color-303133 font-14 border-box p-l-60', thirditem.tabId == activeTab ? 'active-tab' : '']" :key="thirdIndex" @click="selectTab(thirditem, 'child', index)">{{ thirditem.tabName }}</li>
              </template>
            </ul>
          </template>
        </ul>
      </template>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'common-detail-left',
  props: {
    appName: {
      type: String,
      default() {
        return '';
      }
    },
    // 刷新时候传入的选中 tabId
    activeSelTab: {
      type: [String, Number],
      default() {
        return '1';
      }
    },
    // 传入的 tabListData
    tabListData: {
      type: [Array, Object],
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      projectName: '', // 当前项目名
      activeTab: '0',
      tabData: []
    };
  },
  mounted() {
    this.activeTab = this.activeSelTab;
    let tabListData = [].concat(this.tabListData);
    tabListData.map(item => {
      item.collapsFlag = true;
      if (item.hasOwnProperty('children') && item.children.length) {
        if (this.activeSelTab == item.tabId) {
          this.activeTab = item.children[0].tabId;
        } else {
          item.children.map(child => {
            child.collapsFlag = true;
            if (child.hasOwnProperty('children') && child.children.length && this.activeSelTab == child.tabId) this.activeTab = child.children[0].tabId;
          });
        }
      }
    });
    this.$nextTick(_ => (this.tabData = [].concat(tabListData)));
  },
  methods: {
    /**
     * 路由跳转
     */
    returnBack() {
      let that = this;
      that.$router.push('appcenter');
    },
    /**
     * 选择后触发方法，返回 tabId
     */
    selectTab(item, flag, index) {
      if (item.hasOwnProperty('children')) {
        if (!!item.children.length) {
          item.collapsFlag = !item.collapsFlag;
          this.tabData = JSON.parse(JSON.stringify(this.tabData));
        } else {
          this.activeTab = item.tabId;
          this.$emit('setSelectTab', item);
        }
      } else {
        this.activeTab = item.tabId;
        this.$emit('setSelectTab', item);
      }
    }
  },
  watch: {
    activeSelTab(newV) {
      this.activeTab = newV;
    }
  }
};
</script>
<style type="text/scss" lang="scss" 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;
    }
    .el-icon-arrow-up,
    .el-icon-arrow-down {
      position: absolute;
      right: 5px;
      top: 50%;
      transform: translateY(-50%);
    }
    &: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.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    overflow: hidden;
    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>
