<template>
  <el-drawer
    class="ps-drawer"
    :title="title"
    :visible.sync="visible"
    :direction="direction"
    :wrapperClosable="false"
    @close="operaClose"
  >
    <div class="ps-drawer-body">
      <el-scrollbar style="height: 100%">
        <slot></slot>
      </el-scrollbar>
    </div>

    <slot name="footer"></slot>
  </el-drawer>
</template>

<script>
export default {
  name: "PsDrawer",
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: null,
    },

    direction: {
      type: String,
      default: "rtl",
    },
  },
  model: {
    prop: "value",
    event: "handler",
  },
  watch: {
    value: {
      handler(val) {
        this.visible = val;
      },
      immediate: true,
    },
  },
  data() {
    return {
      visible: false,
    };
  },
  created() {},
  mounted() {},
  methods: {
    operaClose() {
      this.$emit("close", false);
      this.$emit("handler", false);
    },
  },
};
</script>

<style>
</style>
