<template>
  <div class="height_100">
  <!-- 摘要视图 -->
    <div class="patent-abstract-list-view">
      <div class="patent-abstract-card" v-for="(patent, index) in tableData" :key="index">
        <div class="patent-abstract-card-wrapper">
          <div class="patent-abstract-title" style="display:flex;align-items:center;">
            <div v-if="refresh">
              <el-checkbox-group :value="patentNoList" >
                <el-checkbox :label="patent.patentNo" @change="changeSelect(patent)"></el-checkbox>
              </el-checkbox-group>
            </div>
            <div class="margin-left_10">
              <span>{{ (index + 1) + ((queryParams.current - 1) * queryParams.size) }}.</span>
            </div>
            <div class="margin-left_10">
              <div>
                    <el-link v-if="patent.ifSearch" type="success"  @click.native="handleClick(patent, index)">
                      <span v-html="getView(patent, 'patentNo')"></span>
                    </el-link>
                    <template v-else>
                        <span v-html="getView(patent, 'patentNo')"></span>
                        <span>（未匹配到专利）</span>
                    </template>
                    <el-tag class="margin-left_10" type="primary" effect="dark" size="small" v-if="patent.simpleStatus">
                      {{simpleStatus[patent.simpleStatus] }}
                    </el-tag>
                    <el-tag class="margin-left_10" style="cursor: pointer;" type="primary" effect="plain" size="small" @click="openAddRemark(patent)" v-if="noveltySearch && !noveltyIsRemark(patent)">添加查新标注</el-tag>
                    <el-tag class="margin-left_10" style="cursor: pointer;" type="primary" effect="plain" size="small"  v-if="noveltySearch && noveltyIsRemark(patent)" @click="openAddRemark(patent)">已标注</el-tag>
                    <div v-if="(outside&&noveltySearch) || semanteme" style="display:inline-block;width:300px;margin-left:20px;height:20px" >
                      <span v-if="!patent.score || patent.score == 'NaN'" style="font-size:12px;">相关度加载中<i class="el-icon-loading"></i></span>
                      <span v-else-if="patent.score == 'error'" style="font-size:12px;"></span>
                      <el-progress v-else style="display:inline-block;width:300px;margin-left:20px;" text-color="#000000" :text-inside="true" :stroke-width="20"  :percentage="patent.score"  :color="customColors" ></el-progress>
                    </div>
                  </div>
            </div>
          </div>
          <div style="display:flex;align-items:center;">
            <!-- 左侧图片 -->
            <div>
              <div class="patent-abstract-image-container">
                <patentImage fit="contain" lazy :patent="patent" :preview-src-list="[patent.patentAbsImage]"></patentImage>
              </div>
              <div class="patent-abstract-pdf-button-container">
                <el-button class="width_100" size="small"
                  type="primary" :loading="patent.downLoadPDF" @click="handleDownload(patent)">PDF 下载</el-button>
              </div>
            </div>
            <!-- 右侧内容 -->
            <div class="margin-left_10">
              <div style="font-size:14px">
                <el-row :gutter="10">
                  <el-col :span="24" v-if="t('title')">
                    <div class="patent-abstract">
                      <span class="patent-abstract_label">标题:</span>
                      <span class="patent-abstract_text">
                        <span v-html="getView(patent, 'title')"></span>
                        <el-link v-if="haveTranslatedText(patent, 'title')" type="primary" @click.native="handleChange(patent, 'title')"
                          style="margin-left: 10px;">
                          <span v-if="!patent.change">切换译文</span>
                          <span v-else>切换原文</span>
                        </el-link>
                      </span>
                    </div>
                  </el-col>
                  <el-col :span="12" v-if="t('appDate')">
                    <div class="patent-abstract">
                      <span class="patent-abstract_label">申请日:</span>
                      <span class="patent-abstract_text">
                        <span v-html="getView(patent, 'appDate')"></span>
                      </span>
                    </div>
                  </el-col>
                  <el-col :span="12" v-if="t('grantDate')">
                    <div class="patent-abstract">
                      <span class="patent-abstract_label">公开/公告日:</span>
                      <span class="patent-abstract_text">
                        <span v-if="patent.grantDate" v-html="getView(patent, 'grantDate')"></span>
                        <span v-else v-html="getView(patent, 'publicDate')"></span>
                      </span>
                    </div>
                  </el-col>
                  <el-col :span="12" v-if="t('appNo')">
                    <div class="patent-abstract">
                      <span class="patent-abstract_label">申请号:</span>
                      <span class="patent-abstract_text">
                        <span v-html="getView(patent, 'appNo')"></span>
                      </span>
                    </div>
                  </el-col>
                  <el-col :span="12" v-if="t('grantNo')">
                    <div class="patent-abstract">
                      <span class="patent-abstract_label">公开/公告号:</span>
                      <span class="patent-abstract_text">
                        <span v-if="patent.grantNo" v-html="getView(patent, 'grantNo')"></span>
                        <span v-else v-html="getView(patent, 'publicNo')"></span>
                      </span>
                    </div>
                  </el-col>
                  <el-col :span="12" v-if="t('rightHolder')">
                    <div class="patent-abstract">
                      <span class="patent-abstract_label">权利人:</span>
                      <myTooltip :content="getPersonNames({row:patent,key:'rightHolder',join:'；'})" effect="light">
                        <span class="patent-abstract_text color_link noWrap" v-html="getViewDom(getPersonNames({row:patent,key:'rightHolder',join:'；'}),null,'rightHolder')">
                        </span>
                      </myTooltip>
                    </div>
                  </el-col>
                  <el-col :span="12" v-if="t('applicant')">
                    <div class="patent-abstract">
                      <span class="patent-abstract_label">申请人:</span>
                      <myTooltip :content="getPersonNames({row:patent,key:'applicant',join:'；'})" effect="light">
                        <span class="patent-abstract_text color_link noWrap" v-html="getViewDom(getPersonNames({row:patent,key:'applicant',join:'；'}),null,'applicant')">
                        </span>
                      </myTooltip>
                    </div>
                  </el-col>
                  <el-col :span="12" v-if="t('inventor')">
                      <div class="patent-abstract">
                        <span class="patent-abstract_label" style="min-width:fit-content">发明人:</span>
                        <myTooltip :content="getPersonNames({row:patent,key:'inventor',join:'；'})" effect="light">
                          <span class="patent-abstract_text color_link noWrap" v-html="getViewDom(getPersonNames({row:patent,key:'inventor',join:'；'}),null,'inventor')">
                          </span>
                        </myTooltip>
                      </div>
                  </el-col>
                  <el-col :span="12" v-if="t('mipc')">
                    <div class="patent-abstract">
                      <span class="patent-abstract_label">分类号:</span>
                      <span class="patent-abstract_text">
                          <span class="color_link" v-if="patent.patentType == 3 &&  patent.patentNo.substring(0,2) == 'CN'" v-html="getView(patent, 'mloc')"></span>
                          <span class="color_link" v-else v-html="getView(patent, 'mipc')"></span>
                      </span>
                    </div>
                  </el-col>
                  <el-col :span="24">
                    <div class="patent-abstract">
                      <span class="patent-abstract_label">摘要:</span>
                      <span>
                        <span v-html="getView(patent, 'abstractStr')"></span>
                        <el-link v-if="haveTranslatedText(patent, 'abstractStr')" type="primary" @click.native="handleChange(patent, 'abstractStr')">
                          <span v-if="!patent.change2">切换译文</span>
                          <span v-else>切换原文</span>
                        </el-link>
                      </span>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
    <addRemark ref="addRemark" :projectId="projectId" v-on="$listeners"></addRemark>
  </div>
  
</template>

<script>
import { downLoad2 } from "@/utils"
import { projectData, handleData } from '../mixins/index';

export default {
  mixins: [projectData, handleData],
  components:{
  },
  // props: ['viewField'],
  // mixins: [patentViewList, patentKeywordsHighlight,commonMixins],
  data() {
    return {
      checkList: [],
      // 已读未读
      readType: {
        1: '已读',
        0: '未读'
      },
      statusType: {

      },
      row: {}
    }
  },
  watch: {
    records(val, oldval) {
      if (val != oldval) {
        this.$nextTick(() => {
          this.addRecords()
          this.refreshCheckBox()
        })
      }

    }
  },
  computed: {
    columnList() {
      return this.viewField.filter(item => !item.hidden)
    },
    customField() {
      return this.viewField.filter(item => !item.hidden && (item.type !== 'list' || item.key === 'label'))
    },
  },
  mounted() {

  },
  methods: {
    // 同族事件
    handleFamily(item) {
      // this.$api.getPatentIdByPatentNo({ patentNo: item }).then(response => {
      //   if (response.data === 0) {
      //     this.$alert('专利暂未收录', '请求错误', {
      //       confirmButtonText: '确定',
      //       type: 'error',
      //       callback: action => { }
      //     });
      //   } else {
      //     this.handleLink({ id: response.data })
      //   }
      // })
    },
    getColumnValue(patent, column) {
      if (column.key !== 'label') {
        const field = patent.field.find(item => item.id === parseInt(column.key))
        if (field) {
          return field.selected
        }
      } else {
        return patent.label.map(item => item.name)
      }
      return []
    },
    handleIndexSetting(row, field) {
      this.$emit('index-setting', row, field)
    },
    // ？？？？？？？
    t(key) {
      // if (key) {
      //   return this.columnList.map(item => item.key).indexOf(key) !== -1
      // }
      return true
    },
    getPatentAbstractImage(path) {
      if (!path) {
        return ''
      }
      return this.$p + path
    },
    openPatentAbstractImage(abstractPath) {
      // console.log(abstractPath)
    },
    // pdf下载按钮
    handleDownload(patent) {
      if(patent.pdf && patent.pdf.length>0){
        this.download(patent)
        return 
      }
      this.$set(patent,'downLoadPDF',true)
      if(this.outside){
        var params = {
          appNo: patent.appNo,
          rowApplicationNo: patent.rowApplicationNo,
        }
        this.$api.getCnPdf(params).then(response => {
          if (response.code == 200) {
            this.$set(patent, 'pdf', response.data)
            this.download(patent)
            this.$set(patent,'downLoadPDF',false)
          }
        }).catch(error=>{
          this.$set(patent,'downLoadPDF',false)
        })
      }else{
        let params = {
          appNo: patent.patentNo,
          // type: this.pdfType,//0公开1授权
        }
        this.$api.getTextPdf(params).then(response => {
          if (response.code == 200) {
            this.$set(patent, 'pdf', response.data)
            this.download(patent)
            this.$set(patent,'downLoadPDF',false)
          }
        }).catch(error=>{
          this.$set(patent,'downLoadPDF',false)
        })
      }
    },
    download(patent){
      if(patent.pdf && patent.pdf.length>0){
        // for(var i = 0;i<patent.pdf.length;i++){
        //   downLoad2(patent.pdf[i].pdfGuid)
        // }
        let obj = patent.pdf.find(item => {
          return item.type == 1
        })
        if(obj){
          downLoad2(obj.pdfGuid,patent.grantNo)
        }else{
          downLoad2(patent.pdf[0].pdfGuid,patent.publicNo)
        }
      }
      this.$message.warning('该专利暂无说明书！')
      return true
    },
    // 已读未读
    handleChangeRead(patent) {
      // const status = patent.read === 1 ? 0 : 1
      // this.$emit('change-read', [patent.id], status)
    }
  }
}
</script>

<style lang="scss">
.patent-abstract-list-view {
  .patent-abstract-card {
    width: 100%;
    border-bottom: 1px solid #e5e5e5;

    .patent-abstract-card-wrapper {
      padding: 10px;
      max-width: 1300px;
      min-height: 200px;
      .patent-abstract{
        display: flex;
        padding: 2px 0;
      }
      .color_link{
        color:#409EFF;
      }
        .patent-abstract-image-container {
          // padding: 10px;
          border: 1px solid #bcc2cc;
          border-radius: 4px;
          width: 120px;
          height: 150px;
          padding: 10px;
          // line-height: 150px;
          // img {
          //   width: 100%;
          //   height: 100%;
          // }
        }

        .patent-abstract-pdf-button-container {
          text-align: center;
          margin-top: 10px;
        }

        .patent-abstract-title {
          margin-bottom: 5px;
        }



        .patent-abstract_label {
          min-width: fit-content;
          color: #495973;
          padding-right: 8px;
        }

        .patent-abstract_text {
          .el-link {
            position: relative;
            top: -2px;
          }
        }

        .patent-abstract_semicolon {
          padding-left: 5px;
          padding-right: 5px;
          display: inline-block;
          color: #495973;
        }
      .el-checkbox__label {
        display: none;
      }
    }
  }
  
  .el-card__header {
    font-weight: normal;
    font-size: 14px;
    padding: 18px 20px;
    border-bottom: 1px solid #EBEEF5;
  }
}
.patent-abstract-list-view:empty{
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 80px;
  &::after{
    content: '暂无数据';
    color: #909399;
  }
    
  }
</style>