<template>
  <div>
    <div class="menu-title">
      事理图谱构建
    </div>
    <div class="menu-content">
      <el-row :gutter="20">
        <el-col :span="10">
          <el-table :data="fileList" style="width: 100%" class="right-table">
            <el-table-column prop="name" label="文件名"></el-table-column>
            <el-table-column prop="size" label="文件大小"></el-table-column>
            <el-table-column prop="time" label="上传时间" width="150"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" style="float: left;margin-right: 5px" @click="clearData">清空数据</el-button>
                <el-upload
                    style="float: left"
                    class="upload-demo"
                    action="#"
                    multiple
                    :auto-upload="false"
                    :limit="3"
                    :show-file-list="false"
                    :on-change="handleFileChange"
                    :file-list="fileList">
                  <el-button type="text">上传数据</el-button>
                </el-upload>
              </template>
            </el-table-column>
          </el-table>
          <div class="pie-box">
            <el-row :gutter="5">
              <el-col :span="12">
                <div id="pie1" class="pie-item"></div>
              </el-col>
              <el-col :span="12">
                <div id="pie2" class="pie-item"></div>
              </el-col>
            </el-row>
          </div>
          <el-table :data="resultList" style="width: 100%">
            <el-table-column prop="trigger" label="事件触发词识别"></el-table-column>
            <el-table-column prop="event_type" label="事件分类"></el-table-column>
            <el-table-column prop="relation" label="事件元素角色识别"></el-table-column>
            <!--            <el-table-column label="操作">-->
            <!--              <template slot-scope="scope">-->
            <!--                <el-button type="text" style="float: left;margin-right: 5px">抽取</el-button>-->
            <!--              </template>-->
            <!--            </el-table-column>-->
          </el-table>
        </el-col>
        <el-col :span="14" class="graph-pa">
          <div class="graph-box">
            <graph ref="graph"></graph>
          </div>
          <el-card class="box-card-2" v-show="nodeInfoVisible">
            <div slot="header" class="clearfix">
              <span>事理图谱节点属性</span>
              <el-button style="float: right; padding: 3px 0" type="text" @click="nodeInfoVisible = false">关闭</el-button>
            </div>
            <el-descriptions class="margin-top" :column="2" border style="margin-bottom: 15px">
              <el-descriptions-item>
                <template slot="label">事件类型</template>
                {{ nodeInfo._label }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">触发词</template>
                {{ nodeInfo.label }}
              </el-descriptions-item>
            </el-descriptions>
            <el-table :data="nodeInfo.arguments" border style="width: 100%">
              <el-table-column prop="text" label="事件论元" ></el-table-column>
              <el-table-column prop="role" label="论元角色" ></el-table-column>
            </el-table>
          </el-card>
        </el-col>
      </el-row>

    </div>

  </div>
</template>

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

var _this;
export default {
  components: {
    'graph': graph,
  },
  name: "reasonGraph",
  data() {
    return {
      originText: '',
      fileList: [
        {
          name: '暂无文件',
          size: '0',
          time: '-'
        }
      ],
      resultList: [
        // {
        //   trigger: '',
        //   event_type: '',
        //   relation: ''
        // }
      ],
      nodeArguments: {},
      nodes: [],
      edges: [],
      nodeInfo: {
        arguments: [],
        label: '',
        _label: ''
      },
      nodeInfoVisible: false
    }
  },
  mounted() {
    _this = this;
    _this.queryData();
  },
  methods: {
    initRchart1(data) {
      let _data = [];
      data.forEach(item => {
        _data.push({
          name: item.name,
          value: item.count
        });
      });
      var chart = this.$echarts.init(document.getElementById("pie1"));
      var option = {
        title: {
          text: '事件类型',
          left: 'center',
          top: 30
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '事件类型',
            type: 'pie',
            radius: '60%',
            data: _data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      chart.setOption(option);
    },
    initRchart2(data) {
      let _data = [];
      data.forEach(item => {
        _data.push({
          name: item.name,
          value: item.count
        });
      });
      var chart = this.$echarts.init(document.getElementById("pie2"));
      var option = {
        title: {
          text: '事理关系',
          left: 'center',
          top: 30
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '事理关系',
            type: 'pie',
            radius: '60%',
            data: _data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      chart.setOption(option);
    },
    handleFileChange(file) {
        if(file.name != 'event_graph.json'){
            _this.$message.warning("上传文件不正确");
            return false;
        }
      _this.fileList = [file];
      _this.uploadFile(file);
    },
    uploadFile(file) {
      console.log(file);
      let formData = new FormData();
      formData.append("file", file.raw);
      request({
        url: '/indicator/indicator6',
        method: 'put',
        data: formData
      }).then(res => {
        _this.fileList = [
          {
            name: file.name,
            size: file.size + "kb",
            time: formatTime(new Date())
          }
        ];
        _this.initRchart1(res.data.listmap1);
        _this.initRchart2(res.data.listmap2);
        let _map3 = res.data.map3;
        _this.resultList = [
          {
            trigger: _map3.sjcfclb,
            event_type: _map3.sjfl,
            relation: _map3.sjyslb
          }
        ];
        _this.nodes = res.data.nodes;
        _this.edges = res.data.relations;
        _this.initGraphData();
      });
    },
    queryData(){
        request({
            url: '/indicator/indicator6_1',
            method: 'get',
            data: {}
        }).then(res => {
            _this.initRchart1(res.data.listmap1);
            _this.initRchart2(res.data.listmap2);
            let _map3 = res.data.map3;
            _this.resultList = [
                {
                    trigger: _map3.sjcfclb,
                    event_type: _map3.sjfl,
                    relation: _map3.sjyslb
                }
            ];
            _this.nodes = res.data.nodes;
            _this.edges = res.data.relations;
            _this.initGraphData();
        });
    },
    clearData() {
      _this.fileList = [
        {
          name: '暂无文件',
          size: '0',
          time: '-'
        }
      ];
      _this.initRchart1([]);
      _this.initRchart2([]);
      _this.resultList = [];
      _this.nodes = [];
      _this.edges = [];
      _this.initGraphData();
    },
    clickNode(node) {
      let _arguments = _this.nodeArguments[node.id];
      _this.nodeInfo = {
        arguments: _arguments,
        label: node.label,
        _label: node._label
      };
      _this.nodeInfoVisible = true;
    },
    initGraphData() {
      let cmd = {
        nodes: [],
        edges: []
      };
      let nodeArguments = {};
      _this.nodes.forEach(node => {
        cmd.nodes.push({
          id: node.vid,
          label: node.properties.name,
          _label: node.labels
        });
        nodeArguments[node.vid] = node.properties.arguments;
      });
      _this.nodeArguments = nodeArguments;
      _this.edges.forEach(edge => {
        cmd.edges.push({
          source: edge.dstId,
          target: edge.srcId,
          label: edge.edgeName
        });
      });
      _this.$refs['graph'].initGraph(cmd, true, _this.clickNode ,true);
    }
  }
}
</script>

<style scoped lang="scss">
.result {
  text-align: center;
  margin-top: 25px;
  font-size: 16px;
  color: #5c5c5c;
}

.pie-box {
  height: 490px;

  .pie-item {
    height: 480px;
    width: 100%;
  }
}

.graph-box {
  width: 100%;
  height: 700px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  position: relative;
}

.graph-pa {
  position: relative;
  .box-card-2 {
    position: absolute;
    right: 10px;

    top: 15%;
    bottom: 15%;
    overflow-y: auto;
    width: 40%;
  }
}


</style>
