<template>
  <div id="app" class="layout">
    <Row type="flex" class="layout-container" v-if="!isDashboard">
      <Sider collapsible :collapsed-width="71" style="z-index: 100" ref="sider" v-model="isCollapsed">
        <Menu :active-name="activeName" theme="dark" width="auto" :open-names="openNames" accordion @on-select="select" :class="menuitemClasses" ref="menus">
          <template v-for="(menu, index) in pageList">
            <MenuItem style="background: #001529;" v-if="!isCollapsed" :name="index" :key="menu.name">
              <Icon :type="menu.icon"></Icon>
              <span class="layout-text">{{ menu.name }}</span>
            </MenuItem>

            <Tooltip v-else="isCollapsed" :key="menu.name" transfer :content="menu.name" placement="right">
              <MenuItem :name="index" :class="[index == activeName ? 'sub-menu-selected' : 'sub-menu-not-selected']">
                <Icon :type="menu.icon"></Icon>
                <span class="layout-text">{{ menu.name }}</span>
              </MenuItem>
            </Tooltip>
          </template>
        </Menu>
      </Sider>
      <div class="right-content">
        <div class="layout-content">
          <Spin fix v-show="showLoading">
            <Icon type="load-c" size="58" class="spin-icon-load"></Icon>
            <div style="font-size: 20Px">Loading</div>
          </Spin>
          <transition name="router-fade" mode="out-in">
            <router-view></router-view>
          </transition>
        </div>
        <div class="layout-copy">
          2014-2021 &copy; QuantGroup
        </div>
      </div>
    </Row>
    <slot v-else></slot>
  </div>
</template>
<script>
import { mapActions, mapState } from 'vuex';
export default {
  data() {
    return {
      showLoading: false,
      activeName: 0,
      openNames: ['0'],
      isCollapsed: false,
      page: [{
          name: '作品列表',
          icon: 'ios-list',
          path: 'list',
          children: []
        },
        {
          name: '我的草稿',
          icon: 'ios-book',
          path: 'my',
          children: []
        },
        {
          name: '创意模板',
          icon: 'ios-compose',
          path: 'template',
          children: []
        },
        {
          name: '导航配置',
          icon: 'ios-compose',
          path: 'navigator',
          children: []
        }]
    }
  },
  methods: {
    ...mapActions([
      'fetchTenantAuthData'
    ]),
    select(name) {
      console.log('select', name);
      const current = this.page[name];
      this.$router.push({
        name: current.path,
      });
      this.$nextTick(() => {
        this.activeName = name;
        this.$refs.menus.updateOpened();
        this.$refs.menus.updateActiveName();
      });
    },
  },
  created() {
    this.fetchTenantAuthData();
    console.log('isDashboard', this.$route);
  },
  watch: {
    $route(to, from) {
      console.log(to, from);
      if (to.path !== from.path && to.path === '/list') {
        this.activeName = 0;
      }
    },
  },
  computed: {
    ...mapState([ 'tmplList', 'draftList', 'workist' ]),
    pageList() {
      const pageList = JSON.parse(JSON.stringify(this.page));
      if(this.tmplList) {
        pageList.splice(2, 1);
      }
      if(this.draftList) {
        pageList.splice(1, 1);
      }
      if(this.workist) {
        pageList.splice(0, 1);
      }
      return pageList;
    },
    menuitemClasses: function() {
      return ['ivu-menu-dark', 'menu-item', this.isCollapsed ? 'collapsed-menu' : ''];
    },
    isDashboard() {
      console.log('isDashboard', this.$route);
      return this.$route.name === 'detail';
    }
  },
}
</script>
<style lang="less" scoped>
  .layout {
    position: absolute;
    top: 60Px !important;
    bottom: 0;
    border: 0 !important;
    border-radius: 0;
    background: #f5f7f9;
    width: 100%;
    .layout-container {
      height: 100%;
      flex-flow: row;
      .menu-item {
        & > div {
          display: block !important;
        }
        span {
          line-height: 21Px;
          display: inline-block;
          overflow: hidden;
          width: 100Px;
          text-overflow: ellipsis;
          white-space: nowrap;
          vertical-align: bottom;
          transition: width 0.2s ease, opacity;
          z-index: 100;
        }

        i {
          transform: translateX(0);
          transition: font-size 0.2s ease, transform 0.2s ease;
          vertical-align: middle;
          font-size: 20Px;
        }
        .sub-menu-selected {
          color: #fff;
        }
        .sub-menu-not-selected {
          color: rgba(255, 255, 255, 0.7) !important;
        }
      }
      .collapsed-menu {
        span {
          width: 0;
        }
      }
      .right-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: auto;
        .layout-content {
          flex: 1;
          height: 100%;
          overflow: auto;
          background: #fff;
          border-radius: 4Px;
        }
        .layout-copy {
          text-align: center;
          padding: 10Px 0 20Px;
          color: #9ea7b4;
        }
      }
    }
  }

  .spin-icon-load {
    animation: ani-demo-spin 1s linear infinite;
  }
  @keyframes ani-demo-spin {
    from {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(180deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .router-fade-enter-active,
  .router-fade-leave-active {
    transition: opacity 0.3s;
  }

  .router-fade-enter,
  .router-fade-leave-active {
    opacity: 0;
  }
</style>
<!-- <script lang="ts" src="./index.ts"></script> -->
