<script>
import { mixin } from '@/utils/mixin'
import { mapActions, mapGetters } from 'vuex'
export default {
  name: 'MobilePageLayout',
  components: {
  },
  mixins: [mixin],
  computed: {
    ...mapGetters(['nickname', 'avatar']),
    title () {
      return this.$route.meta.title
    }
  },
  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.go(-1)
    }
  }
}
</script>

<template>
  <a-layout id="components-layout-mobile-page">
    <a-layout-header :style="{ position: 'fixed', zIndex: 1, width: '100%',padding:'0 10px' }">
      <a href="javascript:;" class="icon-back" style="margin:0 10px;color: #fff;" @click="handleToHome">
        <a-icon type="left"/>
        <span style="margin: 0 5px;">返回</span>
      </a>
      <div class="logo">
        {{ title }}
      </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-page{
  height: 100%;
  overflow: auto;
}
#components-layout-mobile-page .logo {
  width: 100px;
  height: 31px;
  line-height:31px;
  color: #fff;
  margin: 16px 15px 16px 0;
  text-align: center;
  font-weight: 900;
  position: absolute;
  width: 100%;
  z-index: -1;
}
#components-layout-mobile-page .icon-back{
  z-index: 10000;
  color: #fff;
  float: left;
}
</style>
