<template>
  <div class="bomTable">
    <div
      class="bomTable-item"
      v-for="(item, index) in data"
      :key="index"
      @click="gotoDetail(item)"
    >
      <div class="bomTable-item-left">
        <img :src="item.logo" alt="" />
      </div>
      <div class="bomTable-item-right">
        <div class="bomTable-item-right-title">
          <h1>{{ item.sbmc }}</h1>
        </div>
        <div class="bomTable-item-right-container">
          <p>
            法律状态：<span class="zhuceSpan">{{
              item.sbzt ? item.sbzt : "---"
            }}</span>
          </p>
          <p>
            国际分类：<span>{{ item.gjflname ? item.gjflname : "---" }}</span>
          </p>
          <p>
            申请号：<span>{{ item.sbzch ? item.sbzch : "---" }}</span>
          </p>
          <p>
            申请日期：<span>{{ item.sqrq ? item.sqrq : "---" }}</span>
          </p>
          <p>
            初审公告日期：<span>{{ item.csrq ? item.csrq : "---" }}</span>
          </p>
          <p>
            注册公告日期：<span>{{ item.zcrq ? item.zcrq : "---" }}</span>
          </p>
          <p>
            申请人：<span>{{ item.zcr ? item.zcr : "---" }}</span>
          </p>
          <p>
            商标群组：<span>{{ item.sbq ? item.sbq : "---" }}</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["data"],
  methods: {
    gotoDetail(item) {
      let routeData = this.$router.resolve({
        name: "jdbycdetailtm",
        query: {
          sbzch: item.sbzch,
          gjfl: item.gjfl
        }
      });
      window.open(routeData.href, "_blank");
    }
  }
};
</script>

<style lang="scss">
.bomTable {
  width: 100%;
  padding: 0 20px 20px;
  border: 1px solid #eff1f9;
  border-bottom: none;
  .bomTable-item {
    width: 100%;
    padding: 30px 0;
    border-bottom: 1px solid #d6daeb;
    display: flex;
    cursor: pointer;
  }
}
.bomTable-item-left {
  width: 160px;
  height: 98px;
  border: 1px solid #eff1f9;
  margin-right: 25px;
  img {
    width: 100%;
    height: 100%;
  }
}
.bomTable-item-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  .bomTable-item-right-title {
    width: 100%;
    h1 {
      font-size: 18px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      line-height: 20px;
    }
  }
  .bomTable-item-right-container {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    p {
      width: 33.33%;
      font-size: 12px;
      color: #828282;
      margin-top: 10px;
      padding-right: 30px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      span {
        color: #2f2f2f;
      }
      .zhuceSpan {
        color: #108ee9;
      }
    }
  }
}
</style>
