<!--
 * @Author: changjun
 * @FilePath: /qingdao-safety-product/src/views/threatIntelligenceManagement/components/OrganizationContribution.vue
 * @Date: 2022-08-08 11:35:13
 * @Description: 组织贡献情况组件
 * @LastEditTime: 2023-09-01 17:05:11
 * @LastEditors: 曹文丽
-->
<script setup lang="ts">
import { ref, reactive } from 'vue'

import CommonCard from "./CommonCard.vue";
import OrgConBlockVue from "./OrgConBlock.vue";
import RoundTab from "./RoundTab.vue";

const topFive = ref([
  {
    name: "开源社区",
    count: "500",
    hot: 3,
    rank: 1,
  },
  {
    name: "威胁处置平台",
    count: "480",
    hot: 2,
    rank: 2,
  },
  {
    name: "浙江御安信息技术有限公司",
    count: "300",
    hot: 1,
    rank: 3,
  },
  {
    name: "奇安信威胁情报组",
    count: "300",
    hot: 0,
    rank: 4,
  },
  {
    name: "国家网络安全应急中心",
    count: "200",
    hot: 0,
    rank: 5,
  },
]);

const afterFive = ref([
  {
    name: "开源社区",
    count: "200",
    hot: 0,
    rank: 6,
  },
  {
    name: "威胁处置平台",
    count: "180",
    hot: 0,
    rank: 7,
  },
  {
    name: "浙江御安信息技术有限公司",
    count: "100",
    hot: 0,
    rank: 8,
  },
  {
    name: "奇安信威胁情报组",
    count: "40",
    hot: 0,
    rank: 9,
  },
  {
    name: "国家网络安全应急中心",
    count: "50",
    hot: 0,
    rank: 10,
  },
]);

const dateRef = ref(1);
</script>

<template>
  <CommonCard title="组织贡献情况">
    <RoundTab v-model="dateRef"></RoundTab>
    <div class="organization-contribution cord-content">
      <div class="block top-five">
        <OrgConBlockVue v-for="item in topFive" :key="item.rank" :index="item.rank" :name="item.name" :count="item.count"
          :hot="item.hot"></OrgConBlockVue>
      </div>

      <div class="block after-five">
        <OrgConBlockVue v-for="item2 in afterFive" :key="item2.rank" :index="item2.rank" :name="item2.name"
          :count="item2.count" :hot="item2.hot"></OrgConBlockVue>
      </div>
    </div>
  </CommonCard>
</template>

<style lang="scss">
.organization-contribution {
  display: flex;
  justify-content: space-between;

  .block {
    min-width: 300px;
    width: 45%;
    display: flex;
    flex-direction: column;
  }
}
</style>
