<script setup lang="ts">
import { ref } from 'vue'
import CommonCard from './CommonCard.vue';
import { ElIcon } from 'element-plus';
import { Right } from '@element-plus/icons-vue';

const maxCount = ref(4)
const page = ref(1)

const swithPage = (count: number) => {
  page.value = count
}


const list = ref([
  {
    cover: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAF4AAABUCAMAAAA8l3A6AAAAPFBMVEUAAADw6O3YGyX+/v79/f3+/v7LsMnLscnZGiXbGyT+/v3YGiQPUpuXs9IIVJ8WWJ4OUZoySIe8IjjKsMhpEQGCAAAACnRSTlMAHOrmpu3mpqYcloiKAgAAAHhJREFUWMPtzskRwzAQxECsSF2kb+efqzPQb8ofIIAuQPU2ErVeQK0j1VrQR64ObeRqMJLJy8vLy8vLy1/x92TwTAavZHBLJi8vLy8vLy//R/6RDN7J4JMMZjJ5eXl5eXl5+St+mbkWOGauA87c/nICtW/fRNte8AMCdFo8ON0YdwAAAABJRU5ErkJggg==',
    name: 'DDOS攻击事件',
    desc: 'IP&APT组织碰撞',
    isNew: true,
    ip: '185.7.214.104',
    beip: '47.122.6.124'
  },
  {
    cover: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAF4AAABUCAMAAAA8l3A6AAAC91BMVEUAAADWQnDRI1vTKF4uTobPFlI3W47ngZ3fXIYxToYtTobSMGTSMGLOFVLupLTvq7zwqrjohqHuqbguR4DfXH7pkaPVOljbV3HWQV4sSYHTKV/vrr3eWHrsoLDphJ7qjqYoR4AwR4AsR4AqR4ApRoDmepbcSW7ZSWTqjqDjc4gsSIDxs8T0vc3uobbng53fYIjZP2XhR2z2x9Xrlq3uqrvvpbfojaMnRYAuSYEtSoLbS233ydfkW33fPGTlg57hcYgiPnrYOmLfN2Dxq70mQHspQ37XR2TgYH/ibIsvSoLHv9MqSYL1yNfqk6jniqLiZ4btm7Hrn68ePHghOnbiztzfXIUnQnzXO2Hpv8/mgJ3lf5kwSYAhR4EuRoAhRH/wp7glRH8iPHgeOHUzSoDbSmzpydcuS4QhSoMeQX2kqcVuirEWOnguToZegqwnS4QiQn0lPnqnrcd0kLTxvs5ihq9MbJzykqRSc6EeP3oaNnTxtMY2U4rqYH5XeqXeSG3RLmLrwM+ogqMyT4cvQHn4rLtbf6npi55gXIvXQFzOHFXkz9z7sL9LcaCgaY8yRH3rydf2rr0kUooxU4mfUXvjV3jry9jzqLlWhK5YfaiXeZ57XokkTIVdUoPiX37wy9juk6pdfqjwhJ1/aJPscYvoVXbpmrPtobHNlq7id5lZQHR5O228QWbaOWGYNmHPI1r60dzJv9P0oLKkfJ/IgZyBbpelcJOSaI+1X4TIXIE4R3+MOGfbP2XhuMqhrsdrkLXwnbLogZqUcpjdaIuRS3gvOHTlV3BZOG3lTGzUMGPhPGDcJVrXEUzoyNb3xNLyusr3o7Omk7H1mKvLj6ipepyhdJmTYIqpY4npXoXnZITBVXp1RneKRHKdRG6dNWbjR2PhQFzfOFXGobrVm7OXiqt/eqDuiJ/GdZS9cZJfZJI4WY42V43hYIiTUn59TX1hSn3iSmyYQWx0NGaPLl+6KVrNs8ermrZugKdFTYVoP3YoN3ScJV3NvtHMqb/2N1vBAAAADXRSTlMA/Okc6aYc5qampqam2ovgiAAAB0RJREFUWMO12WWU00AUhuGLu2vQ0BQL7i1aXIq7Q3Et7u7u7u7u7u7u7u4uP/juDJTAARI45DlwdhrYN+k0maa7RCHDBvf7/U06deo0sp6zZhZvpwcPHjbxV61a1T8SmnhV1T+C4T+8e7/w5cePrw6xCGaChghGqAdvgrrI92zizaLW6/RQ5us3kXmvV+ZHivzGK1deHWRxzCyNExT9ME3quZGo17Nnz3r1vJrmbsIjr4qDbgL13G6vfxL43a7CG54+eTxq1Ppy5+DRo0flzIQmCl7Y7VYUxVUYXDxw18P+BDdTFK9XxVTVLF++/IbJE88MGXK30gxIAJVMhCJyuTiqK9GqVYsWzQWKw6EYYA/emlWrV6/uad58aL+ZO06fOllyxbFjK7ZBSTNEVfi43W5XtGqJEomnEA0QRVUH8VyyoN7M09yH/ISVPebV6D2od++xY2vUyGSGCE2Zj/a3efRrWMhz1FWF81Wq1K5dO1GiRNHkjAXyNWs2a9asOU/Oas5nHD5o0PC8UKNG1D9DnqHNuF5bbgBdYXhiSn68rvlgA/I9DPmMZgL5KsyQxwvtMM1HMs9H47hJPgtmpzznceasPHUy4lhMPU97RDOBvGFyZL2aw5hHPx/mfvLEtUPWrIrRFpJBZjNE1cTMS7UDefQdou8CBZdV9Zoen6+XvGqTz4LkkMvMj/kqjOtIa5rIi9fYX79+1aq+MmV27124ccmVRUmvQlIoYAZ5DgiiX7gK7w51Q17xT0Jf5F+8fLnkVczrENOKH/N8CbgMeV3mda5/zW9csmRR/2vQH2KbQR7nCAtctSKvOUHsgvNYnatW5/yChZeeX14Uaw+LZQGRQ9c1UHglwy4Q03WH05kli1PVMOSL11m9eoMGDTwen/HMiWEF8qhjcdd+ldc0mW/WTOQ9X1fMUrxizo1fqhT+/BnyDpmXryPooCLPfcC/O1Fv357z8qqNxFdtXBbJxPejxxcdEx04euR5M3arG/JixYyKFXN4ZIhqhghdlWmGvPbbPBaFHl8XhYgWEDmdyEiayKMNyGMpwD5whcmXtnTp0r3w0q5Zs2raCZhWzAKiQD1LFlXjPJfFDmoC8opuzPOZk6wtJEyYMLOpf8/jm4ubMkwOOEQeEJecGiZHrQ4N2iPPdwpn726fAduhshki7RtFd+io8zKvyfOe6TryVaF6e4+v14KLu0aNujClM0wpaIE870EBXeRdLrdLEzOkeb2KDmp9XnOaeTy95KKQdd++fc+yWkGkoI/lRUHUxct8tMKF8ebNedUrdunQvPVB5OWStvgALM6du4IpIt08rwbycr1Pm+NAjhyb0lqAyRGzgzyLBoXBIeb+++TA18nZiMmp8wyTU+ebrEyMjJsk5A30aNiDA0s01glJ4ycgzxx+M5T3mDkT3LlzB7eYqU3xiSnKzvyg4QnoPHBqOi9FOGd13MSqzdq3x2lZpszQ+7dvHT/+ufsRSGkFUX7kFeVb3h3Iy2VT1XA3iDzqyFfj/JvXU7MtW5YtW3oLiLiFo0cTI92tIF8eO8LR83WbX1Vw9Fw35pdBNkhf1ARRecQYbpPKl8flmr+8Uc38vDq0L924cePStWr1Euv9jY5HU6Y82hFSmCHK95Py+fiGzwNMbPJwvXEH5LHmnD69KkPJFSu2lcxgAZGvjODDDbBPjJvny9e8dK0OHTrUkjNSq1atxgxbPmBReDxqfaFZUMgKInw/K+PDWzUPsaN8zct0YJyvBR0M+Uu7Ln9dc7DoRDdDhCprXh5z0tyHOL8WHs6W9jTDJOEZYW4Am3ZzftSF7IF8QdM8f/jDJVuvJ9Srgtu0np068SdDp+oWnwxdiiI+GvqxROCTIa+Y2dHPPmVKdHNE7Qa3YYPbgRi2a9cFA8MmjEA8mnnm7Lp160ePnj179Oh4FhD16TN+fJcuXfo0bdq0Tx8Mxjdt3bopBhgFNo0fB3j0dvUQkZ9tPS8a06cjiuz0bwPsc3xgU59xDA/e7vjrfMuWjYSWYBwYR1sZP5pw6t69ezvPn+98/nwJK4hatGgotADjwDjawvjRjRs3b97MME2wdlkV+YPly5f/8ODTZoa1YHgKa4jKGg0E4+DnfxwzFYpms4yortEYOAxiMIy3DAMeyBHakN4yoopG3bt3/+0IX7q3YimtI8r5V1L/HaJ0P+raFX/5y6+2d+2a5O8Q5fgbm1ha64jy/I3FLLd1PDnWdYW/nJzsfyP6XyJKbCeiBHYiimInooR2IopoJ6LIwKLagSiunYji24kohp2IYtmJqL8U2xZEMe1EVOCbpDYgymWQ/H8j6muQ7H8jKhVfmCv8/0WhhkHk/y2w5kS1KZ9Cips3L34wmBEi/UdErdjRox1TxIVIFvGx5BXk2LjduAl5ya58RyluRvyyItX/RjRHKpYQP7iz4b12vlRoJ6T534iCSGn3szj/V1Ci8N2EpUsHQIT/KwRRsKC25fHrYPTDBbUjL3+Z/QWAhPyYOMX45gAAAABJRU5ErkJggg==',
    name: 'DDOS攻击事件',
    desc: 'IP&APT组织碰撞',
    isNew: true,
    ip: '185.7.214.104',
    beip: '47.122.6.124'
  },
  {
    cover: 'data:image/png;base64,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',
    name: 'ARR欺骗数据',
    desc: 'IP&APT组织碰撞',
    isNew: true,
    ip: '185.7.214.104',
    beip: '47.122.6.124'
  },
  {
    cover: 'data:image/png;base64,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',
    name: 'ARR欺骗数据',
    desc: 'IP&APT组织碰撞',
    isNew: true,
    ip: '185.7.214.104',
    beip: '47.122.6.124'
  }
])
</script>

<template>
  <CommonCard title="情报碰撞威胁事件" class="intelligence-collision-wrap pdb-16">
    <div class="intelligence-collision-box">
      <div class="item" v-for="(item, index) in list" :key="index">
        <img :src="item.cover" alt="" class="left">
        <div class="right">
          <div class="top">
            <span class="top-text">{{ item.name }}</span>
            <div class="tag">{{ item.ip }}</div>
            <ElIcon class="custom-icon-right">
              <Right />
            </ElIcon>
            <div class="tag tag-error">{{ item.beip }}</div>
          </div>
          <div class="bottom">
            <span>{{ item.desc }}</span>
            <div class="tag-new" v-if="item.isNew">new</div>
          </div>
        </div>
      </div>


      <div class="intelligence-collision-simple-page">
        <div class="page-item" :class="page === pageCount && 'is-active'" @click="swithPage(pageCount)"
          v-for="pageCount in maxCount">{{ pageCount }}</div>
      </div>
    </div>
  </CommonCard>
</template>

<style lang="scss" scoped>
.intelligence-collision-wrap {
  width: 35%;
  min-width: 380px;
}

.intelligence-collision-box {
  width: 100%;
  height: 428px;
  display: flex;
  flex-direction: column;

  .item {
    width: 100%;
    flex: 1;
    margin-top: 16px;
    background: rgba(242, 249, 255, 0.7500);
    border-radius: 4px;
    border: 1px solid;
    border-image: linear-gradient(100deg, rgba(0, 149, 255, 0.5), rgba(0, 149, 255, 0)) 1 1;
    display: flex;
    align-items: center;
    padding-left: 12px;
    box-sizing: border-box;

    .left {
      width: 47px;
      height: 42px;
      flex-shrink: 0;
      margin-right: 12px;
    }

    .right {
      display: flex;
      height: 45px;
      justify-content: space-between;
      flex-direction: column;
      font-size: 14px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.6500);

      .top {
        display: flex;
        align-items: center;

        .top-text {
          margin-right: 4px;
        }

        .tag {
          padding: 0 8px;
          box-sizing: border-box;
          height: 20px;
          border-radius: 4px;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 1px solid #45BCCA;
          font-size: 12px;
          font-weight: 400;
          color: #45BCCA;
        }

        .tag-error {
          border-color: #E65857;
          color: #E65857;
        }

        .custom-icon-right {
          font-size: 12px;
          margin: 0 4px;
          color: rgba(0, 0, 0, 0.3500);
        }
      }

      .bottom {
        display: flex;
        align-items: center;

        .tag-new {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 43px;
          height: 18px;
          background: #FF5B5D;
          border-radius: 4px;
          font-size: 14px;
          font-weight: 400;
          color: #FFFFFF;
          margin-left: 8px;
        }
      }

    }
  }

  .intelligence-collision-simple-page {
    margin-top: 14px;
    text-align: right;
    display: inline-block;

    .page-item {
      width: 24px;
      height: 24px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.6500);
      background: #fff;
      border-radius: 2px;
      border-color: transparent;
      cursor: pointer;
    }

    .page-item+.page-item {
      margin-left: 6px;
    }

    .is-active {
      background: #0095FF;
      color: #fff;
    }
  }
}

.pdb-16 {
  padding: 16px 24px;
}
</style>
