<template>
  <div :class="[wrapperClass, {'sider-left': !right, 'sider-right': right, 'sider-fixed': fixed}]" :style="{width: getWidth}">
    <slot></slot>
  </div>
</template>

<script>
import { LIB_NAME } from '../../../../src/util'
const wrapperClass = `${LIB_NAME}-layout-sider`

export default {
  name: 'xLayoutSider',
  inject: ['xLayout'],
  props: {

    // 宽度
    width: {
      type: [Number, String],
      default: 200
    },

    // 层级
    zIndex: {
      type: Number,
      default: 10
    },

    // 是否展示在右边
    right: {
      type: Boolean,
      default: false
    },

    fixed: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      wrapperClass
    }
  },
  computed: {
    getWidth() {
      const width = this.width
      return width > 0 ? width + 'px' : width
    }
  },
  created() {
    this.xLayout.sider = this
  }
}
</script>
