<template>
  <div class="common">
    <div class="reportTitle">
        查新检索报告
    </div>
    <div class="mainContent">
        <div class="title">一、专利性检索结论：</div>
        <div class="content" v-html="getColumnData('baseMessage','finalConclusions',setValue([{value:dataObj.baseMessage.preliminaryConclusions},{value:'因此建议'} ,{value:dataObj.baseMessage.applicationAdvice}]))"></div>
    </div>
    <div class="mainContent">
        <div class="title">二. 专利申请信息</div>
        <div class="content">
            <table class="applicationMessage">
                <tr>
                    <td>申请单位</td>
                    <td @dblclick="edit('baseMessage','applicants')">
                        <div v-if="isEdit('baseMessage','applicants')">
                            <myRichText v-model="reportData.baseMessage.applicants" customStyle="border:none" :autoFocus="true" @blur="saveMessage"></myRichText>
                        </div>
                        <div v-else v-html="getColumnData('baseMessage','applicants',dataObj.baseMessage.applicants)"></div>
                    </td>
                </tr>
                <tr>
                    <td>检索单位</td>
                    <td @dblclick="edit('baseMessage','searchUnit')">
                        <div v-if="isEdit('baseMessage','searchUnit')">
                            <myRichText v-model="reportData.baseMessage.searchUnit" customStyle="border:none" :autoFocus="true" @blur="saveMessage"></myRichText>
                        </div>
                        <div v-else v-html="getColumnData('baseMessage','searchUnit',dataObj.baseMessage.searchUnit)"></div>
                    </td>
                </tr>
                <tr>
                    <td>检索日期</td>
                    <td @dblclick="edit('baseMessage','searchTime')">
                        <div v-if="isEdit('baseMessage','searchTime')">
                            <myRichText v-model="reportData.baseMessage.searchTime" customStyle="border:none" :autoFocus="true" @blur="saveMessage"></myRichText>
                        </div>
                        <div v-else v-html="getColumnData('baseMessage','searchTime',dataObj.baseMessage.searchTime)"></div>
                    </td>
                </tr>
                <tr>
                    <td>检索人及联系方式</td>
                    <td @dblclick="edit('baseMessage','searchUnitContact')">
                        <div v-if="isEdit('baseMessage','searchUnitContact')">
                            <myRichText v-model="reportData.baseMessage.searchUnitContact" customStyle="border:none" :autoFocus="true" @blur="saveMessage"></myRichText>
                        </div>
                        <div v-else v-html="getColumnData('baseMessage','searchUnitContact',(dataObj.baseMessage.headName || '') + ' ' + (dataObj.baseMessage.searchUnitContact || ''))"></div>
                    </td>
                </tr>
                <tr>
                    <td>申请名称</td>
                    <td @dblclick="edit('baseMessage','caseName')">
                        <div v-if="isEdit('baseMessage','caseName')">
                            <myRichText v-model="reportData.baseMessage.caseName" customStyle="border:none" :autoFocus="true" @blur="saveMessage"></myRichText>
                        </div>
                        <div v-else v-html="getColumnData('baseMessage','caseName',dataObj.baseMessage.caseName)"></div>
                    </td>
                </tr>
                <tr>
                    <td>发明人</td>
                    <td @dblclick="edit('baseMessage','inventor')">
                        <div v-if="isEdit('baseMessage','inventor')">
                            <myRichText v-model="reportData.baseMessage.inventor" customStyle="border:none" :autoFocus="true" @blur="saveMessage"></myRichText>
                        </div>
                        <div v-else v-html="getColumnData('baseMessage','inventor',dataObj.baseMessage.inventor)"></div>
                    </td>
                </tr>
                <tr>
                    <td>发明人联系方式</td>
                    <td @dblclick="edit('baseMessage','inventorContact')">
                        <div v-if="isEdit('baseMessage','inventorContact')">
                            <myRichText v-model="reportData.baseMessage.inventorContact" customStyle="border:none" :autoFocus="true" @blur="saveMessage"></myRichText>
                        </div>
                        <div v-else v-html="getColumnData('baseMessage','inventorContact',dataObj.baseMessage.inventorContact)"></div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <div class="mainContent">
        <div class="title">三. 检索记录表</div>
        <div class="content">
            <table class="searchRecord">
                <tr>
                    <td>地区</td>
                    <td>数据库</td>
                    <td>关键词</td>
                    <td>数量</td>
                </tr>
                <tr style="position: relative;" v-for="(item,index) in getColumnData('searchRecord',null,(dataObj.searchRecord && dataObj.searchRecord.length)>0?dataObj.searchRecord.map(item2=>{return {conditions:item2.conditions,totalNum:item2.totalNum}}): [{}])" :key="index">
                    
                    <td @dblclick="edit('searchRecord','area',index)">
                        <div v-if="isEdit('searchRecord','area',index)">
                            <myRichText v-model="item.area" customStyle="border:none" :autoFocus="true" @blur="saveMessage"></myRichText>
                        </div>
                        <div v-else v-html="item.area"></div>
                    </td>
                    <td @dblclick="edit('searchRecord','dbType',index)">
                        <div v-if="isEdit('searchRecord','dbType',index)">
                            <myRichText v-model="item.dbType" customStyle="border:none" :autoFocus="true" @blur="saveMessage"></myRichText>
                        </div>
                        <div v-else v-html="item.dbType"></div>
                    </td>
                    <td @dblclick="edit('searchRecord','conditions',index)">
                        <div v-if="isEdit('searchRecord','conditions',index)">
                            <myRichText v-model="item.conditions" customStyle="border:none" :autoFocus="true" @blur="saveMessage"></myRichText>
                        </div>
                        <div v-else v-html="item.conditions"></div>
                    </td>
                    <td @dblclick="edit('searchRecord','totalNum',index)">
                        <div v-if="isEdit('searchRecord','totalNum',index)">
                            <myRichText v-model="item.totalNum" customStyle="border:none" :autoFocus="true" @blur="saveMessage"></myRichText>
                        </div>
                        <div v-else v-html="item.totalNum"></div>
                    </td>
                    <span class="funBtn">
                        <el-button type="" size="mini" icon="el-icon-plus" circle @click="addCompareRecord(reportData.searchRecord,index)"></el-button>
                        <el-button v-if="reportData.searchRecord.length>1" size="mini" type="danger" icon="el-icon-delete" circle @click="delCompareRecord(reportData.searchRecord,index)"></el-button>
                    </span>
                </tr>
            </table>
        </div>
    </div>
    <div class="mainContent">
        <div class="title">四.最相关对比文件及专利性评估</div>
        <div class="content result">
            <div class="mainContent1">
                <div class="title1">本提案思路</div>
                <div>
                    <div class="title1">附图:</div>
                    <div class="content" style="display:flex;">
                        <div style="width:150px;height:180px;margin-right:10px" v-for="(item,index) in getColumnData('technicalCase','picture',dataObj.technicalCase.systemFileList?dataObj.technicalCase.systemFileList.map(pic=>pic.guid) : [])" :key="index">
                            <div style="height:30px;line-height:30px;display:flex;justify-content:flex-end;">
                                <el-button type="text" size="small" @click="delImage(reportData.technicalCase.picture,item,index)">删除</el-button>
                            </div>
                            <div style="width:150px;height:148px;border:1px dashed #c0ccda;border-radius: 6px;">
                                <el-image style="width:100%;height:100%" :src="$commonJS.checkViewer(item)" :preview-src-list="reportData.technicalCase.picture.map(pic=>$commonJS.checkViewer(item))" fit="contain"></el-image>
                            </div>
                        </div>
                        <el-upload style="margin-right:10px;margin-top: 30px;" ref="upload" action="#" :auto-upload="false" multiple :on-change="(file, fileList)=>handleChange(reportData.technicalCase.picture,file, fileList)" list-type="picture-card" :show-file-list="false">
                            <span>
                                <i class="el-icon-plus avatar-uploader-icon"></i>
                            </span>
                        </el-upload>
                    </div>
                </div>
                <div @dblclick="edit('technicalCase','inventionPoint')">
                    <div class="title1">方案要点:</div>
                    <div class="content" >
                        <div v-if="isEdit('technicalCase','inventionPoint')">
                            <myRichText v-model="reportData.technicalCase.inventionPoint" customStyle="border:none" :autoFocus="true" @blur="saveMessage"></myRichText>
                        </div>
                        <div v-else v-html="getColumnData('technicalCase','inventionPoint',dataObj.technicalCase.inventionPoint)"></div>
                    </div>
                </div>
            </div>
            <!-- 循环对比记录 -->
            <div class="mainContent1" style="position: relative;" v-for="(item,index) in getCompareRecordData([
            {
                field:'patentMessage.applicant',
                useFunction:(data)=>{
                    if(data.patentMessage.applicant && data.patentMessage.applicant.length>0){
                        return data.patentMessage.applicant.join('、')
                    }
                    return ''
                },
                type:'function',
                key:'applicant'
            },
            {
                field:'patentMessage.publicNo',
                type:'string',
                key:'publicNo'
            },
            {
                field:'content',
                useFunction:(data)=>{
                    var str = ''
                    if(data.data && data.data.length>0){
                        data.data.forEach((item,index) => {
                            str = `${str}${index+1}、${item.markSelectField}“${item.markSelectText}”揭示了“${item.technicalFeature}”${item.markNoteText}<br>`
                        });
                    }
                    return str
                },
                type:'function',
                key:'content'
            }
        ])" :key="index">
            <div class="funBtn">
                <el-button type="" icon="el-icon-plus" circle @click="addCompareRecord(reportData.compareRecord,index)"></el-button>
                <el-button v-if="reportData.compareRecord.length>1" type="danger" icon="el-icon-delete" circle @click="delCompareRecord(reportData.compareRecord,index)"></el-button>
            </div>
                <div>
                    <div>对比文件{{index+1}}（
                        <span @dblclick="edit('compareRecord','applicant',index)">
                            <span v-if="isEdit('compareRecord','applicant',index)">
                                <el-input v-model="item.applicant" :autofocus="true" class="input_border_none" style="width:150px;border:none"  @blur="()=>saveMessage(item.applicant)"></el-input>
                            </span>
                            <span v-else>{{item.applicant||'申请人'}}</span>
                        </span>
                        ，
                        <span @dblclick="edit('compareRecord','publicNo',index)">
                            <span v-if="isEdit('compareRecord','publicNo',index)">
                                <el-input v-model="item.publicNo" :autofocus="true" class="input_border_none" style="width:150px;border:none"  @blur="()=>saveMessage(item.publicNo)"></el-input>
                            </span>
                            <span v-else>{{item.publicNo||'公开号'}}</span>
                        </span>
                        ）</div>
                    <div class="title1">对比文件所公开的与本案有关的内容</div>
                    <div class="content" @dblclick="edit('compareRecord','content',index)">
                        <div v-if="isEdit('compareRecord','content',index)">
                            <myRichText v-model="item.content" customStyle="border:none" :autoFocus="true" @blur="saveMessage"></myRichText>
                        </div>
                        <div v-else v-html="item.content"></div>
                    </div>
                </div>
            </div>

            <div class="mainContent1">
                <div>分析与结论</div>
                <div  @dblclick="edit('baseMessage','distinguishTechnical')">
                    <div class="title1">本方案与对比文件的区别技术特征</div>
                    <div class="content">
                        <div v-if="isEdit('baseMessage','distinguishTechnical')">
                            <myRichText v-model="reportData.baseMessage.distinguishTechnical" customStyle="border:none" :autoFocus="true" @blur="saveMessage"></myRichText>
                        </div>
                        <div v-else v-html="getColumnData('baseMessage','distinguishTechnical')"></div>
                    </div>
                </div>
                <div @dblclick="edit('baseMessage','analyse')">
                    <div class="title1">分析</div>
                    <div class="content">
                        <div v-if="isEdit('baseMessage','analyse')">
                            <myRichText v-model="reportData.baseMessage.analyse" customStyle="border:none" :autoFocus="true" @blur="saveMessage"></myRichText>
                        </div>
                        <div v-else v-html="getColumnData('baseMessage','analyse')"></div>
                    </div>
                </div>
                <div @dblclick="edit('baseMessage','preliminaryConclusions')">
                    <div class="title1">结论</div>
                    <div class="content">
                        <div v-if="isEdit('baseMessage','preliminaryConclusions')">
                            <myRichText v-model="reportData.baseMessage.preliminaryConclusions" customStyle="border:none" :autoFocus="true" @blur="(value)=>saveMessage(value,(value)=>{this.reportData.baseMessage.finalConclusions = setValue([{value:value},{value:'因此建议'} ,{value:reportData.baseMessage.applicationAdvice}])})"></myRichText>
                        </div>
                        <div v-else v-html="getColumnData('baseMessage','preliminaryConclusions',dataObj.baseMessage.preliminaryConclusions)"></div>
                    </div>
                </div>
            </div>

            <div class="mainContent1" @dblclick="edit('baseMessage','applicationAdvice')">
                <div>
                    <div class="title1">建议</div>
                    <div class="content">
                        <div v-if="isEdit('baseMessage','applicationAdvice')">
                            <myRichText v-model="reportData.baseMessage.applicationAdvice" customStyle="border:none" :autoFocus="true" @blur="(value)=>saveMessage(value,(value)=>{this.reportData.baseMessage.finalConclusions = setValue([{value:reportData.baseMessage.preliminaryConclusions},{value:'因此建议'} ,{value:value}])})"></myRichText>
                        </div>
                        <div v-else v-html="getColumnData('baseMessage','applicationAdvice',dataObj.baseMessage.applicationAdvice)"></div>
                    </div>
                </div>
            </div>
            <div class="mainContent1" @dblclick="edit('baseMessage','remark')">
                <div>
                    <div class="title1">备注</div>
                    <div class="content">
                        <div v-if="isEdit('baseMessage','remark')">
                            <myRichText v-model="reportData.baseMessage.remark" customStyle="border:none" :autoFocus="true" @blur="saveMessage"></myRichText>
                        </div>
                        <div v-else v-html="getColumnData('baseMessage','remark')"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import mixins from '@/views/noveltySearch/components/exportReport/components/mixins';
export default {
  components: {},
  mixins:[mixins],
  props: {},
  data() {
    return {
        
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {},
  methods: {},
};
</script>
<style lang="scss" scoped>
 .common{
        width: 800px;
        margin: 0px auto;
        padding: 20px 0;
    }
    .reportTitle{
        font-size: 38px;
        text-align: center;
    }
    
    table, th, td {
        border: 1px solid black;
        border-collapse: collapse; /* 移除单元格之间的间隔 */
    }
    table{
        border: 2px solid black;
        width: 100%;
        td{
            padding: 8px;
            height: 22.5px;
        }
        
    }
    .applicationMessage{
        tr>td:first-child{
            width: 200px;
        }
    }
    .searchRecord{
        width: 100%;
        tr>td:nth-child(1){
            width: 100px;
        }
        tr>td:nth-child(2){
            width: 130px;
        }
        tr>td:nth-child(4){
            width: 130px;
        }
    }
    .mainContent{
        margin-top: 50px;
        .title{
            font-size: 22px;
            font-weight: bold;
            padding: 8px;
        }
        .content{
            min-height: 50px;
        }
    }
    .result{
        border: 2px solid black;
    }
    .mainContent1{
        border-bottom: 1px solid black;
        padding: 5px;
    }
    .funBtn{
        position:absolute;
        width: 100px;
        right: -110px;
        display: flex;
    }
    .mainContent1:last-child{
        border-bottom:none
    }
</style>