<template>
<div class="mu-paper" :class="{noBox:noBox}">
  <mu-divider v-if="title" >
    {{title}}
  </mu-divider>
  <div class="mu-paper__body">
    <slot></slot>
  </div>
</div>
</template>

<script>
import Divider from '../divider';
export default {
  name: 'mu-paper',
  props: {
    title:{
      type:String,
    },
    circle: {
      type: Boolean,
      default: false
    },
    rounded: {
      type: Boolean,
      default: true
    },
    noBox:{
      type: Boolean,
      default: false
    },
  },
  computed: {
    paperClass () {
      var arr = []
      if (this.circle) arr.push('mu-paper-circle')
      if (this.rounded) arr.push('mu-paper-round')
      arr.push('mu-paper-' + this.zDepth)
      return arr
    }
  },
  components: {
    'mu-divider': Divider,
  }
}
</script>

<style lang="less">
@import "../styles/import.less";

.mu-paper {
  transition:all .45s cubic-bezier(.23,1,.32,1);
  color: @textColor;
  background-color: #fff;
  box-shadow:0 0 8px 0 rgba(0,0,0,0.05);
  border-radius:5px;
}
.mu-paper.noBox{
  box-shadow:none;
  border-radius:0;
}


.no-body-gutter .mu-paper__body{
    padding-top:0;
}
.mu-paper__body{
    padding-top:1.2rem;
    overflow: hidden;
  }
.mu-paper-round {
  border-radius: 5px;
}

.mu-paper-circle {
  border-radius: 50%;
}

.mu-paper .title{
    top:0;
    padding-top:0.3rem;
    position:relative;
    text-align:center;
    line-height: 3rem;
    height:3rem;
}
.mu-paper .title:before {
    content: " ";
    display:block;
    position: absolute;
    left: 3.2rem;
    top: 1.8rem;
    width:8rem;
    height: 0.1rem;
    border-top: 0.1rem solid #e6e7e8;
    transform-origin: 0 100%;
    transform: scaleY(0.5);
}
.mu-paper .title:after {
    content: " ";
    display:block;
    position: absolute;
    right: 3.2rem;
    top: 1.8rem;
    width:8rem;
    height: 0.1rem;
    border-top: 0.1rem solid #e6e7e8;
    transform-origin: 0 100%;
    transform: scaleY(0.5);
}
</style>
