<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 page">
            <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>
  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: []
          }]
      }
    },
    methods: {
      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() {
      console.log('isDashboard', this.$route);
    },
    computed: {
      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> -->
