<template>
  <div class="patent-basic" @mouseup="mouseup" @mousemove="mousemove">
    <el-row :gutter="24">
      <!-- <el-col :span="10" class="patent-articles-patent-abstract"> -->
      <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="摘要" v-html="getViewDom2(patent, 'abstractStr','摘要')" >
                    
                </p>
               
             <span>
                 <el-link 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 v-if="$permission('/workspace/details/links')">
            <td width="80"><span class="patent-basic-label">外部链接:</span></td>
            <td>
              <el-link type="primary" :href="`https://worldwide.espacenet.com/patent/search?q=${patent.patentNo}`" target="_blank" v-html="getViewDom('Espacenet')" style="margin-right: 15px;"></el-link>
              <el-link type="primary" :href="`http://epub.cnipa.gov.cn/patent/${patent.patentNo}`" target="_blank" v-html="getViewDom('CNIPA')"></el-link>
            </td>
          </tr>
          <tr>
            <td width="80"><span  class="patent-basic-label">标签:</span></td>
            <td>
              <div class="patent-label">
                <template >
                  <el-tag v-if="$permission('/workspace/details/deleteLabel') && $r(projectId,[1,2])" v-for="(label, index) in patent.label" effect="dark" type="primary" size="small" closable :disable-transitions="false" @close="handleCloseLabel(index)">{{ label.name }}</el-tag>
                 <el-tag v-else v-for="(label, index) in patent.label" effect="dark" type="primary" size="small">{{ label.name }}</el-tag>
                  <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 :disabled="!($permission('/workspace/details/addLabel') && $r(projectId,[1,2]))" v-else type="primary" size="mini" @click="showInputLabel" circle icon="el-icon-plus"></el-button>
                </template>
                <!-- <template v-else>
                  <el-tag v-for="(label, index) in patent.label" effect="dark" type="success" size="small">{{ label.name }}</el-tag>
                </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="附图">
          <el-image :src="getImagePath(patent.abstractPath)" :preview-src-list="[getImagePath(patent.abstractPath)]" style="height: 200px;"></el-image>
        </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" data-type="申请号" v-html="getViewDom(patent.applicationNo,'申请号')"></div></el-descriptions-item>
                <el-descriptions-item label="申请日"><div class="patent-basic-value" data-type="申请日" v-html="getViewDom(patent.applicationDate,'申请日')"></div></el-descriptions-item>
                <el-descriptions-item label="公开号"><div class="patent-basic-value" data-type="公开号" v-html="getViewDom(patent.publicNo,'公开号')"></div></el-descriptions-item>
               <el-descriptions-item label="公开日"><div class="patent-basic-value" data-type="公开日" v-html="getViewDom(patent.publicDate,'公开日')"></div></el-descriptions-item>
             
                <el-descriptions-item label="授权号" v-if="patent.publicAccreditNo"><div class="patent-basic-value" data-type="授权号" v-html="getViewDom(patent.publicAccreditNo,'授权号')"></div></el-descriptions-item>
                <el-descriptions-item label="授权日" v-if="patent.publicAccreditDate"><div class="patent-basic-value" data-type="授权日" v-html="getViewDom(patent.publicAccreditDate,'授权日')"></div></el-descriptions-item>
                <el-descriptions-item label="优先权" v-if="patent.priorityNo"><div class="patent-basic-value" data-type="优先权" 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.filter(a => a.dataType === 2)"  data-type="申请人" v-html="getViewDom(item.name,'申请人')+'(标：'+getViewDom(item.shortName,'申请人')+')&nbsp;&nbsp;&nbsp;&nbsp;'"></div>
                </el-descriptions-item>
                <el-descriptions-item label="申请人地址" labelStyle="width:90px" v-if="patent.applicant">
                   <div class="patent-basic-value" v-for="(item,index) in patent.applicant.filter(a => a.dataType === 2)"  v-if="index==0" data-type="申请人地址" v-html="getViewDom(item.addressStr,'申请人地址')"></div>
                </el-descriptions-item>
               <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.filter(a => a.dataType === 1)" data-type="权利人" v-html="getViewDom(item.name,'权利人')+'(标：'+getViewDom(item.shortName,'权利人')+')&nbsp;&nbsp;&nbsp;&nbsp;'"></div>
               </el-descriptions-item>
                <el-descriptions-item label="权利人地址" labelStyle="width:90px" v-if="patent.applicant">
                  <div class="patent-basic-value" v-for="(item,key) in patent.applicant.filter(a => a.dataType === 1)" v-if="key==0" data-type="权利人地址" v-html="getViewDom(item.addressStr,'权利人地址')"></div>
                </el-descriptions-item>
               
                <el-descriptions-item label="发明人" labelStyle="width:90px" contentStyle="display:flex;flex-direction: row;flex-wrap: wrap;justify-content: flex-start;">
                  <div class="patent-basic-value" v-for="item in patent.inventor" data-type="发明人" v-html="getViewDom(item.name,'发明人')+ '&nbsp;&nbsp;&nbsp;&nbsp;'"></div>
                </el-descriptions-item>
                <el-descriptions-item label="代理人" labelStyle="width:90px" v-if="patent.agent">
                  <div class="patent-basic-value" v-for="item in patent.agent" data-type="代理人" v-html="getViewDom(item.name,'代理人')+ '&nbsp;&nbsp;&nbsp;&nbsp;'"></div>
                </el-descriptions-item>
                <el-descriptions-item label="代理机构" labelStyle="width:90px" v-if="patent.agency">
                   <div v-if="patent.agency" class="patent-basic-value" data-type="代理机构" v-html="getViewDom(patent.agency.name,'代理机构')+ '&nbsp;&nbsp;&nbsp;&nbsp;'"></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.ipcList">
                <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" v-for="item in patent.ipcList" data-type="IPC分类号" v-html="getViewDom(item,'IPC分类号')+ '&nbsp;&nbsp;&nbsp;&nbsp;'"></div>
                </el-descriptions-item>
            </el-descriptions>
              </el-tab-pane>
            </el-tabs>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

      
  </div>
</template>

<script>
import { addContrast } from './mixins'
import { commonMixins } from "./mixins"
import { changeTranslation,patentKeywordsHighlight } from "@/views/components/common/mixins";

export default {
  mixins: [commonMixins, changeTranslation,addContrast,patentKeywordsHighlight],
  data() {
    return {
      show: true,
      inputLabelVisible: false,
      inputLabelValue: '',
      showtop:0,
      showleft:0,
      show:false,
      text:"",
    }
  },
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() {
      let data = {
        projectId: this.projectId,
        patentId: this.patent.id,
        type: 96,
        field: '54-0',
        selected: this.patent.label.map(item => item.name)
      }
      this.$api.updatePatentLabel(data).then(response => {
        this.$message.success('操作成功')
      }).catch(error => {
      })
    }
  }
}
</script>

<style lang="scss">

.patent-basic {
  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>