<template>
  <a-config-provider :locale="locale">
    <template slot="renderEmpty">
      <div style="text-align: center">
        <p>暂无数据</p>
      </div>
    </template>
    <a-layout id="components-layout-demo-top-side" class="layoutComponents">
      <a-layout-header>
        <LayoutHeader />
      </a-layout-header>
      <a-layout>
        <a-layout-sider :width="collapsed ? 40:200" class="layoutSider">
          <LayoutSide ref="layoutSide" />
        </a-layout-sider>
        <div class="center-splitter">
          <div class="x-collapse" :class="{'splitter-left':!collapsed,'splitter-right':collapsed}" @click="changeCollapsed">&nbsp;</div>
        </div>
        <a-layout-content>
          <LayoutMain />
        </a-layout-content>
      </a-layout>
    </a-layout>
  </a-config-provider>
</template>

<script>
import LayoutHeader from "./LayoutHeader";
import LayoutMain from "./LayoutMain";
import LayoutSide from "./LayoutSide";
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN';

export default {
  name: "Layout",
  components: { LayoutSide, LayoutHeader, LayoutMain },
  data () {
    return {
      locale: zhCN,
      collapsed: false,
    }
  },
  computed: {

  },
  methods: {
    changeCollapsed () {
      this.collapsed = !this.collapsed
      this.$refs.layoutSide.changeCollapsed(this.collapsed)
    }
  }
}
</script>

<style lang="less" scoped>
::v-deep .ant-spin-container {
  width: 100%;
  height: 100%;
}
.layoutComponents {
  width: 100%;
  height: 100%;
}
.ant-layout-header {
  height: 53px !important;
  background: #f0f2f5 !important;
  // background: rgb(24, 21, 21) !important;
}
.ant-layout-header {
  padding: 0 !important;
}
.ant-layout-sider {
  background: #fff;
  border-right: 1px solid #e8e8e8;
  border-top: 1px solid #e8e8e8;
  overflow-y: auto;
  overflow-x: hidden;
  .ant-menu {
    border-right: 0px !important;
  }
}
.center-splitter {
  width: 4px;
  height: 100%;
  margin: 0px;
}
.x-collapse {
  position: absolute;
  cursor: pointer;
  background-color: transparent;
  background-repeat: no-repeat !important;
  background: no-repeat top right;
  top: 50%;
  margin-top: -17px;
  width: 4px;
  height: 35px;
}
.splitter-left {
  background-image: url(../../../static/images/mini-left.gif);
}
.splitter-right {
  background-image: url(../../../static/images/mini-right.gif);
}
</style>