<template>
  <div class="height_100">
    <el-table
      ref="table"
      :data="recordData"
      border
      :height="tableHeight2"
      style="min-width: 100%; overflow: auto"
    >
      <el-table-column
        prop="patentNo"
        label="对比文件"
        align="center"
        width="300px"
      >
        <template slot-scope="scope">
          <span>
            <el-link type="primary" @click="editContrast(scope.row.patentNo)"
              >{{ scope.row.patentNo }}(D{{ scope.$index + 1 }})</el-link
            >
          </span>
          <el-tag
            style="font-size: 12px; border-radius: 50%"
            v-if="scope.row.remark"
            >{{ scope.row.remark }}</el-tag
          >
          <el-popover
            placement="bottom"
            width="200"
            trigger="click"
            v-if="$reportPermission(reportId, [0, 1])"
          >
            <p>
              将本文件（<span style="color: red">{{ scope.row.patentNo }}</span
              >）作为：
            </p>
            <el-tree
              ref="tree"
              :data="tableHeader"
              :props="{ label: 'patentNo' }"
              @node-drop="handleDrop"
              :allow-drop="allowDrop"
              draggable
              @check-change="handleCheckChange"
            >
              <span class="custom-tree-node" slot-scope="{ node, data }"
                ><el-radio
                  v-model="val"
                  @input="changeRadio(scope.row, data)"
                  :label="node.label"
                  >D{{
                    tableHeader.findIndex(
                      (item) => item.patentNo == data.patentNo
                    ) + 1
                  }}</el-radio
                ></span
              >
            </el-tree>
            <p style="color: red">备注：选择其中一个文件与其交换位置</p>
            <i
              class="el-icon-arrow-down el-icon--right"
              @click="getVal(scope.row)"
              slot="reference"
            ></i>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        prop="content"
        label="对比记录"
        align="center"
        min-width="300px"
      >
        <template slot-scope="scope">
          <div v-for="item in scope.row.recordList" :key="JSON.stringify(item)">
            <p>
              {{ item.content
              }}<el-image
                ref="image"
                :preview-src-list="imgList"
                v-if="item.filePath"
                :src="item.filePath"
                style="vertical-align: middle; width: 100px"
                @click="showImage(item.filePath)"
              ></el-image
              ><span>【{{ item.fields }}】</span>
            </p>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="features"
        label="对应特征"
        align="center"
        min-width="300px"
      >
        <template slot-scope="scope">
          <div
            v-for="item in scope.row.featuresList.sort((a, b) => {
              return (
                a.rightName.slice(2, a.rightName.length) -
                b.rightName.slice(2, b.rightName.length)
              );
            })"
            :key="JSON.stringify(item)"
          >
            <p>
              <span>
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="item.content"
                  placement="top-start"
                >
                  <span>特征{{ item.featuresOrder }}</span>
                </el-tooltip>
              </span>
              <span>
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="item.rightContent"
                  placement="top-start"
                >
                  <span>[{{ item.rightName }}]</span>
                </el-tooltip>
              </span>
            </p>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import mixins from './mixins'
export default {
  mixins:[mixins],
  components: {},
  props: {},
  data() {
    return {};
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {},
  methods: {},
};
</script>
<style lang="scss" scoped>
</style>