<template>
  <!-- 弃用，留档20220805，功能迁移至/graph/graphSpace.vue -->
  <div>
    <div class="menu-title">
      知识图谱实例管理
    </div>
    <div class="menu-content">
      <div>
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="当前知识图谱实例：">
            <el-select v-model="space" @change="querySpaceDescribe">
              <el-option v-for="item in spaceList" :key="item.Name" :label="item.Name" :value="item.Name"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item style="float:right;">
            <el-button type="primary" icon="el-icon-back" @click="backToSpaceList">知识图谱实例列表</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="tab-box">
        <el-tabs tab-position="left">
          <el-tab-pane label="类">
            <div style="margin: 0px 0 20px 0">
              <el-button type="primary" @click="createTag()">新建类</el-button>
            </div>
            <div>
              <el-table :data="tagList" style="width: 100%">
                <el-table-column type="index" label="行号" width="100"></el-table-column>
                <el-table-column prop="Name" label="名称"></el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button @click.native.prevent="modifyTag(scope.row)" type="text" size="small">
                      编辑
                    </el-button>
                    <el-button @click.native.prevent="removeTag(scope.row)" type="text" size="small">
                      删除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
          <el-tab-pane label="关系">
            <div style="margin: 0px 0 20px 0">
              <el-button type="primary" @click="createEdge()">新建关系</el-button>
            </div>
            <div>
              <el-table :data="edgeList" style="width: 100%">
                <el-table-column type="index" label="行号" width="100"></el-table-column>
                <el-table-column prop="Name" label="名称"></el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button @click.native.prevent="modifyEdge(scope.row)" type="text" size="small">
                      编辑
                    </el-button>
                    <el-button @click.native.prevent="removeEdge(scope.row)" type="text" size="small">
                      删除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
          <el-tab-pane label="索引">
            <div>
              <el-form :inline="true" class="demo-form-inline">
                <el-form-item>
                  <el-select v-model="activeIndexType" placeholder="请选择索引类型" @change="queryIndexList">
                    <el-option label="TAG" value="TAG"></el-option>
                    <el-option label="EDGE" value="EDGE"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
            <div style="margin: 0px 0 20px 0">
              <el-button type="primary" @click="createIndex()">新建索引</el-button>
            </div>
            <div>
              <el-table :data="indexList" style="width: 100%">
                <el-table-column type="index" label="行号" width="100"></el-table-column>
                <el-table-column prop="name" label="名称"></el-table-column>
                <el-table-column prop="type" label="标签" v-if="activeIndexType == 'TAG'"></el-table-column>
                <el-table-column prop="type" label="边类型" v-if="activeIndexType == 'EDGE'"></el-table-column>
                <el-table-column prop="columns" label="属性"></el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button @click.native.prevent="removeIndex(scope.row)" type="text" size="small">
                      删除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <tag-modify ref="tagModify"></tag-modify>
    <edge-type-modify ref="edgeTypeModify"></edge-type-modify>
    <index-add ref="indexAdd"></index-add>
  </div>
</template>

<script>
import request from '@/utils/request';
import tagModify from '@/components/dialog/TagModify';
import edgeTypeModify from '@/components/dialog/EdgeTypeModify';
import indexAdd from '@/components/dialog/IndexAdd';

var _this;
export default {
  name: "spaceSet",
  components: {
    'tag-modify': tagModify,
    'edge-type-modify': edgeTypeModify,
    'index-add': indexAdd
  },
  data() {
    return {
      space: '',
      spaceList: [],
      spaceDescribe: {},
      cmd: {},
      tagList: [],
      addTagDialogVisible: false,
      edgeList: [],
      activeIndexType: 'TAG',
      indexList: [],
    }
  },
  mounted() {
    _this = this;
    _this.space = this.$route.query.space;
    _this.querySpaceList();
    _this.querySpaceDescribe();
  },
  methods: {
    backToSpaceList() {
      this.$router.push({path: "/graphSpace"})
    },
    querySpaceList() {
      request({
        url: '/nebula_operate/showspace',
        method: 'get'
      }).then(res => {
        _this.spaceList = res.data;
      });
    },
    querySpaceDescribe() {
      request({
        url: `/nebula_operate/descspace/${_this.space}` ,
        method: 'get',
        data: {}
      }).then(res => {
        let spaceDescribe = {};
        // 处理返回数据
        res.data.forEach(row => {
          for (let key in row) {
            spaceDescribe[key] = row[key];
          }
        });
        _this.spaceDescribe = spaceDescribe;
        _this.queryTagList();
        _this.queryEdgeList();
        _this.queryIndexList();
      });
    },
    queryTagList() {
      request({
        url: `/nebula_operate/showtag/${_this.space}`,
        method: 'get',
        data: {}
      }).then(res => {
        _this.tagList = res.data;
      });
    },
    queryEdgeList() {
      request({
        url: `/nebula_operate/showedge/${_this.space}`,
        method: 'get',
        data: {}
      }).then(res => {
        _this.edgeList = res.data;
      });
    },
    queryIndexList() {
      request({
        url: `/nebula_operate/showindex/${_this.space}/${_this.activeIndexType}`,
        method: 'get',
        data: {}
      }).then(res => {
        let _indexList = [];
        for (let i = 0; i < res.data.length / 3; i++) {
          let j = i * 3;
          _indexList.push({
            name: res.data[j]['Index Name'],
            type: _this.activeIndexType == 'TAG' ? res.data[j + 1]['By Tag'] : res.data[j + 1]['By Edge'],
            columns: JSON.stringify(res.data[j + 2]['Columns']),
          });
        }
        _this.indexList = _indexList;

      });
    },
    createTag() {
      _this.$refs['tagModify'].updateValue(_this.space, '', true);
    },
    modifyTag(item) {
      _this.$refs['tagModify'].updateValue(_this.space, item.Name);
    },
    removeTag(item) {
      _this.$confirm('此操作将永久删除记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request({
          url: `/nebula_operate/droptag/${_this.space}/${item.Name}`,
          method: 'get',
          data: {}
        }).then(res => {
          _this.$message.success("删除成功");
          _this.querySpaceList();
        });
      }).catch(() => {
      });
    },
    createEdge() {
      _this.$refs['edgeTypeModify'].updateValue(_this.space, '', true);
    },
    modifyEdge(item) {
      _this.$refs['edgeTypeModify'].updateValue(_this.space, item.Name);
    },
    removeEdge(item) {
      _this.$confirm('此操作将永久删除记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request({
          url: `/nebula_operate/dropedge/${_this.space}/${item.Name}`,
          method: 'get',
          data: {}
        }).then(res => {
          _this.$message.success("删除成功");
          _this.querySpaceList();
        });
      }).catch(() => {
      });
    },
    createIndex() {
      _this.$refs['indexAdd'].showAddIndexDialog(_this.space);
    },
    removeIndex(item) {
      console.log(item);
      _this.$confirm('此操作将永久删除记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request({
          url: `/nebula_operate/dropindex/${_this.space}`,
          method: 'post',
          data: {
            name: item.Name,
            type: _this.activeIndexType
          }
        }).then(res => {
          _this.$message.success("删除成功");
          _this.querySpaceList();
        });
      }).catch(() => {
      });
    }
  }
}
</script>

<style lang="scss">
.tab-box {
  margin-top: 20px;
}

.el-tabs--left .el-tabs__header.is-left {
  margin-right: 25px;
}

.el-tabs__content {
  margin: 0 auto;
}
</style>
