<script setup lang="ts">
import type { PlatformItem } from '../types'
import Icon from '@/components/ConnectionIcon.vue'

defineProps<{ platformList: PlatformItem[] }>()
const modelValue = defineModel<string>({ default: '1' })

const emit = defineEmits<{
  change: [data: PlatformItem]
}>()

function handleChange(item: PlatformItem) {
  modelValue.value = item.type
  emit('change', item)
}
</script>

<template>
  <div class="connect-from_icon__box">
    <div class="box" v-for="item in platformList" :key="item.type" :class="{ active: item.type === modelValue }" @click="handleChange(item)">
      <div class="connect-form_icon">
        <Icon :multiColor="item.type !== modelValue" :color="item.type === modelValue ? '#fff' : ''" class="svg" :name="item.icon || item.type"></Icon>
      </div>
      <div class="name">{{ item.type_name }}</div>
    </div>
  </div>
</template>

<style lang="scss">
.connect-from_icon__box {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: 20px;
  column-gap: 20px;
  .box {
    padding: 10px 20px;
    height: 100px;
    border: 1px dashed#ddd;
    cursor: pointer;
    &.active {
      .name {
        color: #ba143e;
      }
      .connect-form_icon {
        background: #aa1941;
        box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.2);
      }
    }
  }
  .name {
    text-align: center;
    margin-top: 8px;
  }
  .connect-form_icon {
    margin: 0 auto;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.2);
  }
}
</style>
