<script>
import { mixin } from '@/utils/mixin'
import { mapActions, mapGetters } from 'vuex'
export default {
  name: 'MobileLayout',
  components: {
  },
  mixins: [mixin],
  computed: {
    ...mapGetters(['nickname', 'avatar'])
  },
  methods: {
    ...mapActions(['Logout']),
    handleLogout () {
      this.$confirm({
        title: '提示',
        content: '确定要退出登录吗 ?',
        centered: true,
        onOk: () => {
          return this.Logout({}).then(() => {
            setTimeout(() => {
              this.$router.push({ path: '/user/login' })
            }, 16)
          }).catch(err => {
            this.$message.error({
              title: '错误',
              description: err.message
            })
          })
        },
        onCancel () {
        }
      })
    },
    handleToHome () {
      this.$router.push({ name: 'home' })
    }
  }
}
</script>

<template>
  <a-layout id="components-layout-mobile-fixed">
    <a-layout-header :style="{ position: 'fixed', zIndex: 1, width: '100%',padding:'0 10px' }">
      <div class="logo">
        <img src="@/assets/logo.png" height="30px">
        运营中心系统
      </div>
      <div class="user-wrapper">
        <a-icon type="user" />
        <span style="margin: 0 5px;">{{ nickname }}</span>
        <a href="javascript:;" style="margin-left: 10px;color: #ff5500;" @click="handleLogout">
          <a-icon type="logout"/>
          <span style="margin: 0 5px;">退出</span>
        </a>
      </div>
    </a-layout-header>
    <a-layout-content :style="{ padding: '0', marginTop: '64px' }">
      <div style="padding:10px;">
        <keep-alive>
          <router-view :key="$route.name"></router-view>
        </keep-alive>
      </div>
    </a-layout-content>
  </a-layout>
</template>
<style>
#components-layout-mobile-fixed{
  height: 100%;
  overflow: auto;
}
#components-layout-mobile-fixed .logo {
  width: 140px;
  height: 31px;
  line-height:31px;
  color: #fff;
  margin: 16px 15px 16px 0;
  float: left;
  text-align: center;
  font-weight: 900;
}
#components-layout-mobile-fixed .user-wrapper{
  float: right;
  z-index: 10000;
  color: #fff;
}
</style>
