<template>
  <!-- 图片视图 -->
  <div class="pic">
    <div class="item">
      <el-card shadow="hover" v-for="(item, index) in tableData" style="width:200px;margin:5px" :key="index">
        <div slot="header"
          style="width: 100%; white-space: nowrap;overflow-x: hidden;text-overflow: ellipsis;font-size:12px;">
          <div>
            序号：{{ (index + 1) + ((queryParams.current - 1) * queryParams.size) }}
            <el-tag class="margin-left_10" style="cursor: pointer;" type="primary" effect="plain" size="small" @click.native="openAddRemark(item)" v-if="noveltySearch && !noveltyIsRemark(item)">添加查新标注</el-tag>
            <el-tag class="margin-left_10" style="cursor: pointer;" type="primary" effect="plain" size="small"  v-if="noveltySearch && noveltyIsRemark(item)" @click.native="openAddRemark(item)">已标注</el-tag>
          </div>
          <el-divider></el-divider>
          <span v-if="refresh"> 
            <el-checkbox-group :value="patentNoList" >
              <el-checkbox :label="item.patentNo" @change="changeSelect(item)">
                  <el-link v-if="item.ifSearch" :type="item.read === 1 ? 'success' : 'danger'"
                    @click.native.prevent="handleClick(item, index)">
                    <span v-html="getView(item, 'patentNo')"></span>
                  </el-link>
                  <template v-else>
                      <span v-html="getView(item, 'patentNo')"></span>
                      <span>（未匹配到专利）</span>
                  </template>
                  </el-checkbox>
                </el-checkbox-group>
             </span>
          <myTooltip :content="getView(item, 'title')">
            <div class="noWrap" v-html="getView(item, 'title')"></div>
          </myTooltip>
          <div v-if="(outside&&noveltySearch) || semanteme">
            <span>相关度：</span>
            <span v-if="!item.score"><i class="el-icon-loading"></i></span>
            <span v-else-if="item.score == 'error'">无</span>
            <el-progress v-else style="display:inline-block;width:calc(100% - 50px);margin-left:10px;" :text-inside="true" :stroke-width="20"  :percentage="item.score"  :color="customColors" ></el-progress>
          </div>
        </div>
        <div class="picture text-align_center" style="height: 200px;width:100%;">
          <patentImage fit="contain" lazy :patent="item" :preview-src-list="[item.patentAbsImage]" style="margin:0 auto;vertical-align:middle;" ></patentImage>
        </div>
      </el-card>
      <!--      
      </el-col>
    </el-row> -->
    </div>
    <addRemark ref="addRemark" :projectId="projectId" v-on="$listeners"></addRemark>
  </div>
</template>

<script>
// import { commonMixins } from "../../articles/components/mixins"
// import { patentViewList, patentKeywordsHighlight } from '../mixins'
import { projectData, handleData } from '../mixins/index'
export default {
  mixins: [projectData, handleData],
  props: [],
  // mixins:[commonMixins,patentViewList, patentKeywordsHighlight ],
  data() {
    return {

    }
  },
  computed: {
    // records() {
    //   return this.$store.state.patent.records
    // }
  },
  watch: {
    records(val, oldval) {
      if (val != oldval) {
        this.$nextTick(() => {
          this.addRecords()
          this.refreshCheckBox()
        })
      }
    }
  },
  mounted() {

  },
  methods: {

  },
}
</script>
<style lang="scss" scoped>
.item{
  padding:10px;
  display: flex;
  flex-wrap: wrap;
}
  .item:empty{
    padding: 0;
    display: block;
    height: 100%;
    width: 100%;
    text-align: center;
    line-height: 80px;
    &::after{
      content: '暂无数据';
      color: #909399;
    }
    
  }
</style>
<style lang="scss">
.pic {
  .el-divider {
    margin: 5px 0px;
  }

  .el-card__header {
    padding: 5px !important
  }

  .el-card__body {
    padding: 10px !important
  }
}
</style>