<script lang="ts" setup>
  import { BasicDrawer, useDrawer } from '/@/components/Drawer';
  import IconData from '/@/components/Icon/data/iconfont.data';
  import { SvgIcon } from '/@/components/Icon';
  import { computed } from '@vue/reactivity';
  import { onMounted, unref } from 'vue';

  const props = defineProps<{
    value?: string;
    color?: string;
  }>();
  const emit = defineEmits(['update:value']);
  const iconList = IconData.icons;
  const [register, { openDrawer, closeDrawer }] = useDrawer();
  const getIcon = computed(() => {
    return props.value || 'shuiwen';
  });

  const getColor = computed(() => {
    return props.color || '#377DFF';
  });

  const handleOpenDrawer = () => {
    openDrawer();
  };

  const handleClick = (icon: string) => {
    emit('update:value', icon);
    closeDrawer();
  };

  onMounted(() => {
    emit('update:value', unref(getIcon));
  });
</script>

<template>
  <SvgIcon
    :name="getIcon"
    :icon="getIcon"
    prefix="iconfont"
    class="cursor-pointer !w-6 !h-6"
    :style="{ color: getColor }"
    @click="handleOpenDrawer"
  />
  <BasicDrawer @register="register" v-bind="$attrs" title="选择图标" width="300px">
    <section class="flex flex-wrap justify-start">
      <SvgIcon
        class="!h-6 cursor-pointer mb-3"
        style="flex: 0 0 25%"
        v-for="item in iconList"
        :key="item"
        :icon="item"
        :name="item"
        prefix="iconfont"
        @click="handleClick(item)"
      />
    </section>
  </BasicDrawer>
</template>

<style scoped></style>
