<template>
  <el-dialog
    fullscreen
    :visible.sync="dialogVisible"
    @destroy-on-close="true"
    class="setting-dialog"
  >
    <add-column
      v-if="dialogVisible"
      :id="id"
      :type="type"
      @close="handleClose"
      @after-save="handleAfterSave"
    ></add-column>
  </el-dialog>
</template>

<script>
import AddColumn from './AddColumn.vue'
export default {
  name: 'AddColumnDialog',
  components: {
    AddColumn,
  },
  data() {
    return {
      dialogVisible: false,
      type: '',
      id: '',
    }
  },
  methods: {
    open(type, id) {
      this.type = type
      this.id = id
      this.dialogVisible = true
    },
    handleClose() {
      this.dialogVisible = false
    },
    handleAfterSave() {
      this.handleClose()
      this.$emit('after-save')
    },
  },
}
</script>

<style lang="scss" scoped>
.setting-dialog {
  ::v-deep {
    & > .el-dialog {
      height: 100%;
      .el-dialog__header {
        display: none;
      }

      .el-dialog__body {
        height: 100%;
        padding: 0;
      }
    }
  }
}
</style>
