<script setup lang="ts">
import { watchEffect } from 'vue'
/**
 * @description: 图标选择器组件
 * @author: changjun
 * 
 */
interface IconsChangerProps {
  icons: string[],
  modelValue: string
}

const {modelValue = '' , icons = [] } = defineProps<IconsChangerProps>()


const emit = defineEmits(['update:modelValue', 'change']);

const currentIcons = ref('') as any;

watchEffect(() => {
  currentIcons.value = modelValue;
});

function handleClick(item) {
  currentIcons.value = item;
  emit('update:modelValue', item)
  emit('change', item)
}
</script>

<template>

 <div class="ya-file-icon-changer">
    <div class="file-icon-item" :class="currentIcons === icon && 'is-active'" @click="handleClick(icon)" v-for="(icon,index) in icons" :key="index">
      <i class="iconfont" :class="icon"></i>
    </div>
 </div>

</template>

<style lang="scss" scoped>
.ya-file-icon-changer{
  width: 100%;
  padding: 16px;
  box-sizing: border-box;
  border-radius: 2px;
  border: 1px solid rgba(0,0,0,0.2);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;

  .file-icon-item{
    width: 32px;
    height: 32px;
    background: rgba(0,0,0,0.03);
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(0,0,0,0.4);
    cursor: pointer;
    .iconfont{
      font-size: 20px;
    }
  }

  .is-active{
    background: #0095FF;
    color: #fff;
  }
}
</style>
