<template>
  <div class="indiciaCard" v-loading="loading">
    <!-- <el-row :gutter="24">
      <el-col :span="6" v-for="(item, index) in cardData" :key="item.index"> -->
    <template v-if="cardData && cardData.length > 0">
      <el-card class="box-card" v-for="(item, index) in cardData" :key="index">
        <div slot="header" class="clearfix">
          <!-- <el-checkbox @change="changeRemark(item)" :value="remarkList.indexOf(item.id) !== -1"> -->
          <span v-if="componentType == 'indiciaCard'" style="font-weight: 700;"> 序号：{{ (index + 1) + (queryParams.current
            - 1) * queryParams.size }}</span>
          <span v-else style="font-weight: 700; "> 序号：{{ index + 1 }}</span>
          <!-- </el-checkbox> -->
        </div>
        <div class="card-context text">
          <div style="display: flex;" class="text textPRight context-marginTop">
            <span style="font-weight: 700;">标注：</span>
            <el-tooltip placement="top">
              <template slot="content">
                <div style="max-width:500px;">{{ item.markNoteText }}</div>
              </template>
              <span class="textPRight">{{ item.markNoteText }}</span>
            </el-tooltip>
          </div>
          <div class="text context-marginTop">
            <span style="font-weight: 700;">标注人/时间：</span>
            <span>{{ item.createName }}</span> <span>{{ item.markTime }}</span>
          </div>
          <div style="display: flex;align-items: center;">
            <!-- 文字前方颜色方块 -->
            <!-- <div :style="{ 'background': item.color }"
                style="width: 5px;height: 20px;border-radius: 5px;margin-right: 5px;margin-top: 18px;">
              </div> -->
            <p style="font-weight: 700;min-width: 75px;">标注位置：</p>
            <el-tooltip placement="top">
              <template slot="content">
                <div style="max-width:500px;">{{ '[' + item.markSelectField + ']' + item.markSelectText }}</div>
              </template>
              <!-- 下划线 -->
              <p v-if="item.markType == 0" :style="{ 'border-bottom': `2px solid ${item.markColor}` }"
                class="textPRight textP">{{ '[' + item.markSelectField + ']' + item.markSelectText }}</p>
              <!-- 高亮 -->
              <p v-if="item.markType == 1" :style="{ 'background': item.markColor }" style="color: aliceblue;"
                class="textPRight textP">{{ '[' + item.markSelectField + ']' + item.markSelectText }}</p>
              <!-- 波浪线 -->
              <p v-if="item.markType == 2"
                :style="{ 'text-decoration-line': 'underline', 'text-decoration-style': 'wavy', 'text-decoration-color': item.markColor }"
                class="textPRight textP">{{ '[' + item.markSelectField + ']' + item.markSelectText }}</p>
            </el-tooltip>
          </div>

          <div class="text">
            <span style="font-weight: 700;">专利号：</span>
            <el-link @click.native="toPatentDetails(item)">
              <span style="color: #409EFF;">{{ item.patentNo }}</span>
            </el-link>
          </div>
          <div class="text textPRight context-marginTop">
            <span style="font-weight: 700;">专利标题：</span>
            <el-tooltip placement="top">
              <template slot="content">
                <div style="max-width:500px;">{{ item.patentTitle }}</div>
              </template>
              <span>{{ item.patentTitle }}</span>
            </el-tooltip>
          </div>
          <div class="text context-marginTop">
            <!-- <span style="font-weight: 700;">标注人：</span>
              <span>{{ item.name }}</span> -->
          </div>

        </div>

      </el-card>
    </template>
    <template v-else>
      <el-card class="box-card">
        <p style="margin-left: 10px;"> 暂 无 数 据 </p>
      </el-card>
    </template>
    <!-- </el-col>
    </el-row> -->
  </div>
</template>

<script>
export default {
  props: ['dataArr', 'queryParams', 'loading', 'componentType'],
  data() {
    return {
      remarkList: [],
    }
  },
  computed: {
    cardData() {
      return this.dataArr
    },
  },
  watch: {
  },
  mounted() {

  },
  methods: {
    // 跳转专利详情
    toPatentDetails(row, index) {
      var router = this.$router.resolve({
        path: '/patentDetails/' + row.patentNo,
        query: {
          projectId: row.projectId,
          outside:row.createFrom == 0?true:false//createFrom添加批注的时候传后台，0接口检索出的专利1专题库2报告
        }
      })
      window.open(router.href, '_blank');
    },
    // 选中标注
    changeRemark(row) {
      const index1 = this.remarkList.indexOf(row.id)
      if (index1 === -1) {
        this.remarkList.push(row.id)
      } else {
        this.remarkList.splice(index1, 1)
      }
    },
  },
}
</script>
<style lang="scss">
.indiciaCard {
  .el-card__header {
    padding: 10px 20px 0px 20px !important;
  }

  .box-card {
    cursor: default;
  }
}
</style>
<style lang="scss" scoped>
.card-context {
  padding: 0 20px 20px 20px;
}

.text {
  font-size: 14px;
}

.textP {
  line-height: 25px;
  // margin-bottom: 0px;
  margin: 0px;
}

// .textLineRow {
//   overflow-y: hidden; //多出的隐藏
//   text-overflow: ellipsis; //多出部分用...代替
//   display: -webkit-box; //定义为盒子模型显示
//   -webkit-line-clamp: 1; //用来限制在一个块元素显示的文本的行数
//   -webkit-box-orient: vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
// }

.textPRight {
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.context-marginTop {
  margin-top: 10px;
}
</style>