<template>
    <div class="aside-wrapper" :class="show ? 'open-slide': 'close-slide' ">
      <div class="aside-content-wrapper " :class="show ? 'slide-right' : 'slide-left'"  >
        <div class="aside-content">
            <div class="record-banner-top">
                <span>{{title}}</span>
                <i @click="handleCloseSlideClick" class="iconfont">&#xe827;</i>
            </div>
            <!-- <div class="space" v-if=""></div> -->
            <div class="data-content" ref="scrollWrapper">
                <div>
                    <slot name="content"></slot>
                </div>
            </div>
        </div>
      </div>
      <div class="silde-mask"  @click="isMaskClose ? handleCloseSlideClick : ''"></div>
    </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
    name: 'RightSlider',
    props: {
        show: {
            type: Boolean,
            default: false
        },
        title: {
            type: String,
            default: ''
        },
        isMaskClose: { // 点击遮罩层是否关闭
            type: Boolean,
            default: true
        }
    },
    components: {
    },
    computed: {
    },
    data () {
        return {
            scroll: null
        }
    },

    methods: {
        initBScroll () {
            this.$nextTick(() => {
                this.scroll = new BScroll(this.$refs.scrollWrapper, {
                    click: true
                })
            })
        },
        handleCloseSlideClick () {
            this.$emit('close')
        }
    },
    filters: {

    },
    created () {
    },
    mounted () {
        this.initBScroll()
    }
}
</script>

<style lang="less" scoped>
@size-0275: .275rem;
@size-028: .28rem;
@size-03: .3rem;
@size-032: .32rem;
@size-05: .5rem;
.data-content{
    width: 100%;
    flex: 1;
    overflow: hidden;
}
.aside-wrapper {
    height: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 10;
  .aside-content-wrapper {
    position:  absolute;
    height: 100%;
    width: 100%;
    z-index: 10;
    background: #fff;
     overflow: hidden;
    // transition:all .35s;
    transform: translate3d(120%,0,0);
    transition: transform ease-in-out .35s;
    .space{
        width: 100%;
        height: 15px;
    }
    .aside-content {
      width: 80%;
      height: 100%;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      /deep/.weui-cells {
        margin-top: 0;
      }
      /deep/.weui-cells:after {
        border: 0;
      }
      .aside-content-hd {
        padding: 10px 15px 0px;
      }
      .aside-content-bd {
        overflow-y: auto;
        flex:1;
            .input-group, .input-group:before{
            background: transparent;
            }
        }
    }
  }
  .align-item-initial {
    align-items: initial;
  }
  .flex {
      display: flex;
  }
  .flex-1 {
     flex: 1;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .is-require {
      position: relative;
  }
  .is-require::before {
    content: '*';
    color: red;
    margin-right: 4px;
  }
  // 侧边栏
  .silde-mask {
    width: 0;
    height: 0;
    z-index: 9;
    background:rgba(0,0,0,.65);
    content:'';
    opacity: 0;
    transition: opacity .35s, width .1s .35s,height .1s .35s
  }
  &.open-slide {
    height: 100%;
  }
   &.close-slide {
    transition: height .1s .35s;
    height: 0;
  }
  &.open-slide .aside-content-wrapper.slide-right {
    transform: translate3d(20%,0,0)
  }
   &.close-slide .aside-content-wrapper.slide-left {
    transform: translate3d(120%,0,0)
  }
   &.open-slide .silde-mask {
     width: 100%;
     height: 100%;
     cursor:pointer;
     opacity: 1;
     transition: opacity .35s
   }
}
.record-banner-top{
    border-bottom: 1px solid #D7D7D7;
    padding: 6px;
    font-size: 16px;
    display: flex;
    justify-content: space-between;
}
.text-gray{
    color: #797979!important;
}
</style>
