<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 || $slots['header-right']">
        <div v-if="title" class="aos-aside-head__title">
          <span>{{title}}</span>
        </div>
        <div v-if="$slots['header-right']" class="aos-aside-head__right">
          <slot name="header-right"></slot>
        </div>
      </div>
      <div class="aos-aside-body">
        <template>
          <slot></slot>
        </template>
        <div v-if="bodyItemList.length > 0" class="aos-aside-body__list-container">
          <div
            class="aos-aside-body__item"
            :class="{'aos-aside-body__item--action':
            currentCode === item.code}"
            v-for="item in bodyItemList"
            :key="item.code"
            @click="handleClick(item)">
          {{ item.label }}</div>
        </div>
      </div>
    <!-- </div> -->
    <template slot="footer">
    </template>
  </el-aside>
</template>
<script>
export default {
  name: 'AosAside',
  componentName: 'AosAside',
  props: {
    bodyItemList: {
      type: Array,
      default: function () {
        return []
      }
    },
    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: ''
    }
  },
  data () {
    return {
      currentCode: ''
    }
  },
  created () {
    if (this.bodyItemList.length > 0) {
      this.currentCode = this.bodyItemList[0].code
    }
  },
  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'
      }
    }
  },
  methods: {
    handleClick (item) {
      this.currentCode = item.code
      this.$emit('item-click', item)
    }
  }
};
</script>

