<template>
  <img :src="src" alt="" class="country-img">
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      default: '',
    },
  },
  data() {
    const countryData = [
      {
        name: 'Korea',
        img: 'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/flag/Korea.jpg',
      },
      {
        name: 'Laos',
        img: 'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/flag/Laos.jpg',
      },
      {
        name: 'malaysla',
        img: 'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/flag/malaysla.jpg',
      },
      {
        name: 'philippines',
        img: 'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/flag/philippines.jpg',
      },
      {
        name: 'others',
        img: 'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/flag/others.jpg',
      },
      {
        name: 'srllanka',
        img: 'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/flag/srllanka.jpg',
      },
      {
        name: 'Thailand',
        img: 'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/flag/Thailand.jpg',
      },
      {
        name: 'vietnam',
        img: 'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/flag/vietnam.jpg',
      },
      {
        name: 'Cambodla',
        img: 'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/flag/Cambodla.jpg',
      },
      {
        name: 'china',
        img: 'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/flag/china.png',
      },
      {
        name: 'Japan',
        img: 'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/flag/Japan.jpg',
      },
    ]
    return {
      countryData,
    }
  },
  computed: {
    src() {
      const { name, countryData } = this
      let src = 'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/flag/others.jpg'
      countryData.forEach(item => {
        if (item.name === name) {
          src = item.img
        }
      })
      return src
    },
  },
}
</script>

<style lang="scss" scoped>
.country-img {
  display: block;
}
</style>
