<template>
  <div class="patent-basic height_100"  @mouseup="mouseup">
    <el-row :gutter="24">
      <el-col :span="18" >
        <el-row :gutter="24">
          <el-col :span="24">
            <el-tabs value="0">
              <el-tab-pane label="摘要" name="0">
                <p class="common" :data-type="'摘要'+(patent.change2?'译文':'原文')" :style="setStyle()" v-html="getView(patent, 'abstractStr','摘要'+(patent.change2?'译文':'原文'))"></p>
               
             <span>
                 <el-link v-if="projectId" type="primary" @click.native="handleChange(patent, 'abstractStr')" >
                  <span v-if="!patent.change2">切换译文</span>
                  <span v-else>切换原文</span>
                </el-link>
              </span>
        <table class="patent-basic-table">
          <tr>
            <td width="80"><span class="patent-basic-label">外部链接:</span></td>
            <td>
              <el-link type="primary" :href="`https://worldwide.espacenet.com/patent/search?q=${patent.publicNo}`" target="_blank"  style="margin-right: 15px;">
                <span v-html="getViewDom('Espacenet')"></span>
              </el-link>
              <el-link type="primary" :href="`http://epub.cnipa.gov.cn/patent/${patent.publicNo}`" target="_blank" >
                <span v-html="getViewDom('CNIPA')"></span>
              </el-link>
            </td>
          </tr>
          <tr v-if="!outside"> 
            <td width="80"><span  class="patent-basic-label">标签:</span></td>
            <td>
              <div class="patent-label">
                <template >
                  <span >
                    <el-tag  v-for="(label, index) in patent.label" :key="label.name" effect="dark" type="primary" size="small" closable :disable-transitions="false" @close="handleCloseLabel(index)">{{ label.name }}</el-tag>
                  </span>
                 <!-- <span  v-else>
                  <el-tag v-for="(label) in patent.label" :key="label.name" effect="dark" type="primary" size="small">{{ label.name }}</el-tag>
                 </span> -->
                 
                  <el-input
                      class="input-new-tag"
                      v-if="inputLabelVisible"
                      v-model="inputLabelValue"
                      ref="saveLabelInput"
                      size="mini"
                      @keyup.enter.native="handleInputLabelConfirm"
                      @blur="handleInputLabelConfirm"
                  >
                  </el-input>
                  <el-button  v-else type="primary" size="mini" @click="showInputLabel" circle icon="el-icon-plus"></el-button>
                </template>
              </div>
            </td>
          </tr>
        </table>
              </el-tab-pane>
            </el-tabs>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="6">
         <el-card shadow="never" class="text-align_center " style="margin-top:50px;" data-type="附图">
          <div style="height: 200px;" class="picture">
            <el-image  :src="outside?patent.pictureGuid:$commonJS.checkViewer(patent.pictureGuid)" :preview-src-list="[outside?patent.pictureGuid:$commonJS.checkViewer(patent.pictureGuid)]" :style="{width:patent.imgWidth?patent.imgWidth:'100%',height:patent.imgHeight?patent.imgHeight:'100%'}">
              <div slot="error" class="image-slot">
                <img src="https://www.patentstar.com.cn/img/Common/nopic.jpg" alt="">
              </div>
            </el-image>
          </div>
          
        </el-card>
        </el-col>
    </el-row>
     <el-row :gutter="24">
      <el-col :span="18" >
        <el-row :gutter="24">
          <el-col :span="24">
            <el-tabs value="0">
              <el-tab-pane label="著录项目" name="0">
                <el-descriptions :column=2>
                  <el-descriptions-item label="申请号"><div class="patent-basic-value"  v-html="getViewDom(patent.appNo,'申请号')"></div></el-descriptions-item>
                  <el-descriptions-item label="申请日"><div class="patent-basic-value"  v-html="getViewDom(patent.appDate,'申请日')"></div></el-descriptions-item>
                  <el-descriptions-item label="公开号"><div class="patent-basic-value" v-html="getViewDom(patent.publicNo,'公开号')"></div></el-descriptions-item>
                  <el-descriptions-item label="公开日"><div class="patent-basic-value"  v-html="getViewDom(patent.publicDate,'公开日')"></div></el-descriptions-item>
                  <el-descriptions-item label="授权号" v-if="patent.publicAccreditNo"><div class="patent-basic-value"  v-html="getViewDom(patent.grantNo,'授权号')"></div></el-descriptions-item>
                  <el-descriptions-item label="授权日" v-if="patent.publicAccreditDate"><div class="patent-basic-value"  v-html="getViewDom(patent.grantDate,'授权日')"></div></el-descriptions-item>
                  <el-descriptions-item label="优先权" v-if="patent.priorityNo"><div class="patent-basic-value"  v-html="getViewDom(patent.priorityNo,'优先权')+ '&nbsp;&nbsp;&nbsp;&nbsp;' +getViewDom(patent.priorityDate)"></div></el-descriptions-item>
                </el-descriptions>
              </el-tab-pane>
            </el-tabs>
          </el-col>
        </el-row>
      </el-col>
    </el-row>  
    <el-row :gutter="24">
      <el-col :span="18" >
        <el-row :gutter="24">
          <el-col :span="24">
            <el-tabs value="0">
              <el-tab-pane label="相关人" name="0">
                <el-descriptions :column="1">
                  <el-descriptions-item label="申请人" labelStyle="width:90px" v-if="patent.applicant" contentStyle="display:flex;flex-direction: row;flex-wrap: wrap;justify-content: flex-start;">
                   <div class="patent-basic-value" v-for="item in patent.applicant" :key="item">
                    <div class="margin-right_10">
                      <span v-html="getViewDom(item,'申请人')"></span>
                      <span v-if="item.shortName" v-html="'(标：'+getViewDom(item.shortName,'申请人')+')'"></span>
                    </div>
                   </div>
                </el-descriptions-item>
                <el-descriptions-item label="申请人地址" labelStyle="width:90px" v-if="patent.applicant">
                   <div class="patent-basic-value" v-if="patent.applicantAddr" v-html="getViewDom(patent.applicantAddr.address,'申请人地址')"></div>
                </el-descriptions-item>
               <el-descriptions-item label="权利人" labelStyle="width:90px" v-if="patent.rightHolder" contentStyle="display:flex;flex-direction: row;flex-wrap: wrap;justify-content: flex-start;">
                 <div class="patent-basic-value" v-for="item in patent.rightHolder" :key="item">
                  <div class="margin-right_10">
                    <span v-html="getViewDom(item,'权利人')"></span>
                    <span v-if="item.shortName" v-html="'(标：'+getViewDom(item.shortName,'权利人')+')'"></span>
                  </div>
                 </div>
               </el-descriptions-item>
                <el-descriptions-item label="权利人地址" labelStyle="width:90px" v-if="patent.rightHolderAddr">
                  <div class="patent-basic-value"  v-if="patent.rightHolderAddr"  v-html="getViewDom(patent.rightHolderAddr.address,'权利人地址')"></div>
                </el-descriptions-item>
               
                <el-descriptions-item label="发明人" labelStyle="width:90px" v-if="patent.inventor && patent.inventor.length>0" contentStyle="display:flex;flex-direction: row;flex-wrap: wrap;justify-content: flex-start;">
                  <div class="patent-basic-value margin-right_10" v-for="item in patent.inventor" :key="item" v-html="getViewDom(item,'发明人')" ></div>
                </el-descriptions-item>
                <el-descriptions-item label="代理人" labelStyle="width:90px" v-if="patent.agent && patent.agent.length>0">
                  <div class="patent-basic-value margin-right_10" v-for="item in patent.agent" :key="item"  v-html="getViewDom(item,'代理人')"></div>
                </el-descriptions-item>
                <el-descriptions-item label="代理机构" labelStyle="width:90px" v-if="patent.agency">
                   <div v-if="patent.agency" class="patent-basic-value"  v-html="getViewDom(patent.agency,'代理机构')"></div>
                </el-descriptions-item>
            </el-descriptions>
              </el-tab-pane>
            </el-tabs>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

     <el-row :gutter="24">
      
      <el-col :span="18" >
        <el-row :gutter="24">
          <el-col :span="24">
            <el-tabs value="0">
              <el-tab-pane label="分类号" name="0"  v-if="patent.ipc">
                <el-descriptions :column=1>
                <el-descriptions-item label="IPC分类号" contentStyle="display:flex;flex-direction: row;flex-wrap: wrap;justify-content: flex-start;">
                  <div class="patent-basic-value margin-right_10" v-for="item in patent.ipc" :key="item.level5" v-html="getViewDom(item.level5,'IPC分类号')"></div>
                </el-descriptions-item>
            </el-descriptions>
              </el-tab-pane>
            </el-tabs>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    
  </div>
</template>

<script>
import { patentDetails } from './mixins';
export default {
  mixins: [patentDetails],
  data() {
    return {
      inputLabelVisible: false,
      inputLabelValue: '',
    }
  },
  watch:{

  },
  mounted() {
  },

  methods: {
    handleCloseLabel(index) {
      this.patent.label.splice(index, 1);
      this.handleSubmitLabel()
    },
    handleInputLabelConfirm() {
      let inputLabelValue = this.inputLabelValue;
      if (inputLabelValue) {
        this.patent.label.push({
          name: inputLabelValue
        });
        this.handleSubmitLabel()
      }
      this.inputLabelVisible = false;
      this.inputLabelValue = '';
    },
    showInputLabel() {
      this.inputLabelVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveLabelInput.$refs.input.focus();
      });
    },
    handleSubmitLabel() {
      console.log(this.patent.label)
      let data = {
        projectId: this.projectId,
        patentNo:this.patent.patentNo,
      }
      this.$api.addPatentLabel(data).then(response => {
        this.$message.success('操作成功')
      }).catch(error => {
      })
    }
  }
}
</script>

<style lang="scss">

.patent-basic {
  // height: 500px;
  overflow-y: auto;
  // height:calc(100% + 30px) ;
  // padding-bottom: 10px;
  .el-image {
    width: 100%;
  }
  .patent-basic-label {
    color: #6b6868;
  }
  .patent-basic-value {
  }
  .patent-basic-table {
    
    font-size: 14px;
    tr {
      height: 30px;
    }
  }
  .patent-articles-patent-abstract {
    .common {
      font-size: 14px;
      margin-top: 0;
    }
    .title {
      font-weight: bold;
      border-bottom: 1px solid #e6e6e6;
      padding-bottom: 5px;
      margin-top: 0;
      margin-bottom: 5px;
    }
  }
  .patent-label {
    line-height: 35px;
    .el-tag {
      margin-left: 0;
      margin-right: 10px;
    }
    .input-new-tag {
      width: 90px;
      vertical-align: bottom;
    }
  }
}
</style>