<template>
  <div>
    <el-dialog  :title="title"  :visible.sync="dialogVisible" :before-close="closeDialog" append-to-body>
          <div class="opinion" id="opinion">
            <el-form :model="form" label-width="100px" label-position="left">
              <template v-if="form.content">
                <el-form-item label="颜色：">
                  <el-input type="color" size="small" class="changeColor"  v-model="form.color" style="user-select:none;width:100px"> </el-input>
                </el-form-item>
                <el-form-item label="类型：">
                  <el-radio-group v-model.number="form.scratchType" @change="changeRadioType">
                    <el-radio :label="2">波浪线</el-radio>
                    <el-radio :label="0">下划线</el-radio>
                    <el-radio :label="1">高亮</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="当前文献：">
                  <span>{{ form.sortStr }}</span>
                </el-form-item>
                <el-form-item label="选中文本：">
                  <span> {{ form.content }}</span>
                </el-form-item>
              </template>
              <el-form-item v-if="!form.content" label="对比文献：">
                <el-select v-model="form.proofId" placeholder="请选择" style="width:100%">
                <el-option
                  v-for="item in files"
                  :key="item.id"
                  :label="item.sortStr"
                  :value="item.id">
                    <el-tooltip class="item" effect="dark" :content="item.proofName" placement="top">
                      <span>{{ item.sortStr }}</span>
                    </el-tooltip>
                </el-option>
              </el-select>

                  <!-- <span>{{ form.file }}</span> -->
              </el-form-item>
              <el-form-item label="位置/附图号" class="item">
                <el-input v-model="form.position" placeholder="请输入备注" show-word-limit></el-input>
              </el-form-item>
            </el-form>
            <div>
              <p style="margin-bottom:0">相关权要/特征：</p>
              <!-- <div>
                <el-tree 
                  :data="tableData1"
                  :props="{children:'features',label:'content'}"
                  :show-checkbox="true" 
                  :check-on-click-node="false"
                  :check-strictly="true" 
                  node-key="id" 
                  @check="treeCheck"
                  ref="treeForm">
                    <span slot-scope="{ node, data }">
                      <span>{{ data.features?data.RightName:data.content }}</span><span v-if="data.evidence">————{{ data.evidence }}</span>
                    </span>
                  </el-tree>
              </div> -->
              <el-collapse v-model="witchRight" accordion  @change="handleChange" style="height: 300px;overflow:auto;">
                <el-collapse-item v-for="item in tableData1" :key="item.sort" :name="item.sort">
                  <template slot="title">
                    <div style="width:100%;display:flex;justify-content: space-between;">
                     <p>{{ item.rightName }} </p> <p class="addFeature" @click.stop="addFeature(item)"> <el-link style="color: blue;">+ 添加</el-link> </p>
                    </div>
                    
                  </template>
                  <div>
                    <el-divider></el-divider>
                    <div v-for="feature in tableData1.featureList" :key="feature.featureId" style="padding:10px">
                      <!-- <el-divider></el-divider> -->
                      <el-tooltip :content="feature.content" placement="top">
                        <el-radio-group v-model="form.featureId" @change="changeRadio(feature)">
                          <el-radio :label="feature.featureId">{{feature.featureName}}</el-radio>
                        </el-radio-group>
                      </el-tooltip>
                      <!-- <p>{{feature.content}}</p> -->
                      </div>
                  </div>
                  
                </el-collapse-item>
              </el-collapse>
            </div>
            <div v-if="dialogVisible">
              <p style="margin-bottom:0">无效请求书理由：</p>
              <span>
                <!-- <div style="width:100%;outline: #dcdfe6;border:1px solid #DCDFE6;border-radius:5px;min-height:50px;" id="preview" 
                  contenteditable="true" v-html="form.proofStr"
                  @blur="saveValue(form,'proofStr',$event.target.innerHTML)" v-on:paste="handlePaste($event, form, 'proofStr')">
                </div> -->
                <myRich-Text v-model="form.proofStr" placeholder="请输入无效请求书理由"></myRich-Text>
                <!-- <div style="width:100%;outline: #dcdfe6;border:1px solid #DCDFE6;border-radius:5px;background:white" id="preview" contenteditable="true" 
                    v-html="form.content2"  @input="saveValue($event.target.innerHTML)"  @click="saveValue($event.target.innerHTML)"> 
                </div> -->
              </span>
            </div>
            <div  v-if="dialogVisible">
              <p style="margin-bottom:0">陈述意见：</p>
              <span>
                <!-- <div style="width:100%;outline: #dcdfe6;border:1px solid #DCDFE6;border-radius:5px;min-height:50px;" id="preview"
                  contenteditable="true" v-html="form.argumentStr" 
                  @blur="saveValue(form,'argumentStr',$event.target.innerHTML)" v-on:paste="handlePaste($event, form, 'argumentStr')">
                </div> -->
                <myRich-Text v-model="form.argumentStr" placeholder="请输入陈述意见"></myRich-Text>
                <!-- <div style="width:100%;outline: #dcdfe6;border:1px solid #DCDFE6;border-radius:5px;min-height:50px;background:white" id="preview" contenteditable="true" 
                    v-html="form.content1"  @input="saveValue($event.target.innerHTML)"  @click="saveValue($event.target.innerHTML)"> 
                </div> -->
              </span>
            </div>
          </div>
          <div slot="footer" class="dialog-footer">
              <el-button @click="closeDialog">取 消</el-button>
              <el-button v-if="form.id" @click="deleteFeature" type="danger">删 除</el-button>
              <el-button type="primary" @click="AddOpinion">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="添加特征" style="user-select:none;" :visible.sync="featureVisible" :before-close="closeFeature" append-to-body>
          <div>
            <el-form :model="featureForm" label-width="100px" label-position="left">
              <el-form-item v-if="featureForm.rightSort || featureForm.rightName" label="所属权要：">
                <span v-if="featureForm.rightSort">权要{{ Number(featureForm.rightSort)+1  }}</span>
                <span v-else>{{ featureForm.rightName }}</span>
              </el-form-item>
              <el-form-item v-else label="所属权要：">
                <span>{{ featureForm.scratchField }}</span>
              </el-form-item>
              <el-form-item label="特征内容：">
                <span>{{ featureForm.content }}</span>
                <!-- <el-input v-else type="textarea" v-model="featureForm.content"></el-input> -->
              </el-form-item>
              <el-form-item label="对比文献：" v-if="show">
                <el-select v-model="featureForm.proofId" placeholder="请选择" style="width:100%">
                <el-option
                  v-for="item in files"
                  :key="item.id"
                  :label="item.sortStr"
                  :value="item.id">
                    <el-tooltip class="item" effect="dark" :content="item.proofName" placement="top">
                      <span>{{ item.sortStr }}</span>
                    </el-tooltip>
                </el-option>
              </el-select>
              </el-form-item>
            </el-form>
            <div v-if="featureVisible && show" style="user-select:none;">
              <p style="margin-bottom:0">无效请求书理由：</p>
              <span>
                <!-- <div style="width:100%;outline: #dcdfe6;border:1px solid #DCDFE6;border-radius:5px;min-height:50px;" id="preview" 
                  contenteditable="true" v-html="form.proofStr" @input="saveValue($event.target.innerHTML)"
                  @click="saveValue($event.target.innerHTML)">
                </div> -->
                <myRich-Text v-model="form.proofStr" placeholder="请输入无效请求书理由"></myRich-Text>
                <!-- <div style="width:100%;outline: #dcdfe6;border:1px solid #DCDFE6;border-radius:5px;min-height:50px;background:white;user-select:none;" id="preview" contenteditable="true" 
                    v-html="featureForm.content2"  @input="saveValue($event.target.innerHTML)"  @click="saveValue($event.target.innerHTML)"> 
                </div> -->
              </span>
            </div>
            <div  v-if="featureVisible && show" style="user-select:none;">
              <p style="margin-bottom:0">陈述意见：</p>
              <span>
                <!-- <div style="width:100%;outline: #dcdfe6;border:1px solid #DCDFE6;border-radius:5px;min-height:50px;" id="preview"
                  contenteditable="true" v-html="form.argumentStr" @input="saveValue($event.target.innerHTML)"
                  @click="saveValue($event.target.innerHTML)">
                </div> -->
                <myRich-Text v-model="form.argumentStr" placeholder="请输入陈述意见"></myRich-Text>
              </span>
            </div>
          </div>
          <div slot="footer" class="dialog-footer">
              <el-button @click="closeFeature">取 消</el-button>
              <el-button type="primary" @click="submitFeature">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="添加特征" :visible.sync="addFeatureVisible" width="800px" :before-close="closeFeature2" append-to-body>
        <div>
          <rightContent :reportId="form.reportId" ref="rightContent"></rightContent>
        </div>
      </el-dialog>
  </div>
</template>
<script>
import { explain1 } from "@/views/report/components/mixins";
export default {
  name:'addOpinion',
  components: {
    rightContent: () => import('./addFeatures/rightContent.vue')
  },

  mixins:[explain1],
  data() {
    return {
      addFeatureVisible:false,
      rightContent:false,
      form: {},
      featureForm: {},
      tableData1: [],
      dialogVisible: false,
      featureVisible: false,
      witchRight: null,
      show: false,
      files: [],//所有的文献
      reportId: '',
      title:'',
    }
  },
  mounted() {

  },
  methods: {
    // 删除陈述意见
    deleteFeature() {
      this.$confirm('此操作将删除该陈述意见, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let ids = [this.form.argumentId]
        this.$api.deleteArguments(ids).then(response => {
          if (response.code == 200) {
            this.queryScratchs()
            this.closeDialog()
            this.$message.success('删除陈述意见成功')
          }
        })
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    },
    closeDialog() {
      this.form = {}
      this.dialogVisible = false
    },
    // 添加陈述意见确认按钮
    AddOpinion() {
      // console.log(this.form);
      if (!this.form.featureId) {
        this.$message.error('请选择特征')
        return false
      }
      this.form.scratchId = this.form.id
      this.form.rightSort = this.form.rightId
      // if (!this.form.id) {
        this.$api.addArguments(this.form).then((res) => {
          if (res.code == 200) {
            this.$message.success('添加或修改陈述意见成功')
            this.queryScratchs()
            this.closeDialog()
          }
        })
      // } else {
      //   this.$api.updateArguments(this.form).then((res) => {
      //     if (res.code == 200) {
      //       this.$message.success('修改陈述意见成功')
      //       this.queryScratchs()
      //       this.closeDialog()
      //     }
      //   })
      // }
    },
    // 查询划词陈述意见
    queryScratchs() {
      this.$api.queryScratchs({proofId:this.form.proofId}).then((res) => {
        if (res.code == 200) {
          this.$store.commit('SET_PATENT_OPINION_CONTRAST', res.data)
        }
      })
    },
    // 特征选择
    changeRadio(feature) {
      this.getFeatureZheng(feature)
    },
    treeCheck(node, list) {
      if (list.checkedKeys.length == 2) {
        this.$refs.treeForm.setCheckedKeys([node.id]);
      }
    },
    // 打开
    async open(form, data,show) {
      if (form.scratchType) {
        form.scratchType=Number(form.scratchType)
      }
      // if(form.proofId == -1){
      //   form.proofId = null
      // }
      this.form = JSON.parse(JSON.stringify(form))
      if(this.form.rightSort == 0 || this.form.rightSort){
        this.form.rightId = this.form.rightSort
      }
      if(this.form.proofId == -1){
        this.form.proofId = null
      }
      if (!data) {
        await this.getQueryProofList(this.form)
        await this.getFeatureRights(form.signPatentNo)
        if (this.form.id) {
          this.witchRight = this.form.rightId
          await this.getFeature()
          this.getFeatureZheng(form)
          this.title='编辑陈述意见'
        } else {
          this.title='添加陈述意见'
        }
        this.$nextTick(()=>{
          this.dialogVisible = true
        })
        
      } else {
        this.featureForm=this.form
        this.featureVisible = true
        this.show = show
        if(this.show){
          this.getQueryProofList(form) 
        }
      }
    },
    //查询证据文献列表
    async getQueryProofList(form) {
      let params = {
        reportId:form.reportId,
        signPatentNo:form.signPatentNo,
        size: 99,
        current: 1,
      }
      await this.$api.queryProof(params).then((res) => {
        if (res.code == 200) {
          this.files = res.data
          let a =this.files.find(item => {
           return item.id==this.form.proofId
          })
          this.form.sortStr = a.sortStr
          // this.featureForm.rightSort =a.sortStr
        }
      }).catch((error) => {
        
      })
    },


    addFeature(val) {
      // console.log(val);
      // this.featureForm.rightName = val.rightName
      // this.featureForm.rightId = val.sort
      // this.featureForm.reportId = this.form.reportId
      // this.featureVisible = true
      this.addFeatureVisible=true
      this.$nextTick(()=>{
        this.$refs.rightContent.open(val)
      })
    },
    closeFeature() {
      this.featureVisible = false
      this.show = false
      this.featureForm = {}
    },
    closeFeature2(){
      this.addFeatureVisible=false
      this.getFeature()

    },
    submitFeature() {
      if (!this.show) {
        // 第二种方式弹窗中添加特征
        this.$api.addSingleFeature(this.featureForm).then((res) => {
          if (res.code== 200) {
            // this.getFeature()
            this.closeFeature()
            this.$emit('submit',true)
          }
        })
      } else {
        var params = {
          reportId:this.featureForm.reportId,
          rightId:this.featureForm.rightId,
          proofId:this.featureForm.proofId,
          proofStr:this.featureForm.proofStr,
          argumentStr:this.featureForm.argumentStr,
          featureContent:this.featureForm.content,
          // position:this.featureContent.rightPosition

        }
      this.$api.addArguments(params).then(response=>{
        if(response.code == 200){
          this.$message.success('添加成功')
          this.closeFeature()
        }
      })
      }
    },
    // 请求权要特征
    async getFeatureRights(val) {
      // this.loading=true
      // let PatentRight = {
      //     patentNo: val,
      //     splitType: "1",
      //     splitBy: "2",
      //     ReportId: id
      //     }
      let params = { patentNo: val}
      await this.$api.getFeatureRights(params).then((res) => {
        if (res.code == 200) {
          this.tableData1 = res.data
        }
      })
      // this.$api.splitPatentRight(PatentRight).then(res => {
      //     if (res.code == 200) {
      //     res.data.patentRightVos.forEach(item=>{
      //         item.id = item.RightName
      //         item.features[0].evidence = '证据'
      //     })
      //     this.tableData1 = res.data.patentRightVos;

      //     }
      // })
    },
    // 折叠面板
    handleChange(val) {
      if(!(val+'')){
        return false
      }
      this.form.rightId=val
      this.getFeature()
    },
    // 查询已添加的特征
    async getFeature() {
      if(this.witchRight == null || this.witchRight+'' == ''){
        return false
      }
      let params = {
        reportId: this.form.reportId,
        rightSort:this.witchRight
      }
      await this.$api.getFeatureList(params).then((res) => {
        if (res.code == 200) {
          this.$set(this.tableData1,'featureList',res.data)
        }
      })
    },
    // 根据特征查询证据
    getFeatureZheng(val) {
      let params = {
        proofId: this.form.proofId,
        featureId:val.featureId,
      }
      this.$api.queryProofStr(params).then((res) => {
        if (res.code == 200) {
          if (res.data.proofStrId) {
            this.$set(this.form,'proofStr',res.data.proofStr)
            this.$set(this.form,'proofStrId',res.data.proofStrId)
            if(res.data.arguments && res.data.arguments.length>0){
              this.$set(this.form,'argumentStr',res.data.arguments[0].argumentStr)
              this.$set(this.form,'argumentId',res.data.arguments[0].id)
            }
            
            // this.form.proofStr = res.data.proofStr
          }else{
            this.$set(this.form,'proofStr','')
            this.$set(this.form,'proofStrId','')
              this.$set(this.form,'argumentStr','')
              this.$set(this.form,'argumentId','')
          }
        }
      })
    },
    //划词类型
    changeRadioType() {
      
    },
  },
}
</script>
<style lang="scss">
.el-divider--horizontal{
  margin:5px 0 !important;
}
  
</style>
<style lang="scss" scoped>
 .avatar-uploader-icon {
    background-color: #fbfdff;
    border: 1px dashed #c0ccda;
    font-size: 28px;
    color: #8c939d;
    width: 148px;
    height: 148px;
    line-height: 148px;
    text-align: center;
  }
 .avatar {
  
  position: relative;
    width: 148px;
    height: 148px;
    display: block;
  }
  .avatar:hover .deleteImg {
    display: block;
}
.deleteImg {
  display: none;
  font-size: 30px;
  width: 148px;
  height: 148px;
  background-color:black;
	opacity: 0.6; 
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  z-index: 999;
}
.deleteImg span i{
  margin-left: 10px;
  color: #fff;
}
.deleteImg span{
  display: flex;
  align-items:center;/*垂直居中*/
  justify-content: center;/*水平居中*/
  width:100%;
  height:100%;
}

.addFeature{
  margin-right:30px;
  
}

</style>