<template>
  <n-dropdown
    trigger="click"
    :options="getOptions"
    class="dropdown-icon"
    @select="handleSelect"
  >
    <n-input placeholder="" readonly>
      <template #prefix>
        <n-icon
          v-for="(item,index) in getOptions"
          v-show="item.key === selectIcon"
          :key="index"
          color="#111111"
          :component="item.component"
          size="24"
        />
      </template>
    </n-input>
  </n-dropdown>
</template>

<script>
import { reactive, toRefs, h, computed } from 'vue'
import { NIcon } from 'naive-ui'
import Icons from './tools/icon.js'
export default {
  name: 'IconBoard',
  props: {
    selected: {
      type: String,
      default: null
    }
  },
  emits: ['update:selected'],

  setup(props, { emit }) {
    const data = reactive({
      selectIcon: props.selected
    })
    const renderOption = ({ node, option }) => {
      return h(NIcon, {
        class: 'board-icon',
        size: 24,
        onClick: () => {
          console.log(option.key)
        }
      },
      { default: () => h(option.key) })
    }

    const getOptions = computed(() => {
      const options = Icons.map((item, index) => {
        const object = {
          key: `icon_${item.name}`,
          component: item,
          icon: function icon() {
            return h(NIcon, {
              class: 'board-icon',
              color: '#111111',
              size: 24 }, {
              default: () => h(item)
            })
          }
        }
        return object
      })
      return options
    })

    const nodeProps = (option) => {
      return {
        class: 'dropdown__icon',
        style: {
          display: 'inline-block'
        }
      }
    }

    function handleSelect(key) {
      data.selectIcon = key
      emit('update:selected', key)
    }

    return {
      ...toRefs(data),
      Icons,
      renderOption,
      getOptions,
      nodeProps,
      handleSelect
    }
  }
}

</script>
<style lang='scss'>
.v-binder-follower-content{
  .dropdown-icon{
    width: 510px;
    padding: 5px 15px;
    .n-dropdown-option{
      display: inline-block;
      padding: 6px;
    }
    .n-dropdown-option-body__suffix{
      display: none !important;
    }
  }
}

</style>
