<template>
  <div>
        <div class="message">
            <div class="title">
                专利信息
                <span>
                    <i v-if="!show.showPatentMessage" class="el-icon-caret-right" @click="show.showPatentMessage = !show.showPatentMessage"></i>
                    <i v-else class="el-icon-caret-bottom" @click="show.showPatentMessage = !show.showPatentMessage"></i>
                </span>
            </div>
            <div v-show="show.showPatentMessage">
                <el-card shadow="always">
                    <el-form style="width:100%" :model="patentMessage" label-width="140px">
                        <el-row>
                            <el-col :span="12">
                                <template>
                                    <div>
                                        <el-form-item label="被无效的专利：">
                                            <div class="box1">
                                                <el-link type="primary" @click="$commonJS.checkPatentDetails(reportMessage.signPatentNo,projectId)">
                                                    <span v-html="reportMessage.signPatentNo"></span>
                                                </el-link>
                                            </div>
                                        </el-form-item>
                                    </div>
                                </template>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="专利名称：">
                                    <div class="box1" v-html="getView(patentMessage, 'title')"></div>
                                    <el-link v-if="haveTranslatedText(patentMessage, 'title')" type="primary" @click.native="handleChange(patentMessage, 'title')"
                                        style="margin-left: 10px;margin-top: -3px;">
                                        <span v-if="!patentMessage.change">切换译文</span>
                                        <span v-else>切换原文</span>
                                    </el-link>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <template>
                                    <div>
                                        <el-form-item label="专利权人：">
                                            <div class="box1">
                                                <div class="box1" v-html="$commonJS.getColumnData(patentMessage, { type: 'Array', value: 'rightHolder' })"></div>
                                            </div>
                                        </el-form-item>
                                    </div>
                                </template>
                            </el-col>
                            <el-col :span="12" v-if="patentMessage.simpleStatus">
                                <el-form-item label="法律状态：">
                                    <div class="box1" v-html="simpleStatus[patentMessage.simpleStatus]"></div>
                                    
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <template>
                                    <div>
                                        <el-form-item label="专利附图：" v-if="patentMessage.pictureGuid">
                                            <div style="height: 120px;" class="picture">
                                                <el-image fit="contain" :src="$commonJS.checkViewer(patentMessage.pictureGuid)" :preview-src-list="[$commonJS.checkViewer(patentMessage.pictureGuid)]" style="height:120px">
                                                    <div slot="error" class="image-slot">
                                                        <img src="https://www.patentstar.com.cn/img/Common/nopic.jpg" alt="" >
                                                    </div>
                                                </el-image>
                                            </div>
                                        </el-form-item>
                                    </div>
                                </template>
                            </el-col>
                            <el-col :span="24" v-if="patentMessage.abstractStr">
                                <el-form-item label="摘要：">
                                    <div class="box1" v-html="getView(patentMessage, 'abstractStr','摘要'+(patentMessage.change2?'译文':'原文'))"></div>
                                    <span v-if="haveTranslatedText(patentMessage, 'abstractStr')">
                                        <el-link type="primary" @click.native="handleChange(patentMessage, 'abstractStr')" >
                                        <span v-if="!patentMessage.change2">切换译文</span>
                                        <span v-else>切换原文</span>
                                        </el-link>
                                    </span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        
                    </el-form>
                </el-card>
            </div>
        </div>
        <div class="message">
            <div class="title">
                案件信息
                <span>
                    <i v-if="!show.showCaseMessage" class="el-icon-caret-right" @click="show.showCaseMessage = !show.showCaseMessage"></i>
                    <i v-else class="el-icon-caret-bottom" @click="show.showCaseMessage = !show.showCaseMessage"></i>
                </span>
            </div>
            <div v-show="show.showCaseMessage">
                <el-card shadow="always">
                    <el-form style="width:100%" :model="reportMessage" label-width="140px">
                        <el-form-item label="专题名称：">
                            <div class="box1" v-html="reportMessage.name"></div>
                        </el-form-item>
                        <el-form-item label="核心结论：" >
                            <div  v-if="!editField.cardingOpinion" style="display:flex;align-items:center">
                                <div v-html="reportMessage.cardingOpinion" class="div_MAX_Height" style="color:#000000 !important;"></div>
                                <span @click="editSuggestions(reportMessage)">
                                    <el-link type="primary">
                                        <i class="iconfont icon-bianji" style="font-size:28px"></i>
                                    </el-link>
                                </span>
                            </div>
                            <div v-else style="width:100%;display:flex;align-items:center">
                                <myRich-Text style="width:100%" v-model="reportMessage.cardingOpinion" placeholder="请输入核心结论"></myRich-Text>
                                <el-button type="primary" class="margin-left_10" icon="el-icon-check" circle style="font-size:15px" @click="submit('cardingOpinion')"></el-button>
                                <el-button type="primary" class="margin-left_10" icon="iconfont icon-fanhui" circle style="font-size:15px" @click="cancelSuggestion(reportMessage)"></el-button>
                            </div>
                        </el-form-item>
                        <el-form-item label="无效法条：">
                            <div class="box1">
                                <div v-if="statutes.invalidStatutes1.length>0">
                                   三性法条： {{ statutes.invalidStatutes1.join('、') }}
                                </div>
                                <div v-if="statutes.invalidStatutes2.length>0">
                                    非三性法条： {{ statutes.invalidStatutes2.join('、') }}
                                </div>
                            </div>
                        </el-form-item>
                    </el-form>
                </el-card>
            </div>
        </div>
        <div class="message">
            <div class="title">
                更多信息
                <span>
                    <i v-if="!show.showOtherMessage" class="el-icon-caret-right" @click="show.showOtherMessage = !show.showOtherMessage"></i>
                    <i v-else class="el-icon-caret-bottom" @click="show.showOtherMessage = !show.showOtherMessage"></i>
                </span>
            </div>
            <div v-show="show.showOtherMessage">
                <el-card shadow="always">
                    <el-form style="width:100%" :model="reportMessage" label-width="140px">
                        <template v-if="reportMessage.reportType == 7">
                            <div>
                                <el-row>
                                    <el-col :span="12">
                                    <el-form-item label="案件编号：">
                                        <div class="box1" v-html="$commonJS.getColumnData(reportMessage, { type: 'String', value: 'caseNumber' })"></div>
                                    </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                    <el-form-item label="无效宣告请求人：">
                                        <div class="box1" v-html="$commonJS.getColumnData(reportMessage, { type: 'String', value: 'invalidApplication' })"></div>
                                    </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="发文序号：">
                                            <div class="box1" v-html="$commonJS.getColumnData(reportMessage, { type: 'String', value: 'issueNumber' })"></div>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="发明创造名称：">
                                            <div class="box1" v-html="$commonJS.getColumnData(reportMessage, { type: 'String', value: 'inventionName' })"></div>
                                        </el-form-item>
                                    </el-col>
                                </el-row>

                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="案件阶段" prop="caseStage">
                                            <div class="box1" v-html="$commonJS.getColumnData(reportMessage, { type: 'String', value: 'caseStage' })"></div>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="国知局受理年份" prop="acceptYear">
                                            <div class="box1" v-html="$commonJS.getColumnData(reportMessage, { type: 'String', value: 'acceptYear' })"></div>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="请求人代理所" prop="applicantAgency">
                                            <div class="box1" v-html="$commonJS.getColumnData(reportMessage, { type: 'String', value: 'applicantAgency' })"></div>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="专利权人代理所" prop="rightHolderAgency">
                                            <div class="box1" v-html="$commonJS.getColumnData(reportMessage, { type: 'String', value: 'rightHolderAgency' })"></div>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </div>
                        </template>
                        <el-form-item label="是否完成：">
                            <div class="box1" v-html="$commonJS.getColumnData(reportMessage, { type: 'String', value: 'status' })==3?'是':'否'"></div>
                        </el-form-item>
                        <template>
                            <div>
                                <el-form-item label="报告结果：">
                                    <div class="box1" v-html="$commonJS.getColumnData(reportMessage, { type: 'Array', value: 'cronNames' })"></div>
                                </el-form-item>
                                <el-form-item label="结论论述：">
                                    <div class="box1" v-html="$commonJS.getColumnData(reportMessage, { type: 'String', value: 'cronDescription' })"></div>
                                </el-form-item>
                            </div>
                        </template>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="承担部门：" prop="departmentId">
                                    <div class="box1" v-html="$commonJS.getColumnData(reportMessage, { type: 'String', value: 'departmentName' })"></div>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="负责人：" prop="headId">
                                    <div class="box1" v-html="$commonJS.getColumnData(reportMessage, { type: 'String', value: 'headName' })"></div>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <template>
                                    <div>
                                        <el-form-item label="委托方：" prop="entrustId" v-if="userinfo.tenantType == 1">
                                            <div class="box1" v-html="$commonJS.getColumnData(reportMessage, { type: 'String', value: 'entrustName' })"></div>
                                        </el-form-item>
                                        <el-form-item label="委托部门：" prop="departmentId" v-else>
                                            <div class="box1" v-html="$commonJS.getColumnData(reportMessage, { type: 'String', value: 'departmentName' })"></div>
                                        </el-form-item>
                                    </div>
                                </template>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="卷号：" prop="volumeNumber">
                                    <div class="box1" v-html="$commonJS.getColumnData(reportMessage, { type: 'String', value: 'volumeNumber' })"></div>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="产品/技术：">
                                    <div class="box1" v-html="$commonJS.getColumnData(reportMessage, { type: 'String', value: 'productOrTech' })"></div>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="关联报告：">
                                    <div class="box1" v-html="$commonJS.getColumnData(reportMessage, { type: 'String', value: 'associateReportName' })"></div>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <template>
                            <div>
                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="事件：">
                                        <div class="box1" v-html="$commonJS.getColumnData(reportMessage, { type: 'Array', value: 'eventNames' })"></div>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="调查类型：" prop="matterIds">
                                        <div class="box1" v-html="$commonJS.getColumnData(reportMessage, { type: 'Array', value: 'matterNames' })"></div>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            </div>
                        </template>
                        <el-form-item label="附件：">
                            <div class="box1">
                                <div v-for="item in reportMessage.systemFileList" style="display:flex;align-items:center" :key="item.guid">
                                    <div style="margin-right:20px">{{ item.originalName }}</div>
                                    <my-menu :data="item" :deleted="false"></my-menu>
                                </div>
                            </div>
                        </el-form-item>
                        <el-form-item label="备注：" prop="description">
                            <div class="box1" v-html="$commonJS.getColumnData(reportMessage, { type: 'String', value: 'description' })"></div>
                        </el-form-item>
                    </el-form>
                </el-card>
            </div>
        </div>
        <div class="message">
            <div class="title">
                案件流程
                <span>
                    <i v-if="!show.showFlowPath" class="el-icon-caret-right" @click="show.showFlowPath = !show.showFlowPath"></i>
                    <i v-else class="el-icon-caret-bottom" @click="show.showFlowPath = !show.showFlowPath"></i>
                </span>
            </div>
            <div v-show="show.showFlowPath">
                <el-card shadow="always">
                    <flow-Path :projectId="projectId"></flow-Path>
                </el-card>
            </div>
        </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import flowPath from '@/views/report/InvalidResponse/components/flowPath/flowPath.vue';
import { handleData } from '@/views/project/patentCollection/components/mixins/index'
export default {
  components: {
    flowPath
  },
  mixins:[handleData],
  props: {
    projectId:{
      default:0
    },
    reportMessage:{

    }
  },
  data() {
    return {
        editMessage:{},
        editField:{},
        patentMessage:{},
        loading:{
            patentLoading:false
        },
        show:{
            showPatentMessage:true,
            showCaseMessage:true,
            showOtherMessage:false,
            showFlowPath:true
        },
        statutes:{
            invalidStatutes1:[],
            invalidStatutes2:[]
        }
        
    };
  },
  watch: {},
  computed: {
    userinfo(){
      return this.$s.getObj('userinfo')
    },
    provisions(){
        return this.$store.state.dictMessage.dictMessage.STATUTE || []
    },
    patentNo(){
        return this.reportMessage.signPatentNo
    }
  },
  created() {},
  mounted() {
    this.getPatentDetails()
    this.queryInvalidStatutes()
  },
  methods: {
    //查询无效发条
    queryInvalidStatutes(){
        var params = {
            projectId:this.projectId
        }
        this.$api.queryStatuesVOS(params).then(response=>{
            if(response.code == 200){
                var a = response.data
                var invalidStatutes = [2,3,4]
                var arr = []
                var invalidStatutes1 = []
                var invalidStatutes2 = []
                for(var i = 0;i<a.length;i++){
                    var statute = a[i]
                    if(invalidStatutes.indexOf(statute) !=-1 ){
                        if(arr.indexOf(statute)==-1){
                            arr.push(statute)
                            invalidStatutes1.push(this.getStatuteName(statute))
                        } 
                    }else{
                        if(arr.indexOf(statute)==-1){
                            arr.push(statute)
                            invalidStatutes2.push(this.getStatuteName(statute))
                        } 
                    }
                }
                this.statutes = {
                    invalidStatutes1:invalidStatutes1,
                    invalidStatutes2:invalidStatutes2
                }
            }
        })
        // this.$api.queryInvalidStatutes(params).then(response=> {
        //     if(response.code == 200){
        //         var a = response.data.data
        //         var invalidStatutes = [2,3,4]
        //         var arr = []
        //         var invalidStatutes1 = []
        //         var invalidStatutes2 = []
        //         for(var i = 0;i<a.length;i++){
        //             var statute = a[i].statutesId
        //             if(invalidStatutes.indexOf(statute) !=-1 ){
        //                 if(arr.indexOf(statute)==-1){
        //                     arr.push(statute)
        //                     invalidStatutes1.push(this.getStatuteName(statute))
        //                 } 
        //             }else{
        //                 if(arr.indexOf(statute)==-1){
        //                     arr.push(statute)
        //                     invalidStatutes2.push(this.getStatuteName(statute))
        //                 } 
        //             }
        //         }
        //         this.statutes = {
        //             invalidStatutes1:invalidStatutes1,
        //             invalidStatutes2:invalidStatutes2
        //         }
        //     }
        // })
    },
    getStatuteName(value){
        var obj = this.provisions.find(item=>{
            return item.value == value
        })
        if(obj){
            return obj.simpleLabel
            // var label = obj.label
            // const regex = /\b(?![\({\[])\d+(?![\)}\]])\b/g
            // const matches = [...label.matchAll(regex)]
            // var arr = matches.map(match => Number(match[0]))

            // // const results = label.match(/\（(.*?)\）|\((.*?)\)/)
            // // console.log(results)
            // // const text = results ? `（${results[1]}）` : ''

            // var newLabel = this.getTextInsideParentheses(label)
            // const text = newLabel.length>0?`（${newLabel[newLabel.length -1]}）`:''

            // var zimu = ''
            // if(label.trim()[0] == '法'){
            //     zimu = 'A'
            // }else{
            //     zimu = 'R'
            // }
            // return `${zimu}${arr.join('.')}${text}`
        }
        return ''
    },
    getTextInsideParentheses(str) {  
        const stack = [];  
        const results = [];  
        let current = '';  
    
        for (let i = 0; i < str.length; i++) {  
            if (str[i] === '（' || str[i] === '(') {  
                stack.push(i);  
                if (current) {  
                    // 如果之前已经有内容，说明遇到了新的括号对，开始新的捕获  
                    results.push(current);  
                    current = '';  
                }  
            } else if (str[i] === '）'|| str[i] === ')') {  
                if (stack.length === 0) {  
                    // 不匹配的右括号，可能是错误的输入，可以选择忽略或抛出错误  
                    continue;  
                }  
                const startIndex = stack.pop();  
                results.push(str.substring(startIndex + 1, i));  
                current = '';  
            } else {  
                // 如果不在括号内，则忽略  
                if (stack.length === 0) {  
                    continue;  
                }  
                current += str[i];  
            }  
        }  
    
        // 处理字符串末尾可能还剩下的内容（如果最后一个括号后还有内容）  
        if (current) {  
            results.push(current);  
        }  
    
        // 通常，我们只关心括号内的内容，所以返回这些结果  
        return results.filter(result => result !== '');  
    } ,
    getPatentDetails() {
        if(!this.patentNo){
            return
        }
        var params = {
            patentNo: this.patentNo
        }
        var api = 'selectPatentDetail'
        this.loading.patentLoading = true
        this.$api[api](params).then(response => {
            if (response.code == 200) {
                this.patentMessage = response.data
                this.loading.patentLoading = false
            }
        }).catch(error => {
            this.loading.patentLoading = false
        })
    },
    //编辑核心结论
    editSuggestions(row){
        this.$set(this.editField,'cardingOpinion',true)
        this.$set(this.editMessage,'cardingOpinion',row.cardingOpinion)
    },
    //取消核心结论
    cancelSuggestion(row){
        this.$set(this.editField,'cardingOpinion',false)
        this.$set(row,'cardingOpinion',this.editMessage.cardingOpinion)
    },
    //提交填写的信息
    submit(field) {
          this.reportMessage.type = 2//项目类型（1专利数据库 2报告 3专利挖掘项目）
          // 判断文件是否都上传完毕
          var guids = this.$commonJS.checkUploadFile(this.reportMessage.systemFileList)
            if(!guids){
                return false
            }
            this.reportMessage.fileGuids = guids
          // this.$commonJS.allUploadFile(this.form)
          // 事件及调查类型处理
          if (this.reportMessage.scenarioIds && this.reportMessage.scenarioIds.length > 0) {
            var scenarioIds = JSON.parse(JSON.stringify(this.reportMessage.scenarioIds))
          }
          if (this.reportMessage.eventId) {
            this.reportMessage.events = []
            this.reportMessage.scenarioIds = []
            this.reportMessage.matterIds.forEach(item => {
              this.reportMessage.events.push(
                {
                  matterId: item,
                  scenarioId: scenarioIds[0],
                  eventId: this.form.eventId
                }
              )
            })
          }
          let formData = this.reportMessage
          this.$api.updateReportProject(formData).then(response => {
            if (response.code == 200) {
              this.$message.success('报告更新成功')
              this.$set(this.editField,field,false)
            }
          })
    },
  },
};
</script>
<style lang="scss" scoped>
.message{
    margin: 20px 0;
    .title{
        margin-bottom: 10px;
    }
}
.box1{
    // border: 2px solid var(--color1);
    // border-radius: 5px;
    padding: 0px 10px;
    color: var(--color1);
    font-size: medium;
}
</style>