<template>
  <div class="content">
    <Header />
    <div class="page">
      <div class="navigation">
        <!-- @menuSelect="menuSelect" -->
        <!-- <Navgation :navgationData="navgationData"  /> -->
        <Menu @on-select="selectMenu">
          <MenuItem name="1">
            <Icon type="md-document" />
            销售订单
          </MenuItem>
          <!-- <MenuItem name="2">
            <Icon type="md-chatbubbles" />
            施工单
          </MenuItem> -->
          <MenuItem name="3">
            <Icon type="md-chatbubbles" />
            分架列表
          </MenuItem>
          <MenuItem name="4">
            <Icon type="md-chatbubbles" />
            派工单
          </MenuItem>
          <MenuItem name="5">
            <Icon type="md-chatbubbles" />
            入库单
          </MenuItem>
        </Menu>
      </div>
      <div class="router-map">
        <!-- <Breadcrumb>
          <Breadcrumb-item href="/">Home</Breadcrumb-item>
          <Breadcrumb-item href="/components/breadcrumb"
            >Components</Breadcrumb-item
          >
          <Breadcrumb-item>Breadcrumb</Breadcrumb-item>
        </Breadcrumb> -->
        <Breadcrumb :style="{ margin: '20px 0' }">
          <BreadcrumbItem v-for="(item, index) in $route.meta" :key="index">
            {{ item }}
          </BreadcrumbItem>
        </Breadcrumb>
        <!-- <Crumbs :crumbs="crumbs" /> -->
        <transition :name="transitionName">
          <router-view
            :class="[
              'router-style',
              $route.query.title == '首页' || $route.name == 'ProductionCharts'
                ? 'router-style-home'
                : 'router-style-page',
            ]"
          />
        </transition>
      </div>
    </div>
  </div>
</template>
<script>
import Header from "../components/header/index";
import Navgation from "../components/navgation/index";
import { mapState, mapMutations, mapActions } from "vuex";
export default {
  data() {
    return {
      transitionName: "slide-left",
    };
  },
  components: { Header, Navgation },
  computed: {
    ...mapState(["navgationData"]),
  },
  watch: {
    $route(to, from) {
      const toIndex = to.meta.index;
      const fromIndex = from.meta.index;
      this.transitionName = toIndex < fromIndex ? "slide-right" : "slide-left";
    },
  },
  methods: {
    selectMenu(e) {
      if (e == 1) {
        this.$router.push({ path: "/cms/product" });
      } else if (e == 2) {
        this.$router.push({ path: "/cms/working" });
      } else if (e == 3) {
        this.$router.push({ path: "/cms/pointsShelfList" });
      } else if (e == 4) {
        this.$router.push({ path: "/cms/workOrder" });
      }else if(e == 5){
        this.$router.push({ path: "/cms/godownEntry" });
      }
    },
    // menuSelect(name, data) {
    //   let permisssions_id = "";
    //   sessionStorage.setItem("open-menu", name);
    //   sessionStorage.removeItem("crumbs");
    //   if (this.func.isType(name) == "Number") {
    //     //若一级菜单带page的情况下
    //     let s = data[name];
    //     this.$store.commit("updateCrumbs", { s });
    //     sessionStorage.setItem(
    //       "crumbs",
    //       JSON.stringify({ parantData, childData, lastChild })
    //     );
    //     return this.$router.push({
    //       path: data[name].page,
    //       query: {
    //         title: s.title,
    //         id: s.id,
    //       },
    //     });
    //   }
    //   let split_array = name.split("-");
    //   let [parant, child, last, end, next_end] = split_array;
    //   let parantData = data[parant],
    //     childData = parantData.sub[child],
    //     lastChild,
    //     endChild,
    //     nextEndChild;
    //   if (last) {
    //     lastChild = childData.sub[last];
    //     if (lastChild.type_id) {
    //       permisssions_id = childData.id;
    //     }
    //   }
    //   if (end) {
    //     endChild = lastChild.sub[end];
    //     if (endChild.type_id) {
    //       permisssions_id = childData.id;
    //     }
    //   }
    //   if (next_end) {
    //     nextEndChild = endChild.sub[next_end];
    //   }
    //   this.$store.commit("updateCrumbs", {
    //     parantData,
    //     childData,
    //     lastChild,
    //     endChild,
    //     nextEndChild,
    //   });
    //   sessionStorage.setItem(
    //     "crumbs",
    //     JSON.stringify({
    //       parantData,
    //       childData,
    //       lastChild,
    //       endChild,
    //       nextEndChild,
    //     })
    //   );
    //   let page = nextEndChild
    //     ? nextEndChild.page
    //     : endChild
    //     ? endChild.page
    //     : lastChild
    //     ? lastChild.page
    //     : childData.page;
    //   let title = nextEndChild
    //     ? nextEndChild.title
    //     : endChild
    //     ? endChild.title
    //     : lastChild
    //     ? lastChild.title
    //     : childData.title;
    //   let id = nextEndChild
    //     ? nextEndChild.id
    //     : endChild
    //     ? endChild.id
    //     : lastChild
    //     ? lastChild.id
    //     : childData.id || "";
    //   this.$router.push({
    //     path: page,
    //     query: {
    //       title: title,
    //       id: id,
    //       permisssions_id: permisssions_id,
    //     },
    //   });
    // },
  },
};
</script>
<style lang="scss" scoped>
.content {
  height: 100vh;
}
.page {
  display: flex;
  height: 100%;
  width: 100%;
  padding-top: 80px;
  .navigation {
    width: 240px;
    height: 100%;
  }
  .router-map {
    overflow: hidden;
    width: calc(100% - 230px);
    height: 100%;
    padding: 10px 20px;
    background: #f0f1f4;
    .router-style {
      height: 100%;
      border-radius: 5px;
      background: #fff;
      position: relative;
    }
    .router-style-page {
      padding: 0 36px;
    }
    .router-style-home {
      padding: 0;
    }
  }
}

.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all 500ms;
  position: absolute;
}
.slide-right-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
</style>