<template>
  <ul :class="{'side-menu':level == 1,'side-menu-light':isLight&& level == 1,}">
    <!-- <div class="ivu-poptip-arrow"></div> -->
    <li v-for="(item,index) in data" :key="index">
      <a class="fancy-hover" :class="{'active':currentPageName == item.actionUrl}" :style="{'padding-left':level == 1 ? '16px' : ((level + 1) * 8)+'px' , 'padding-right':'8px'}"
         @click.stop="handle(item, $event)">
        <Icon :type="item.iconCls || 'md-ionic'" v-if="level == 1 "></Icon>
        <span class="transfer-span" :style="{transform: item.expand ? 'translateZ(19px) rotateY(180deg) scale(0.5)' : 'translateZ(19px) rotateY(0) scale(1)'}">{{item.menuName}}</span>
        <!--    :class="{'ivu-icon-ios-arrow-up':item.expand,'ivu-icon-ios-arrow-down':!item.expand}"     -->
        <i class="ivu-icon arrow ivu-icon-ios-arrow-down" :style="{transform: item.expand ? 'translateY(-50%) rotate(180deg)' : 'translateY(-50%)'}" v-if="!!item.children && item.children.length > 0"></i>
        <div class="active-mark" v-if="currentPageName == item.actionUrl"></div>
      </a>
      <sidebar-menu class="menu-show" v-if="!!item.children && item.children.length > 0" :data="item.children" :expand="item.expand" :isLight="isLight" :level="level + 1" style="height:0;"></sidebar-menu>
    </li>
  </ul>
</template>  

<script>
import { mapState } from "vuex";
export default {
  name: "sidebar-menu",
  components: {},
  props: {
    data: {
      type: Array,
      default() {
        return [];
      }
    },
    expand: {
      type: Boolean,
      default() {
        return false;
      }
    },
    level: {
      type: Number,
      default() {
        return 1;
      }
    },
    isLight: {
      type: Boolean,
      default() {
        return false;
      }
    }
  },
  data() {
    return {
      height: "auto",
      originalHeight: "",
      prevDate: null
    };
  },
  computed: {
    ...mapState(["tagsList", "currentPageName", "pageOpenedList"])
  },
  created() {},
  beforeMount: function() {},
  mounted: function() {},
  beforeDestroy: function() {},
  destroyed: function() {},
  methods: {
    handle(item, e) {
      if (
        !!item.children &&
        item.children.length > 0 &&
        (!this.isLight || this.level != 1)
      ) {
        this.toggleExpand(item, item.children.length, e);
        return;
      }

      let active = item.actionUrl.split("?")[0];
      let params = this.getParams(item.actionUrl);
      if (active !== "accesstest_index") {
        let pageOpenedList = this.pageOpenedList;
        let openedPageLen = pageOpenedList.length;
        let i = 0;
        let tagHasOpened = false;
        while (i < openedPageLen) {
          if (
            active === pageOpenedList[i].name &&
            item.actionUrl === pageOpenedList[i].actionUrl
          ) {
            this.$store.commit("moveToSecond", i);
            tagHasOpened = true;
            break;
          }
          i++;
        }

        if (!tagHasOpened) {
          let tag = this.tagsList.filter(item => {
            if (item.children && item.nest != "YES") {
              return active === item.children[0].name;
            } else {
              return active === item.name;
            }
          });

          tag = tag[0];
          if (!tag) {
            return;
          } else {
            tag = Object.assign({}, tag);
          }

          //解决子路由嵌套title不显示问题
          if (!(tag.children && tag.nest == "YES")) {
            tag = tag.children ? tag.children[0] : tag;
          }

          tag.params = params;
          tag.actionUrl = item.actionUrl;
          // tag显示名使用菜单名
          tag.title = item.menuName;

          this.$store.commit("increateTag", tag);
          localStorage.pageOpenedList = JSON.stringify(
            this.pageOpenedList
          ); // 本地存储已打开页面
        }

        //this.$store.commit("setCurrentPageName", item.actionUrl); 不需要, 在 main.vue里有处理
        this.$router.push({
          name: active,
          params: params,
          query: params
        });
      }
    },
    toggleExpand(item, length, e) {
      let ul =
        e.target.nodeName == "A"
          ? e.target.nextSibling.nextSibling
          : e.target.parentNode.nextSibling.nextSibling;
      let from = 0;
      let to = 0;
      if (!item.expand) {
        for (let h of ul.children) {
          to += h.offsetHeight;
        }
      } else {
        from = ul.offsetHeight;
      }
      this.toggleAni(from, to, ul);
      item.expand = !item.expand;
      this.$forceUpdate();
    },
    toggleAni(form, to, ul) {
      Math.animation(
        form,
        to,
        value => {
          this.$nextTick(() => {
            ul.style.height = `${value}px`;
            if (to == value && to != 0) {
              ul.style.height = ``;
            }
          });
        },
        "Cubic.easeInOut",
        300
      );
    },
    getParams(url) {
      let params = {};
      let paramStr = url.split("?")[1];
      if (!paramStr) {
        // 没有参数时
        return params;
      }
      let paramArr = paramStr.split("&");
      paramArr.forEach(element => {
        var str = element.split("=");
        params[str[0]] = str[1];
      });
      return params;
    },
    throttle(fn, delay) {
      let now = Date.now()
      if (now - this.prevDate > delay) {
        fn()
        this.prevDate = Date.now()
      }
    }
  },
  watch: {
    // $route(to) {
    //   this.currentPageName = to.name;
    //   localStorage.currentPageName = to.name;
    // },
    isLight(val) {
      if (this.level > 1) {
        this.$el.style.height = "0";
      }
      for (let d of this.data) {
        d.expand = false;
      }
    }
  },
  directives: {}
};
</script>

<style lang="less">
@import "./index.less";
.fancy-hover {
  position: relative;
  display: block;
  color: #fff;
  cursor: pointer;
  transition: all 0.5s cubic-bezier(0.42, 0, 0.58, 1);
  &:before {
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    display: block;
    height: 100%;
    width: 0;
    content: '';
    opacity: .6;
    background: #F99C34;
  }
  &:hover:before {
    left: 0;
    right: auto;
    width: 100%;
    transition: all 0.5s cubic-bezier(0.42, 0, 0.58, 1);
  }
  .transfer-span {
    //transform: translateZ(19px) rotateY(0) scale(1);
    //transform: translateZ(19px) rotateY(180deg) scale(0.5);
    transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
}
</style>
