<!--
 * @Author: changjun
 * @FilePath: /qingdao-safety-product/src/views/threatIntelligenceManagement/components/TableCountryItem.vue
 * @Date: 2022-08-04 15:08:01
 * @Description: 表格国家显示组件
 * @LastEditTime: 2023-09-01 17:06:08
 * @LastEditors: 曹文丽
-->
<script setup lang="ts">
import { defineProps, computed } from 'vue'
import { getContryItemData } from '../../../assets/js/countryFlagBase64'

interface TableCountryItemProps {
  name: string;
  code: string;
}

const props = defineProps<TableCountryItemProps>()


const getIcon = computed(() => {
  const countryData = getContryItemData('countryCode', props.code)
  if (countryData) {
    return countryData.base64
  }
  return ''
})

</script>

<template>
  <div class="custom-table-country-item">
    <img :src="getIcon" class="icon" alt="">
    <span class="name">{{ name }}</span>
  </div>
</template>

<style lang="scss">
.custom-table-country-item {
  display: flex;
  align-items: center;

  .icon {
    width: 18px;
    height: 14px;
    flex-shrink: 0;
    margin-right: 4px;
    border-radius: 1px;
  }

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