/*
 * @Note:
 * @Author: 2058827620@qq.com
 * @Date: 2021-12-29 16:19:02
 */
import React, { useState, useRef, useEffect } from 'react';
import {
  Select
} from 'antd';
const { Option } = Select;

import Iconfont from './iconfont';
import iconfontjson from '@/assets/json/font_3604052_9dbp3ego1cl.json'

const IconSelect = ({ defaultValue, ...props }) => {

  const [iconNode, setIconNode] = useState([]);

  const { onChange } = props;


  const selectChange = (e) => {
    onChange(e === undefined ? '' : e);
  };

  const getIconItems = () => {

    const iconTemp = [];
    iconfontjson?.glyphs.map((item, index) => {
      iconTemp.push(
        <Option
          key={item.font_class}
          value={`icon-${item.font_class}`}
          style={{ fontSize: '1.5em' }}
        >
          <Iconfont
            type={`icon-${item.font_class}`}
          />
          <span>[icon-{item.name}]</span>
        </Option>
      );
    });
    setIconNode(iconTemp);

  };
  useEffect(() => {
    getIconItems();
  }, []);
  return (
    <>
      <Select
        placeholder="请选择图标"
        allowClear
        showSearch
        defaultValue={defaultValue}
        onChange={selectChange}
      >
        {iconNode}
      </Select>
    </>
  );
};

export default IconSelect;
