<template>
  <div  @mouseup="mouseup1" @mousemove="mousemove">
    <div v-if="rightDetails" v-html="getDOMContent(rightDetails.content)" id="rightContent" data-type="权要"></div>
    <addOpinion ref="addOpinion" @submit="submitFeature"></addOpinion>
  </div>
</template>

<script>
import {patentKeywordsHighlight} from '@/views/workspace/folder/components/mixins'
import {addContrast} from '@/views/workspace/folder/articles/components/mixins'
import addOpinion from '@/views/report/InvalidResponse/components/addOpinion.vue'
export default {
  components: {
    addOpinion
  },
  props: ['right','reportId'],
  mixins:[patentKeywordsHighlight,addContrast],
  data() {
    return {
        rightDetails:this.right||null,
        featureList:[],
        rightContent:''
    };
  },
  watch: {
    right(val){
        this.rightDetails = val
        this.getFeature()
    }
  },
  computed: {
    showFeatures(){
        return this.featureList
    }
  },
  created() {},
  mounted() {
    if(this.rightDetails){
        this.getFeature()
    }
    window.deleteFeature = this.deleteFeature
  },
  methods: {
    deleteFeature(id,selectType){
        this.$confirm('是否删除该特征?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            var Id = id.substring(1,id.length)
            this.$api.deleteSingleFeature({featureId:Id}).then(response=>{
                if(response.code == 200){
                    this.$message.success('删除成功')
                    this.getFeature()
                }
            })
        }).catch(() => {         
        });
    },
    open(right){
        this.rightDetails = right
        this.getFeature()
    },
    getFeature() {
      let params = {
        reportId: this.reportId,
        rightSort:this.rightDetails.sort
      }
      this.$api.getFeatureList(params).then((res) => {
        if (res.code==200) {
          this.featureList=res.data
        }
      })
    },
    getDOMContent(text){
        this.showFeatures.forEach(item=>{
            var a = {
                color: item.color || 'yellow',
                Type: 1,//1是默认高亮
                Id: item.featureId,
                column:'',
                index: Number(item.position),
                text:item.content,
                temNode: text,
                selectType:'r',
              }
              text = this.AddClass1(a);
        })
        this.rightContent = text
        return text
    },
    mouseup1(){
        let selectObj = document.getSelection();
        if(selectObj.toString().length==0){
            return false
        }
        var node = document.getElementById('rightContent')
        if(selectObj.focusOffset - selectObj.anchorOffset != selectObj.toString().length){
            this.$message.error('特征不能存在交叉部分')
            return false
        }
        this.getColumn(node, selectObj);
        var form = {
            content: selectObj.toString(),
            reportId: this.reportId,
            position: this.anchorOffset,
            rightId:this.rightDetails.sort,
            rightSort:this.rightDetails.sort + '',
      }
      this.$refs.addOpinion.open(form,true)
    },
    submitFeature(){
        this.getFeature()
    },
  },
};
</script>
<style lang="scss" scoped>
#rightContent{
    font-size:18px;
}
</style>