<template>
  <el-aside :width="aosWidth" class="aos-aside" :class="{'aos-aside-right': placement === 'right','aos-aside-both': placement === 'both'}">
    <!-- <div class="aos-aside-content"> -->
      <div class="aos-aside-head" v-if="title">
        {{title}}
      </div>
      <div class="aos-aside-body">
        <template>
          <slot></slot>
        </template>
      </div>
    <!-- </div> -->
    <template slot="footer">
    </template>
  </el-aside>
</template>
<script>
export default {
  name: 'AosAside',
  componentName: 'AosAside',
  props: {
    width: {
      type: [Number,String],
      default: 180
    },
    placement: {
      type: String,
      default: 'left',
      validator: function (value) {
        return ['left', 'right', 'both'].indexOf(value) !== -1
      }
    },
    title: {
      type: String,
      default: ''
    }
  },
  computed: {
    aosWidth:function(){
      if(typeof this.width === 'string'){
        if(this.width.indexOf('px') > -1){
          return this.width;
        } else {
          return this.width + 'px';
        }
      } else if(typeof width === 'number'){
        return this.width + 'px'
      }
    }
  },
};
</script>

