<template>
  <div>
    <div v-if="type==='spread'">
      <div class="inline th-btn-text" @click="showSource">查看</div>
      <div class="inline th-btn-text" @click="activeRename">重命名</div>
      <div class="inline th-btn-text" @click="sourceReplace">替换</div>
      <div class="inline th-btn-text" @click="showProperties">属性</div>
      <div class="inline th-btn-text th-error" @click="deleteSource">删除</div>
    </div>
    <HoverPopup ref="popupMenu" icon="ios-more" color="gray" :width="100" v-else>
      <ThMenuItem width="60" name="查看" icon="play" @on-click="showSource" v-if="isprivate"/>
      <ThMenuItem width="60" name="重命名" icon="edit-1" @on-click="activeRename" v-if="isprivate"/>
      <ThMenuItem width="60" name="替换" icon="relativity" @on-click="sourceReplace" v-if="isprivate"/>
      <ThMenuItem width="60" name="属性" icon="ios-list-box" @on-click="showProperties"/>
      <ThMenuItem width="60" name="删除" icon="delete" color="#F65450" @on-click="deleteSource" v-if="isprivate"/>
    </HoverPopup>
    <Modal v-model="propertiesDlg" title="属性" width="440" @on-close="hideProperties" :mask-closable="false">
      <div class="properties">
        <div v-if="activeProperties">
          <TableProperties :data="activeProperties" :node="node" :isprivate="isprivate"/>
        </div>
        <div v-else>loading</div>
      </div>
      <template #footer>
        <Button width="80" height="30" @on-click="hideProperties">确定</Button>
      </template>
    </Modal>
    <!-- 添加数据对话框 -->
    <DataImportModal :node="node" type="replace" ref="databaseManagementModal"/>
    <SourceData ref="sourceData"
      :selectedItem="node"
    />
  </div>
</template>

<script>
import { tableLoad, tableDelete, catalogDelete } from '../../libs/request'
import ThThMenuItem from '../th-menu-item'
import TableProperties from './TableProperties.vue'
import DataImportModal from '../data-import-modal'
import SourceData from './SourceData.vue'
import HoverPopup from '../hover-popup'
export default {
  props: ['node', 'isprivate', 'type'],
  components: { HoverPopup, ThThMenuItem, DataImportModal, SourceData, TableProperties },
  methods: {
    activeRename() {
      this.$emit('on-rename', this.node.catalogId)
      this.$refs.popupMenu.hidePopup()
    },
    sourceReplace() {
      this.$refs.databaseManagementModal.show()
    },
    deleteSource() {
      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
            })
          })
          tableDelete(this.node.owner, this.node.resId)
        }
      })
    },
    showSource(){
      this.$refs.sourceData.show()
    },
    async showProperties() {
      this.propertiesDlg = true
      if (this.activeProperties && this.activeProperties.tableId === this.node.resId) {
        return
      }
      this.activeProperties = null
      let {owner, resId} = this.node
      let  response = await tableLoad(owner, resId)
      this.activeProperties = response.data
    },
    hideProperties() {
      this.propertiesDlg = false
    }
  },
  data() {
    return {
      activeProperties: null,
      propertiesDlg: false,
      copyDlg: false,
      selectedGroupId: ''
    }
  }
}  
</script>