<!--
 * @Author: changjun
 * @FilePath: /qingdao-safety-product/src/views/threatIntelligenceManagement/components/OrgConBlock.vue
 * @Date: 2022-08-09 08:57:53
 * @Description: 组织贡献情况展示块组件
 * @LastEditTime: 2023-09-01 17:05:20
 * @LastEditors: 曹文丽
-->
<script setup lang="ts">
import { defineProps } from 'vue'

interface OrgConBlockProps {
  index: string | number;
  name: string;
  hot: string | number;
  count: string | number;
}

const { index, name, hot, count } = defineProps<OrgConBlockProps>()

</script>

<template>
  <div class="org-con-block">
    <div class="item">
      <div class="icon-index" :class="`icon-index-${index}`">{{ index }}</div>
      <div class="name">{{ name }}</div>
      <div class="hot-icon-block">
        <img v-for="x in hot"
          src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAcCAMAAABMOI/cAAAAe1BMVEUAAAD/XF3/eHj/W13/XF7/XF//YGP/W13/XF7/W13/W17/W17/XF3/XF3/XF7/XF7/XF//ZGT/ZWX/YnD/XF3/W13/W13/W17/W13/W17/W13/XF//W17/XV//XGH/YWH/gID/XF7/XF3/W17/XF7/XV3/W17/X1//W13XOzrgAAAAKHRSTlMA8ga8fkMf9nb67eGvp4xmXxIOC+fZzsmfmpFYVDswGQTRxbZsaFErffKPpAAAAMJJREFUKM9t0Ul2g0AQBNFswIjBIASabE2eHfc/oaHBgteqv6xc1CI0S9aRTD8cNrKksLvJ8At8yvBEb20ML8NQvinUOgYnhY54zwqcGbko+LxiclVvc3q400hR4pya4E6iNgYnztKtYPba7fGDS1WxHCrGgTpl6Z3/ocx45JTDhzEU2mLa6YApVo0p0QXTVdpjiH04w2Us562yNE1yvFqDKOZeOxtjTX27Csgj34HecW71XVDKc2wbLbTZ1Dr+6uT9Ab8qNyyJceCZAAAAAElFTkSuQmCC" />
      </div>
      <div class="count">{{ count }}</div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.org-con-block {
  display: flex;
  width: 100%;
  height: 45px;
  box-sizing: border-box;
  border-bottom: 1px solid #EBEBEB;

  .item {
    display: flex;
    align-items: center;
    width: 100%;

    .icon-index {
      width: 32px;
      height: 16px;
      box-sizing: border-box;
      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAgBAMAAABQs2O3AAAAJFBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACmWAJHAAAADHRSTlMzAC4HAyQRKRwYDCCH1FH0AAAAr0lEQVQ4y3XTuw0CUQxE0ScQ/8jiDwkBBUAJUAF0AB1AB9ABdLDbwW6HG/lGM059JEujcYmcR1EzACwOEvQBmyLnCzjJfe8CuEkwjAQrfeEOuGpwBvzkfhwJ5kXOEbDU4Amo5H4UgJcEU8BWX2gBLkZAI8EkEuz0hTdgrUEN0DHOIoHrCmCvL/wBLkaAiRHgugJwXQF8TIwJXFcArisA83KRwMUIcC8HcF0BuJfL6QBEKSDxaiP51gAAAABJRU5ErkJggg==) no-repeat;
      background-size: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-family: "DIN";
      font-weight: bold;
      color: #FFFFFF;
    }

    .icon-index-1 {
      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAgCAMAAACVQ462AAAAY1BMVEUAAAD/Z2f/W13/W13/W13/W17/XF7/XV3/Xl7/YWH/XWL/YmL/XF7/XF3/W17/W17/XF7/W17/XF3/XF7/W17/XF7/XF3/XV//W13/XF//W17/XWD/XF//XGD/XV3/X1//W11dSUM7AAAAIHRSTlMADPr36+OGUighFgby3tfPx763tK2jmY9+dGpgWUU8M7gCF3AAAACySURBVEjHvdVHDsMwDERRd1uSe+/O/U+ZA0w2HwrM/RsMuCADnfMDZlAfpsDHRgMyUiBTX0TAp6EG9KRArj4nvlPvKuCjQgNWUmBRb2Lgkx8bHEmBQ/1FfKve1STg0YCN+Fm9LckGrQZMpMCu/ia+CXQaEnCr34mf1NsE+NJqwEwKbOof4munAS0JuNQfxI/qw8TzEC+kwOp5iCunAd2bh7j3fGVR8f9XZmLPVzaQAqf6L/0ZsydLwk/MAAAAAElFTkSuQmCC) no-repeat;
      background-size: 100%;
    }

    .icon-index-2 {
      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAgCAMAAACVQ462AAAAZlBMVEUAAADyhAHyhAHyhAHyhAHygwLzhwb4gwf/lxf/nSfxhAHxhAHyhAHyhAHxhAHyhAHygwHygwLyhALzhALzhALyhALzhALyhQP0hAPzhAPyhAP0hQTyhAT1hwX1hQryhg3/iBHxgwF6mUrNAAAAIXRSTlMA+Ovj24YoIQsG8s/Hvre0raOZj350amBZVU9FPDMZEw/dsfvHAAAAsElEQVRIx63VRxKEMBBDUTBgk3POc/9LzgG0+mV6/1QqLexAb/2Ba9SnEfCh04CEFEjU2xD4KNWAmhTY1O/EV+qzmCxoNWAkBQb1jixoXg1oSYFF/UF8yRbUuzRgIr5Xf+dkwUcDOlJgVn8SXwR6BQk41c/Ed+ofA3x+a0BPCkzqL+LjTANKEnCoX4hv1b/G8yEeSIFRvQ09F6xIgV39Rnzt+5XZ778y5/uVNaTAqv4Pj1K4tQdkO/gAAAAASUVORK5CYII=) no-repeat;
      background-size: 100%;
    }

    .icon-index-3 {
      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAgCAMAAACVQ462AAAAZlBMVEUAAAAAlf8Aov8Alv8Alv8Alv8Alv8Al/8Amv8Anv8AoP8Alf8Alv8Alf8Alf8Alf8Alv8Alv8Alv8Alv8Alv8Alv8Alv8Alf8Alf8Al/8AmP8AmP8Amf8Alv8Amv8AnP8Amf8Alf8oJjyYAAAAIXRSTlMA+grr47aGVyQRBPby3tfPx76to5mPfnRqYE9FPDMrHxm6giTnAAAApklEQVRIx+3Vtw3EMBQE0SPlKe+9uf6bVAEbDaRQzN9gweT/9EV/8AL11gfexBoIyYBQfWyA960GAjIgUr8QX6u3OfDm0MBABvTqzxR4L9FAQwbM6lfiK/WuIIFdAyPxnfore/iDLRkwqd+IL514V5LApgMm4lv1iQd8dmmgIwNG9TvxhdNARQKr+pn45uEPpqcGejJgUH8Y4HOrgZoMWL5T9v4puwHosrjLmuKDbQAAAABJRU5ErkJggg==) no-repeat;
      background-size: 100%;
    }

    .name {
      font-size: 14px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.6500);
      margin-left: 14px;
    }

    .hot-icon-block {
      display: flex;

      img {
        width: 12px;
        height: 14px;
        flex-shrink: 0;
        margin-left: 8px;
      }
    }

    .count {
      font-size: 14px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.6500);
      margin-left: auto;
    }
  }
}
</style>
