<template>
  <div class="drawer">
    <div :class="maskClass" @click="closeByMask"></div>
    <div :class="mainClass" :style="mainStyle" class="main">
      <div class="drawer-head">
        <span>{{ title }}</span>
        <span class="close-btn" v-show="closable" @click="closeByButton">X</span>
      </div>
      <div class="drawer-body">
        <slot/>
      </div>
      <div class="switch" @click="display = !display">
        <img v-if="display" src="@/assets/images/l.png" alt="" />
        <img v-else src="@/assets/images/r.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      // 是否打开
     /* display: {
        type: Boolean
      },*/

      // 标题
      title: {
        type: String,
        default: '标题'
      },

      // 是否显示关闭按钮
      closable: {
        type: Boolean,
        default: true
      },

      // 是否显示遮罩
      mask: {
        type: Boolean,
        default: true
      },

      // 是否点击遮罩关闭
      maskClosable: {
        type: Boolean,
        default: true
      },

      // 宽度
      width: {
        type: String,
        default: '400px'
      },

      // 是否在父级元素中打开
      inner: {
        type: Boolean,
        default: false
      }
    },
    data(){
      return{
        //抽屉是否收回
        display: true
      }
    },
    computed: {
      maskClass: function () {
        return {
          'mask-show': (this.mask && this.display),
          'mask-hide': !(this.mask && this.display),
          'inner': this.inner
        }
      },
      mainClass: function () {
        return {
          'main-show': this.display,
          'main-hide': !this.display,
          'inner': this.inner
        }
      },
      mainStyle: function () {
        return {
          width: this.width,
          left: this.display ? '0' : `-${+this.width.substr(0,this.width.length-2) + 20 }px`,
          borderLeft: this.mask ? 'none' : '1px solid #eee'
        }
      }
    },
    mounted () {
      this.display = true;
      if (this.inner) {
        let box = this.$el.parentNode
        box.style.position = 'relative'
      }
    },
    methods: {
      closeByMask () {
        this.maskClosable && this.$emit('update:display', false)
      },
      closeByButton () {
        //this.$emit('update:display', false)
        this.display = false;
      }
    }
  }
</script>

<style lang="scss" scoped>
  .drawer {
    position: absolute;
    top: 20px;
    bottom:0;
    z-index:99;

    /* 遮罩 */
    .mask-show {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;

      z-index: 10;
      background-color: rgba(0,0,0,.5);
      opacity: 1;
      transition: opacity .5s;
    }
    .mask-hide {
      opacity: 0;
      transition: opacity .5s;
    }

    /* 滑块 */
    .main {
      position: fixed;
      z-index: 10;
      top: 0;
      height: 100%;
     /* background: rgb(49 114 195 / 24%);*/
      background: #FFFFFF;
      transition: all 0.5s;
    }
    .main-show {
      opacity: 1;
    }
    .main-hide {
      opacity: 1;
    }

    /* 某个元素内部显示 */
    .inner {
      position: absolute;
    }

    /* 其他样式 */
    .drawer-head {
      display: flex;
      justify-content: space-between;
      height: 45px;
      line-height: 45px;
      padding: 0 15px;
      font-size: 15px;
      font-weight: bold;
      /*background: rgb(87 114 153 / 44%);*/
      background: #f8f8f9;
      color:#515a6e;
     /* border-bottom: 1px solid #eee;*/
      .close-btn {
        display: inline-block;
        cursor: pointer;
        height: 100%;
        padding-left: 20px;
      }
    }
    .drawer-body {
      font-size: 14px;
      padding: 15px;
      padding-bottom:30px;
      height: 100%;
      width: 100%;
      overflow-y: scroll;
      overflow-x: scroll;
    }

  }
  .switch {
    position: absolute;
    right: -33px;
    top: 250px;
    i {
      background: #fff;
    }
    overflow: hidden;
    cursor: pointer;
    opacity: 1;
  }
</style>