<template>
  <el-dialog
    title="添加菜单"
    width="1000px"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    append-to-body
  >
    <app-menu-form
      v-if="dialogVisible"
      ref="appMenuForm"
      :data.sync="data"
      :app-alias="appAlias"
      :app-name="appName"
      :level="level"
    ></app-menu-form>
    <div slot="footer">
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="save">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
const AppMenuForm = () => import('./AppMenuForm')

export default {
  name: 'AppMenuDialog',
  props: {
    appAlias: {
      type: String,
    },
    appName: {
      type: String,
    },
  },
  components: {
    AppMenuForm,
  },
  data() {
    return {
      dialogVisible: false,
      data: {},
      level: 1,
    }
  },
  methods: {
    open(data, level) {
      this.data = data
      this.level = level
      this.dialogVisible = true
    },
    save() {
      this.$refs.appMenuForm.save(() => {
        this.dialogVisible = false
        this.$emit('refresh')
      })
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep {
  & > .el-dialog {
    .el-dialog__body {
      height: 100%;
      padding: 0;
    }

    .el-tree .el-tree__empty-block {
      margin: 20px 0;
    }
  }

  .el-dialog__footer {
    text-align: right;
  }
}
</style>
