<template>
  <!-- 摘要视图 -->
  <div class="patent-abstract-list-view">
    <div class="patent-abstract-card" v-for="(patent, index) in tableData" :key="patent.appNo">
      <div class="patent-abstract-card-wrapper">
        <table class="patent-abstract-card-table">
          <tbody>
            <tr>
              <!-- <td v-if="refresh"><el-checkbox :label="patent.id" @change="changeSelect(patent)"
                  :checked="selected.indexOf(patent.id) !== -1 || patentNoList.indexOf(patent.patentNo) !== -1"></el-checkbox>
              </td> -->
              <td v-if="refresh"><el-checkbox :label="patent.id" @change="changeSelect(patent)"></el-checkbox>
              </td>
              <td>
                <div class="patent-abstract-index-container">
                  <span>{{ (index + 1) + ((queryParams.current - 1) * queryParams.size) }}</span>
                  <!-- 已读未读 -->
                  <span v-if="projectId">
                    <!-- patent.read判断已读未读 -->
                    <!-- <el-tag :type="patent.read === 0 ? 'danger' : 'success'"
                      v-if="$permission('/workspace/folder/isRead')" effect="dark" size="small"
                      @click="handleChangeRead(patent)">{{ readType[patent.read] }}</el-tag>
                    <el-tag type="info" v-else effect="dark" size="small">{{ readType[patent.read] }}</el-tag> -->
                  </span>

                </div>
                <div class="picture text-align_center patent-abstract-image-container">
                  <el-image :src="outside?patent.pictureGuid:$commonJS.checkViewer(patent.pictureGuid)"
                    :preview-src-list="[outside?patent.pictureGuid:$commonJS.checkViewer(patent.pictureGuid)]"
                    style="margin:0 auto;vertical-align:middle;"
                    :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="" style="">
                    </div>
                  </el-image>
                </div>
                <div class="patent-abstract-pdf-button-container">
                  <el-button class="width_100" size="small"
                    type="primary" @click="handleDownload(patent)">PDF 下载</el-button>
                </div>
              </td>
              <!-- 专利号 -->
              <td width="850px">
                <div class="patent-abstract-title">
                  <el-link type="success"
                    @click.native="handleClick(patent, index)">
                    <span v-html="getView(patent, 'patentNo')"></span>
                  </el-link>
                  <el-tag class="margin-left_10" type="primary" effect="dark" size="small" v-if="patent.simpleStatus">{{
                    simpleStatus[patent.simpleStatus] }}</el-tag>
                </div>
                <div style="font-size: 13px;">
                  <el-row>
                    <el-col :span="24" v-if="t()">
                      <span class="patent-abstract_label">标题:</span>
                      <span class="patent-abstract_text">
                        <span v-html="getView(patent, 'title')"></span>
                        <el-link v-if="projectId" type="primary" @click.native="handleChange(patent, 'title')"
                          style="margin-left: 10px;">
                          <span v-if="!patent.change">切换译文</span>
                          <span v-else>切换原文</span>
                        </el-link>
                      </span>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8" v-if="t()">
                      <span class="patent-abstract_label">申请日:</span>
                      <span class="patent-abstract_text">
                        <span v-html="getView(patent, 'appDate')"></span>
                      </span>
                    </el-col>
                    <el-col :span="8" v-if="t()">
                      <span class="patent-abstract_label">公开日:</span>
                      <span class="patent-abstract_text">
                        <span v-html="getView(patent, 'publicDate')"></span>
                      </span>
                    </el-col>
                    <el-col :span="8" v-if="t()">
                      <span class="patent-abstract_label">申请号:</span>
                      <span class="patent-abstract_text">
                        <span v-html="getView(patent, 'appNo')"></span>
                      </span>
                    </el-col>
                  </el-row>
                  <el-row v-if="t()">
                    <el-col :span="24">
                      <span class="patent-abstract_label">权利人:</span>
                      <span class="patent-abstract_text" v-if="patent.rightHolder">
                        <!-- <span v-for="(item) in patent.rightHolder.filter(a => a.dataType === 1)" :key="item.name"> -->
                          <el-link type="primary">
                            <span v-html="getView(patent,'rightHolder')"></span>
                          </el-link>
                          <span class="patent-abstract_semicolon">;</span>
                        <!-- </span> -->
                      </span>
                    </el-col>
                  </el-row>
                  <el-row v-if="t()">
                    <el-col :span="24">
                      <span class="patent-abstract_label">申请人:</span>
                      <span class="patent-abstract_text" v-if="patent.applicant">
                        <!-- <span v-for="(item) in patent.applicant.filter(a => a.dataType === 2)" :key="item.name"> -->
                          <el-link type="primary">
                            <span v-html="getView(patent,'applicant')"></span>
                          </el-link>
                          <span class="patent-abstract_semicolon">;</span>
                        <!-- </span> -->
                      </span>
                    </el-col>
                  </el-row>
                  <el-row v-if="t()">
                    <el-col :span="24">
                      <span class="patent-abstract_label">发明人:</span>
                      <span class="patent-abstract_text">
                        <!-- <span v-for="(item) in patent.inventor" :key="item.name">-->
                          <el-link type="primary">
                            <span v-html="getView(patent, 'inventor')"></span>
                          </el-link>
                          <span class="patent-abstract_semicolon">;</span>
                        <!-- </span>  -->
                      </span>
                    </el-col>
                  </el-row>
                  <el-row v-if="t()">
                    <el-col :span="24">
                      <span class="patent-abstract_label">IPC分类号:</span>
                      <span class="patent-abstract_text">
                        <!-- <span v-for="(item) in patent.mipc" :key="item"> -->
                        <el-link type="primary">
                          <span v-html="getView(patent, 'mipc')"></span>
                        </el-link>
                        <span class="patent-abstract_semicolon">;</span>
                        <!-- </span> -->
                      </span>
                    </el-col>
                  </el-row>
                  <!-- 三种同族，若要显示需要后台返回同族专利数组（目前未返回） -->
                  <!-- <el-row v-if="t('simpleFamily')">
                    <el-col :span="24">
                      <span class="patent-abstract_label">简单同族:</span>
                      <span class="patent-abstract_text">
                        <span v-for="(item) in patent.simpleFamilyNum" :key="item">
                          <el-link type="primary" @click.native="handleFamily(item)">
                            <span v-html="getView(item)"></span>
                          </el-link>
                          <span class="patent-abstract_semicolon">;</span>
                        </span>
                      </span>
                    </el-col>
                  </el-row>
                  <el-row v-if="t('inpadocFamily')">
                    <el-col :span="24">
                      <span class="patent-abstract_label">INPADOC同族:</span>
                      <span class="patent-abstract_text">
                        <span v-for="(item) in patent.simpleFamilyNum" :key="item">
                          <el-link type="primary" @click.native="handleFamily(item)">
                            <span v-html="getView(item)"></span>
                          </el-link>
                          <span class="patent-abstract_semicolon">;</span>
                        </span>
                      </span>
                    </el-col>
                  </el-row>
                  <el-row v-if="t('patSnapFamily')">
                    <el-col :span="24">
                      <span class="patent-abstract_label">PatSnap同族:</span>
                      <span class="patent-abstract_text">
                        <span v-for="(item) in patent.simpleFamilyNum" :key="item">
                          <el-link type="primary" @click.native="handleFamily(item)">
                            <span v-html="getView(item)"></span>
                          </el-link>
                          <span class="patent-abstract_semicolon">;</span>
                        </span>
                      </span>
                    </el-col>
                  </el-row> -->
                  <el-row v-if="t()">
                    <el-col :span="24">
                      <span class="patent-abstract_label">摘要:</span>
                      <div>
                        <span v-html="getView(patent, 'abstractStr')"></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>
                      </div>
                    </el-col>
                  </el-row>

                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </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: ['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) {
      this.$emit('download', patent)
    },
    // 已读未读
    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;
      min-height: 200px;

      .patent-abstract-card-table {
        height: 100%;

        .patent-abstract-index-container {
          font-size: 13px;
          padding-left: 10px;
          margin-bottom: 10px;

          .el-tag {
            margin-left: 10px;
            cursor: pointer;
          }
        }

        .patent-abstract-image-container {
          // padding: 10px;
          border: 1px solid #bcc2cc;
          border-radius: 4px;
          width: 120px;
          height: 150px;
          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-custom-field {
          line-height: 35px;
          font-size: 14px;
          border-bottom: 1px solid #ebecf0;

          .name {
            width: 200px;
            float: left;
          }

          .data {
            width: calc(100% - 200px);
            float: right;
          }
        }

        .patent-abstract_label {
          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;
        }

        tbody,
        tr,
        td {
          height: 100%;
          vertical-align: top;
        }
      }

      .el-checkbox__label {
        display: none;
      }
    }
  }

  .el-card__header {
    font-weight: normal;
    font-size: 14px;
    padding: 18px 20px;
    border-bottom: 1px solid #EBEEF5;
  }
}
</style>