<template>
  <el-drawer :title="title" size="60%" destroy-on-close append-to-body :visible="drawerVisible" :wrapperClosable="false" @close="handleClose">
    <suite-component />
  </el-drawer>
</template>

<script>
import SuiteComponent from './suiteComponent/index.vue'

export default {
  props: {
    title: {
      type: String,
      required: true
    },
    visible: {
      type: Boolean,
      required: true
    }
  },
  components: {
    SuiteComponent
  },
  data() {
    return {
      drawerVisible: false
    }
  },
  computed: {},
  watch: {
    visible(bool) {
      this.drawerVisible = bool
    }
  },
  created() {},
  mounted() {},
  methods: {
    handleClose() {
      this.drawerVisible = false
      this.$emit('update:visible', false)
    }
  }
}
</script>

<style lang='less'>
</style>