<template>
  <div>
    <div v-if="type==='spread'">
      <div class="inline th-btn-text" @click="openDatabaseManager" v-if="enableadd">添加数据</div>
      <div class="inline th-btn-text" @click="activeRename">重命名</div>
      <div class="inline th-btn-text th-error" @click="deleteGroup">删除</div>
    </div>
    <HoverPopup ref="popupMenu" icon="ios-more" color="gray" :width="100" v-else>
      <ThMenuItem width="60" name="添加数据" icon="file-add" @on-click="openDatabaseManager" v-if="enableadd"/>
      <ThMenuItem width="60" name="重命名" icon="edit-1" @on-click="activeRename" />
      <ThMenuItem width="60" name="删除" icon="delete" color="#F65450" @on-click="deleteGroup" />
    </HoverPopup>
    <!-- 添加数据对话框 -->
    <DataImportModal ref="databaseManagementModal"/>
  </div>
</template>

<script>
import {catalogDelete} from '../../libs/request'
import ThThMenuItem from '../th-menu-item'
import DataImportModal from '../data-import-modal'
import HoverPopup from '../hover-popup'
export default {
  props: ['node', 'enableadd', 'type'],
  components: {HoverPopup, ThThMenuItem, DataImportModal},
  methods: {
    activeRename() {
      this.$emit('on-rename', this.node.catalogId)
      this.$refs.popupMenu.hidePopup()
    },
    deleteGroup() {
      this.$Modal.confirm({
        title: `确定要删除【${this.node.name}】专题吗？`,
        content: '<p>该操作无法恢复，请谨慎操作！</p>',
        onOk: () => {
          catalogDelete(this.node.owner, this.node.catalogId).then(() => {
            this.$emit('on-delete', this.node.catalogId)
            this.$Notice.success({
              title: '删除成功',
              duration: 3
            })
          })
        }
      })
    },
    openDatabaseManager() { // 打开数据库管理
      this.$refs.databaseManagementModal.show()
    }
  }
}  
</script>