<template>
  <div>
    <div class="menu-title">
      装备维修本体构建
    </div>
    <div class="menu-content">
      <el-row :gutter="20">
        <el-col :span="15">
          <el-descriptions class="margin-top" title="本体信息统计" :column="2" border style="position: relative">
            <template slot="extra">
              <el-select v-model="ontologyId" placeholder="请选择图谱" @change="handleSelectChange"
                         style="position: absolute;left:120px;top:-10px;">
                <el-option
                    v-for="item in ontologyList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                </el-option>
              </el-select>
            </template>
            <el-descriptions-item>
              <template slot="label">本体名称：</template>
              <label>{{ ontology.name }}</label>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">概念数量：</template>
              <label>{{ ontologyCount.conceptc }}</label>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">本体版本：</template>
              <label>1.0</label>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">对象属性数量：</template>
              <label>{{ newNum.relationc }}</label>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">本体描述：</template>
              <label>构建了关于{{ontology.name}}的本体，包括{{ontologyCount.conceptc}}个概念和{{newNum.fieldc+newNum.relationc}}个属性</label>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">值属性数量：</template>
              <label>{{ newNum.fieldc }}</label>
            </el-descriptions-item>
          </el-descriptions>
          <div class="graph-box1">
            <graph ref="graph"></graph>
          </div>
        </el-col>
        <el-col :span="9">
          <el-descriptions class="margin-top desc2" title="本体元素浏览" :column="2" border>
          </el-descriptions>
          <el-tabs type="border-card">
            <el-tab-pane label="概念">
              <div class="tree-box">
                <el-tree :data="treeData" :props="defaultProps"
                         @node-click="handlePopShow"
                         :expand-on-click-node="false">
                </el-tree>
              </div>
            </el-tab-pane>
            <el-tab-pane label="对象属性">
              <el-table :data="edgeData" style="width: 100%" class="right-table">
                <el-table-column type="index" label="行号" width="80"></el-table-column>
                <el-table-column prop="relation" label="属性名"></el-table-column>
                <el-table-column prop="srccount" label="起点概念数量"></el-table-column>
                <el-table-column prop="dstcount" label="终点概念数量"></el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="值属性">
              <el-table :data="valueData" style="width: 100%" class="right-table">
                <el-table-column type="index" label="行号" width="80"></el-table-column>
                <el-table-column prop="comment" label="属性名"></el-table-column>
                <el-table-column prop="count" label="所属概念数量"></el-table-column>
                <el-table-column prop="type" label="值类型"></el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
    </div>
    <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        @close="handlePopHide"
        width="400">
      <el-descriptions class="margin-top" :column="2"  border style="margin-bottom: 15px">
        <el-descriptions-item label="概念名">{{ infoCmd.tagName }}</el-descriptions-item>
        <el-descriptions-item label="概念描述">{{ infoCmd.label }}</el-descriptions-item>
        <el-descriptions-item label="次级概念数量">{{ edgeFieldCount }}</el-descriptions-item>
        <el-descriptions-item label="值属性数量">{{ fieldCount.length }}</el-descriptions-item>
      </el-descriptions>
      <el-table
          :data="fieldCount"
          height="300"
          style="width: 100%">
        <el-table-column prop="field" label="属性名"></el-table-column>
        <el-table-column prop="comment" label="名称"></el-table-column>
        <el-table-column prop="type" label="类型"></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import request from '@/utils/request';
import {listToTree} from '@/utils/common';
import graph from "@/components/graph/Graph";

var _ = require('lodash');
var _this;
export default {
  components: {
    'graph': graph,
  },
  name: "noumenonModelImport",
  data() {
    return {
      dialogVisible: false,
      fileList: [],
      edgeCount: 0,
      vertexCount: 0,
      qo: {
        pageNo: 1,
        pageSize: 10,
        LIKES_name: '',
        EQI_sourceType: 1
      },
      nodes: [],
      edges: [],
      treeData: [], // 概念树形
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      edgeData: [],
      valueData: [],
      nodeInfo: {},
      fieldCount: [],
      edgeFieldCount: 0,
      ontologyList: [],
      ontologyId: '',
      ontology: {},
      ontologyCount: {
        "conceptc": "0",
        "relationc": "0",
        "fieldc": "0"
      },
      infoCmd: {
        tagName: '',
        label: ''
      },
      newNum:{
          "relationc": 0,
          "fieldc": 0,
      }
    }
  },
  mounted() {
    _this = this;
    _this.queryOntology();
  },
  methods: {
    handlePopHide() {
      _this.fieldCount = [];
      _this.edgeFieldCount = 0;
    },
    handlePopShow(row) {
      // console.log(row);
      _this.dialogVisible = true;
      request({
        url: `/ontology-concept/countchildbyid/${row.id}`,
        method: 'get',
        data: {}
      }).then(res => {
        _this.edgeFieldCount = res.data;
      });
      request({
        url: `/nebula_model/findnodebyid/${_this.ontologyId}/${row.ownId}`,
        method: 'get',
        data: {}
      }).then(res => {
        _this.infoCmd.tagName = _.get(res.data, "properties.tagName", '');
        _this.infoCmd.label = _.get(res.data, "properties.label", '');
        // _this.fieldCount = _.get(res.data, "properties.nebulafieldsnapshot", '');
      });
        request({
            url: `/nebula_model/findnebulafieldwithparents/${row.ownId}`,
            method: 'get',
            data: {}
        }).then(res => {
            _this.fieldCount = res.data;
        });
    },
    queryOntology() {
      request({
        url: `/ontology/query_list`,
        method: 'post',
        data: {EQI_sourceType: 1}
      }).then(res => {
        _this.ontologyList = res.data;
        if (_this.ontologyList.length > 0) {
          _this.handleSelectChange(_this.ontologyList[0].id);
        }
      });
    },
    handleSelectChange(ontologyId) {
      _this.ontologyId = ontologyId;
      let index = _this.ontologyList.findIndex(row => {
        return row.id === ontologyId;
      });
      if(index >= 0) {
        _this.ontology = _this.ontologyList[index];
        _this.queryCount();
        _this.queryIndicator2();
        _this.queryVertexTree();
        _this.queryGroupVertexEdgeCount();
        _this.queryData();
      } else {
        _this.$message.warning("数据异常");
      }

    },
    queryCount() {
      request({
        url: '/ontology-concept/countallbyontologyid/' + _this.ontologyId,
        method: 'get',
        data: {}
      }).then(res => {
        _this.ontologyCount = res.data;
      });
    },
    queryGroupVertexEdgeCount() {
      request({
        url: '/nebula_model/groupcountvexbyedgebyontologyid/' + _this.ontologyId,
        method: 'get',
        data: {}
      }).then(res => {
        _this.edgeData = res.data;
        request({
            url: '/indicator/indicator2_kcrelation',
            method: 'get',
            data: {}
        }).then(res => {
            _this.edgeData = _this.edgeData.concat(res.data);
            _this.newNum.relationc = _this.edgeData.length;
        });
      });
    },
    queryIndicator2() {
      request({
        url: '/nebula_model/groupfieldbyontologyid/' + _this.ontologyId,
        method: 'get',
        data: {}
      }).then(res => {
        _this.valueData = res.data;
        request({
            url: '/indicator/indicator2_kcvalues',
            method: 'get',
            data: {}
        }).then(res => {
            _this.valueData = _this.valueData.concat(res.data);
            _this.newNum.fieldc = _this.valueData.length;
        });
      });
      // request({
      //   url: '/indicator/indicator2',
      //   method: 'get',
      //   data: {}
      // }).then(res => {
      //   _this.valueData = res.data;
      // });
    },
    queryVertexTree() {
      request({
        url: '/ontology-concept/query_list/' + _this.ontologyId,
        method: 'post',
        data: {}
      }).then(res => {
        _this.treeData = listToTree(res.data, 'ownId');
      });
      // request({
      //   url: '/nebula_model/findtreebyontologyid/' + _this.ontologyId,
      //   method: 'post',
      //   data: {}
      // }).then(res => {
      //   res.data.nodes.forEach(node => {
      //     node.label = node.properties.label || "-";
      //     node.fieldCount = node.properties.nebulafieldsnapshot ? node.properties.nebulafieldsnapshot.length : 0;
      //   });
      //   _this.treeData = tripletToTree({
      //     nodes: res.data.nodes,
      //     relations: res.data.relations,
      //     idName: 'vid',
      //     sourceName: 'srcId',
      //     targetName: 'dstId'
      //   });
      // });
    },
    queryEdgeCount() { // 概念数量
      request({
        url: '/nebula_model/countedgesbyontologyid/' + _this.ontologyId,
        method: 'get',
        data: {}
      }).then(res => {
        _this.edgeCount = res.data;
      });
    },
    queryVertexCount() { // 值属性数量
      request({
        url: '/nebula_model/countvertexsbyontologyid/' + _this.ontologyId,
        method: 'get',
        data: {}
      }).then(res => {
        _this.vertexCount = res.data;
      });
    },
    queryData(fileItem) {
      request({
        url: '/nebula_model/findrelationbyontologyid/' + _this.ontologyId,
        method: 'post',
        data: {}
      }).then(res => {
        let cmd = {
          nodes: [],
          edges: []
        };
        res.data.nodes.forEach(node => {
          cmd.nodes.push({
            id: node.vid,
            label: node.properties.label
          });

        });
        res.data.relations.forEach(edge => {
          cmd.edges.push({
            source: edge.srcId,
            target: edge.dstId,
            label: edge.properties.label
          });
        });
        _this.$refs['graph'].initGraph(cmd, true, null, true);
      });
    },
  }
}
</script>

<style scoped lang="scss">

.desc2 {
  .el-descriptions__title {
    height: 40px;
    line-height: 40px;
  }
}

.result {
  text-align: center;
  margin-top: 25px;
  font-size: 16px;
  color: #5c5c5c;
}

.tree-box {
  height: 615px;
  overflow-y: auto;
}

.right-table {
  height: 615px;
  overflow-y: auto;
}

.graph-box1 {
  width: 100%;
  height: 500px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  margin-top: 50px;
}
</style>
