<template>
  <div id="admin-frame">
    <van-row>
      <van-col span="24" class="main" :style="{ height: client.height + 'px' }">
        <van-col span="24" class="top" style="height: 40px" v-if="useTop">
          <top :topType="topType" @search="search" :leftArrow="leftArrow" @back="back"></top>
        </van-col>
        <van-col span="24" class="info" :style="{ height: getHeight() }"><slot name="info"></slot></van-col>
        <van-col span="24" class="page" style="height: 40px" v-if="usePage"><page :limit="limit" :total="total" @search="search"></page></van-col>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import top from './top.vue';
import page from './page.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'admin-frame',
  props: {
    // 头部信息
    useTop: { type: Boolean, default: () => true },
    topType: { type: String, default: () => '1' },
    leftArrow: { type: Boolean, default: () => true },
    // 分页
    usePage: { type: Boolean, default: () => true },
    limit: { type: Number, default: () => 10 },
    total: { type: Number, default: () => 0 },
  },
  components: {
    top,
    page,
  },
  data: function () {
    return {
      client: {},
    };
  },
  created() {},
  methods: {
    back() {
      this.$emit('back');
    },
    search(skip) {
      this.$emit('search', skip);
    },
    // 计算高度
    getHeight() {
      let top = 0;
      let page = 0;
      if (this.useTop) top = 40;
      if (this.usePage) page = 40;
      return this.client.height - top - page + 'px';
    },
  },
  mounted() {
    let client = {
      height: document.documentElement.clientHeight || document.body.clientHeight,
      width: document.documentElement.clientWidth || document.body.clientWidth,
    };
    this.$set(this, `client`, client);
  },
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  .info {
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #f9f9f9;
  }
}
</style>
