<template>
  <div
    class="descriptions"
    :class="[labelPosition ? 'description-item-label-' + labelPosition : '']"
  >
    <div v-if="title !== ''" class="title">{{ title }}</div>
    <div v-if="$slots.header" class="descriptions-slot">
      <slot name="header" />
    </div>
    <el-row :gutter="20">
      <slot />
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'Descriptions',
  props: {
    title: {
      type: String,
      default: ''
    },
    // eslint-disable-next-line vue/require-default-prop
    labelPosition: String,
    // eslint-disable-next-line vue/require-default-prop
    labelWidth: String
  }
}
</script>

<style scoped lang="scss">
  .descriptions{
    .title{
      margin-bottom: 20px;
      color: rgba(0,0,0,.85);
      font-weight: 700;
      font-size: 16px;
      line-height: 1.5715;
      display: inline-block;
    }
    .descriptions-slot{
      float: right;
      .el-button{
        padding: 3px 0;
      }
    }
  }

</style>
