<!-- 侧滑组件 -->
<template>
  <el-drawer
    ref="dialog"
    :direction="'rtl'"
    :visible.sync="visible"
    :before-close="cancel"
    :title="title"
    append-to-body
    :wrapperClosable="wrapperClosable"
    :size="width"
    :class="{ 'disable-bottom': disableBottom }"
  >
    <template slot="title">
      <slot name="title"></slot>
    </template>

    <slot></slot>

    <div class="dialog-footer" v-if="!disableBottom">
      <cs-button @click="cancel" v-if="!disableCancelButton">{{$t('common.cancel')}}</cs-button>
      <slot name="button"></slot>
    </div>
  </el-drawer>
</template>
<script>
import CsButton from '../Button/Default'

export default {
  name: 'CsSideslip',
  props: {
    title: {
      type: String,
      default: null,
    },
    size: {
      type: String,
      default: 'mini',
    },
    wrapperClosable: {
      type: Boolean,
      default: false,
    },
    beforeClose: {
      type: Function,
    },
    // 禁用自带取消按钮
    disableCancelButton: {
      type: Boolean,
      default: false,
    },
    // 禁用底部操作栏
    disableBottom: {
      type: Boolean,
      default: false,
    },
  },
  components: { CsButton },
  data() {
    return {
      visible: false,
      width: '',
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    /**取消*/
    cancel() {
      if (this.beforeClose && this.beforeClose() == false) {
        return
      }
      this.item = {}
      this.visible = false
      this.$refs.dialog.$el.scrollTop = 0 //滚动到顶部
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    if (this.size) {
      switch (this.size) {
        case 'full':
          this.width = '100%'
          break
        case 'big':
          this.width = '1280px'
          break
        case 'medium':
          this.width = '1080px'
          break
        case 'small':
          this.width = '960px'
          break
        case 'mini':
          this.width = '580px'
          break
        default:
          this.width = this.size
          break
      }
    }
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
</style>

<style>
.disable-bottom .el-drawer__body {
  padding: 0 !important;
  margin-bottom: 0 !important;
}
</style>
