<template>
  <div>
    <div class="menu-title">
      离散知识补充
    </div>
    <div class="menu-content">
      <div>
        <span>图谱选择：</span>
        <el-select v-model="activeSpace" placeholder="请选择要进行补充的图谱" @change="changeSpace">
          <el-option
              v-for="(item, index) in spaceList"
              :key="item.name"
              :label="item.name"
              :value="index">
          </el-option>
        </el-select>
        <el-upload
            style="display: inline-block;margin-left: 20px"
            class="upload-demo"
            :auto-upload="false"
            :show-file-list="false"
            action="#"
            multiple
            :limit="3"
            :on-change="handleFileChange"
            :file-list="fileList">
          <el-button type="primary" title='上传离散知识文件'>上传数据</el-button>
        </el-upload>
        <el-button type="primary" style="margin-left: 20px" @click="showResult" :disabled="!uploadSuccess">执行补充</el-button>
      </div>
      <el-row :gutter="20" style="margin-top: 20px">
        <el-col :span="10">
          <el-descriptions class="margin-top" title="补充结果" :column="1" border>
            <el-descriptions-item label="补充时间">{{ resultCmd.time }}</el-descriptions-item>
            <el-descriptions-item label="目标图谱">{{ resultCmd.space }}</el-descriptions-item>
            <el-descriptions-item label="文件名">{{ resultCmd.fileName }}</el-descriptions-item>
            <el-descriptions-item label="包含知识数量">{{ resultCmd.allCounts }}</el-descriptions-item>
            <el-descriptions-item label="成功知识占比">{{ resultCmd.cgzb }}</el-descriptions-item>
            <el-descriptions-item label="补充成功率">{{ resultCmd.cgl }}</el-descriptions-item>
            <el-descriptions-item label="重叠知识占比">{{ resultCmd.cdzb }}</el-descriptions-item>
            <el-descriptions-item label="重叠识别准确率">{{ resultCmd.cdl }}</el-descriptions-item>
            <el-descriptions-item label="冲突知识占比">{{ resultCmd.ctzb }}</el-descriptions-item>
            <el-descriptions-item label="冲突识别准确率">{{ resultCmd.ctl }}</el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="14">
          <el-descriptions class="margin-top" title="详细结果" :column="1" border>
          </el-descriptions>
          <el-table :data="resultList" style="width: 100%" height="500">
            <el-table-column prop="zyz" :label="tableTitle[0]"></el-table-column>
            <el-table-column prop="wyz" :label="tableTitle[1]"></el-table-column>
            <el-table-column prop="byz" :label="tableTitle[2]"></el-table-column>
            <el-table-column prop="bq" label="标签" width="100">
              <template slot-scope="scope">
                <label :style="{color:scope.row.bq=='成功'?'#67c23a':scope.row.bq=='冲突'?'#f56c6c':'#e6a23c'}">{{scope.row.bq}}</label>
              </template>
            </el-table-column>
            <el-table-column prop="bq" label="状态" width="100">
              <template slot-scope="scope">
                <label :style="{color:scope.row.bq=='成功'?'#67c23a':scope.row.bq=='冲突'?'#f56c6c':'#e6a23c'}">{{scope.row.bq}}</label>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <!--
        <div class="menu-content-tab">
          <div>
            <div>手动添加</div>
          </div>
          <div>
            <div>
              <span>主语类型：</span>
              <el-select v-model="activeTag" placeholder="请选择主语类型">
                <el-option
                    v-for="item in tagList"
                    :key="item.name"
                    :label="item.name"
                    :value="item.name">
                </el-option>
              </el-select>
            </div>
            <div>
              <span>主语取值：</span>
              <el-input v-model="tagValue" placeholder="请输入主语取值"></el-input>
            </div>
            <div>
              <span>谓语类型：</span>
              <el-radio v-model="edgeType" label="1" @change="radioChange">关系属性</el-radio>
              <el-radio v-model="edgeType" label="2" @change="radioChange">数值属性</el-radio>
            </div>
            <div v-show="edgeType === '1'">
              <span>谓语取值：</span>
              <el-select v-model="activeEdge" placeholder="请选择谓语取值">
                <el-option
                    v-for="item in edgeList"
                    :key="item.name"
                    :label="item.name"
                    :value="item.name">
                </el-option>
              </el-select>
            </div>
            <div v-show="edgeType === '2'">
              <span>谓语取值：</span>
              <el-select v-model="activeEdge" placeholder="请选择谓语取值">
                <el-option
                    v-for="item in tagField"
                    :key="item.name"
                    :label="item.name"
                    :value="item.name">
                </el-option>
              </el-select>
            </div>
            <div>
              <span>宾语类型：</span>
              <el-select v-model="activeDataType" placeholder="请选择宾语类型">
                <el-option
                    v-for="item in dataTypeList"
                    :key="item.name"
                    :label="item.name"
                    :value="item.name">
                </el-option>
              </el-select>
            </div>
            <div>
              <span>宾语取值：</span>
              <el-input v-model="dataTypeValue" placeholder="请输入宾语取值"></el-input>
            </div>
          </div>
        </div>

        <div class="menu-content2">
          <div style="margin: 0px 0 20px 0">
            <p>
              <span>补充时间：</span>
              <span>{{ resultCmd.time }}</span>
            </p>
            <p>
              <span>目标图谱：</span>
              <span>{{ resultCmd.space }}</span>
            </p>
            <p>
              <span>重叠识别准确率：</span>
              <span>{{ resultCmd.repeatRate }}%</span>
            </p>
            <p>
              <span>冲突识别准确率：</span>
              <span>{{ resultCmd.conflictRate }}%</span>
            </p>
          </div>
          <div>

          </div>
        </div>
        -->
    </div>
  </div>
</template>

<script>
import request from '@/utils/request';
import {formatTime} from '@/utils/common';

var _this;
export default {
  name: "dataRepeatRate",
  data() {
    return {
      spaceList: [],
      activeSpace: '',
      dataTypeList: [],
      activeDataType: '',
      dataTypeValue: '',
      tagList: [],
      activeTag: '',
      tagValue: '',
      edgeType: '1',
      tagField: [],
      edgeList: [],
      activeEdge: '',
      edgeValue: '',
      resultCmd1: {},
      resultCmd: {
        repeatRate: '0',
        conflictRate: '0',
        space: '',
        time: ''
      },
      list: [],
      resultList: [],
      ontologyList: [],
      AtlasSelection: '',
      fileList: [],
      edges: [],
      radio: "1",
      uploadSuccess: false,
      tableTitle:["头实体","关系","尾实体"]
    }
  },
  mounted() {
    _this = this;
    _this.queryData();
  },
  methods: {
    radioChange() {
      _this.activeEdge = '';
    },
    queryData() {
      request({
        url: '/indicator/indicator3_1',
        method: 'get',
        data: {}
      }).then(res => {
        if (res.data.space.length > 0) {
          _this.activeSpace = 0;
        }

        _this.spaceList = res.data.space;
        _this.dataTypeList = res.data.datatype;
        _this.tagList = res.data.tag;
        _this.tagField = res.data.tag_field;
        _this.edgeList = res.data.edge;
      });
    },
    changeSpace(){
        if(_this.spaceList[_this.activeSpace].name.indexOf("实例") != -1){
            _this.tableTitle = ["头实体","关系","尾实体"]
        }else{
            _this.tableTitle = ["概念","属性","概念"]
        }
    },
    handleFileChange(file) {
      _this.fileList = [file];
      let fileName = file.name;
      let activeSpace = _this.spaceList[_this.activeSpace];
      if (activeSpace.id !== fileName) {
        _this.$message.warning("上传文件与" + activeSpace.name + "不符");
        return false;
      }

      _this.uploadFile(file);
    },
    showResult() {
      _this.$message.info("开始执行补充");
      setTimeout(() => {
        _this.resultCmd = _this.resultCmd1;
        _this.resultList = _this.list;
        _this.$message.success("补充成功");
      }, 1233);
    },
    uploadFile(fileItem) {
      _this.uploadSuccess = false;
      _this.$message.info("开始上传");
      let formData = new FormData();
      formData.append("file", fileItem.raw);
      request({
        url: '/indicator/indicator3',
        method: 'put',
        data: formData
      }).then(res => {
        _this.resultCmd1 = res.data;
        _this.resultCmd1.space = _this.spaceList[_this.activeSpace].name;
        _this.resultCmd1.fileName = fileItem.name;
        _this.resultCmd1.time = formatTime(new Date());
        _this.list = res.data.items;
        _this.$message.success("上传成功");
        _this.uploadSuccess = true;
      });
    },
  }
}
</script>

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

.menu-content {
  //overflow: hidden;
  //display: flex;
  //justify-content: space-between;
}

.menu-content2 {
  float: left;
  width: 50%;
}

.menu-content-tab > div:nth-of-type(1) {
  width: 80%;
  display: flex;
  margin-top: 30px;
}

.menu-content-tab > div:nth-of-type(1) > div {
  width: 100%;
  height: 40px;
  border: 1px solid #EBEEF5;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.20833vw 0.20833vw 0 0;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.72917vw;
}

.menu-content-tab > div:nth-of-type(1) > div:nth-of-type(2) {
  background: #409EFF;
  color: white;

}

.menu-content-tab > div:nth-of-type(1) > div:nth-of-type(2) .el-upload {
  width: 100%;
  height: 100%;
}

.menu-content-tab > div:nth-of-type(1) > div:nth-of-type(2) button {
  width: 100%;
  height: 100%;
}

.menu-content-tab > div:nth-of-type(2) {
  width: 80%;
  border: 1px solid #EBEEF5;
  box-sizing: border-box;
  border-top: none;
  padding: 30px;
}

.menu-content-tab > div:nth-of-type(2) > div > .el-select, .menu-content-tab > div:nth-of-type(2) > div > .el-input {
  width: 50%;
}

.menu-content-tab > div:nth-of-type(2) > div {
  margin-top: 30px;
}

.menu-content2 > div:nth-of-type(1) {
  font-size: 0.72917vw;
}

.menu-content2 > div:nth-of-type(1) > p {
  display: flex;
  margin-top: 20px;
}

.menu-content2 > div:nth-of-type(1) > p > span:nth-of-type(1) {
  width: 150px;
}

</style>
