<template>
  <div class="person-user">
    <div class="person-user-body">
      <div class="user-left-menu">
        <leftMenu
          :leftMenuData='leftMenuData'
          @isCollapse='handleIsCollapse'>
        </leftMenu>
      </div>
      <div class="pserson-router-cont"
           :class="{'isCollapse-w':isCollapse}">
        <transition name='opa-keep' mode="in-out">
          <keep-alive>
            <router-view v-if="$route.meta.keepAlive"></router-view>
          </keep-alive>
        </transition>
        <transition name='opa-mini' mode="out-in">
          <router-view v-if="!$route.meta.keepAlive"></router-view>
        </transition>
      </div>
    </div>
    <appFooter></appFooter>
  </div>
</template>

<script>
import leftMenu from '../LeftMenu'
import appFooter from '../../AppFooter'

export default {
  components: {
    leftMenu,
    appFooter
  },
  data () {
    return {
      leftMenuData: [
        {
          index: '1',
          icon: 'el-icon-location',
          title: '个人中心',
          menuItem: [
            {route: 'userinfo', listTitle: '我的信息'},
            {route: 'changepassword', listTitle: '修改密码'},
            {route: 'addinfo', listTitle: '完善个人信息'}

          ]
        },
        {
          index: '2',
          icon: 'el-icon-tickets',
          title: '我的订单',
          menuItem: [
            {route: 'currentorder', listTitle: '所有订单'},
            {route: 'addorder', listTitle: '发布订单'},
            {route: 'horder', listTitle: '历史订单'},
          ]
        },
        {
          index: '3',
          icon: 'el-icon-message',
          title: '我的消息',
          menuItem: [
            {route: 'mymeg', listTitle: '消息'}
          ]
        }
      ],
      isCollapse: false
    }
  },
  methods: {
    handleIsCollapse (newVal) {
      this.isCollapse = newVal
    }
  }

}
</script>

<style lang='scss'>
.person-user {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background-color: #f7f7f7;
}

.person-user-body {
  position: relative;
  display: flex;
  width: 80%;
  margin: 0 auto 5rem;
}

.user-left-menu {
  background-color: #fff;
}

.pserson-router-cont {
  position: relative;
  width: 100%;
  width: calc(100% - 10.1rem);
  min-height: 35rem;
  background-color: #fff;
  border: 1px solid rgb(228, 225, 225);
  border-top: none;
  transition: all .5s;
  background-color: darken(#f4f9fd, 0%);
  padding-bottom: 3rem;
}

.isCollapse-w {
  width: calc(100% - 3.3rem);
}

.pageination-oder{  //订单页中的分页样式
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  //margin-top: 1rem;
  bottom: -3rem;
}

@media only screen and (max-width: 1200px) {
  .person-user-body {
    width: 90%;
  }
  .pserson-router-cont {
    min-height: 45rem;
  }
}

@media only screen and (max-width: 992px) {
  .person-user-body {
    width: 100%;
  }
}
</style>
