<script setup lang="ts">
import { computed } from 'vue';
const props = defineProps(['params']);

const chinaIcon = new URL('../icons/country-zh-cn.svg', import.meta.url).href;
const usIcon = new URL('../icons/country-en-us.svg', import.meta.url).href;
const url = computed(() => {
  switch (props.params.value) {
    case 'China':
      return chinaIcon;
    case 'United States':
      return usIcon;

    default:
      return '';
  }
});
</script>
<template>
  <div class="home-country-cellRender">
    <div
      v-if="url"
      class="icon-box"
      :style="{ backgroundImage: `url(${url})` }"
    ></div>
    <div>{{ params.value }}</div>
  </div>
</template>

<style lang="scss">
.home-country-cellRender {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  .icon-box {
    width: 36px;
    height: 24px;
    margin-right: 4px;
    background-size: 100% 100%;
  }
}
</style>
