<template>
  <el-card :shadow="shadow" style="margin-bottom: 20px;text-align: left" 
    :class="{'noBar':!hasRightBar,'noPaddingX':(noPadding||noPaddingX),'noPaddingY':(noPadding||noPaddingY)}" v-loading="loading">
    <div slot="header" class="clearfix" v-if="title">
      <al-title size="medium" leftBar :class="{'hasRightBar':hasRightBar}" style="text-align: left">
        {{title}}
        <slot name="header-bar-left"></slot>
      </al-title>

      <div class="right-bar-container">
        <slot name="header-bar-right"></slot>
      </div>
    </div>
    <slot></slot>
  </el-card>
</template>

<script>
    export default {
        name: "Card",
        props:{
            title:{
                type:String,
                default:''
            },
            shadow:{
                type:String,
                default:'always'
            },
            loading:{
                type:Boolean,
                default:false
            },
            noPadding:{
                type:Boolean,
                default:false,
            },
            noPaddingX:{
                type:Boolean,
                default:false,
            },
            noPaddingY:{
                type:Boolean,
                default:false,
            }
        },
        computed:{
            hasRightBar(){
                if(this.$slots['header-bar-right']&&this.$slots['header-bar-right'].length){
                    return true
                }
                return false
            }
        }
    }
</script>

<style scoped lang="scss">
  .el-card{
    &.noPaddingX{
      /deep/{
        .el-card__body{
          padding-left: 0;
          padding-right: 0;
        }
      }
    }
    &.noPaddingY{
      /deep/{
        .el-card__body{
          padding-top: 0;
          padding-bottom: 0;
        }
      }
    }
  }
  .hasRightBar{
    position: absolute!important;
    box-sizing:border-box;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    padding: 24px;
    z-index: 0;
    line-height: 16px!important;
    &:after{
      left: 24px!important;
    }
  }
  .el-card{
    position: relative;
    border: none;
    margin-bottom: 24px;
  }
  /deep/ .el-card__header{
    position: relative;
    padding: 14px 24px;
  }
  .noBar /deep/>.el-card__header{
    position: relative;
    padding: 17px 24px;
  }
  /deep/ .el-card__body{
    padding: 24px;
  }
  .right-bar-container{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    direction: rtl;
    position: relative;
    text-align: right;
  }
</style>
