<template>
  <!--  <SvgIcon style="font-size: 20px;cursor: pointer;" :name="state.currentIconName"  :title="state.currentIconName"  @click="state.dialogVisible = true"></SvgIcon>-->
  <el-input @click="state.dialogVisible = true" v-model="state.currentIconName" style="width: 100%">
    <template #prepend>
      <SvgIcon style="font-size: 20px;cursor: pointer;" :name="state.currentIconName"></SvgIcon>
    </template>
  </el-input>
  <el-dialog
      append-to-body
      v-model="state.dialogVisible"
      title="请选择图标"
      width="80%"
      :before-close="handleClose"
      @open="beforeOpen"
  >
    <div style="display: flex;flex-wrap: wrap">
      <div v-for="(name,index) in state.icons" :index="index" :key="index" style="cursor: pointer;padding: 1rem"
           :class="state.currentIconName === 'ele-'+name ? 'selected' : ''"
           @click="handleIconSelect(name)">
        <SvgIcon :name="'ele-'+name" :title="'ele-'+name"
                 style="width: 2rem;height: 2rem;font-size: 20px;"></SvgIcon>
        <!--        <component :is="name" style="width: 2rem;height: 2rem"></component>-->
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="state.dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleOk">确定</el-button>
      </span>
    </template>
  </el-dialog>

</template>

<script setup lang="ts">
import * as ElIcons from '@element-plus/icons-vue'
import {reactive, onMounted} from "vue";

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

const props = defineProps({
  modelValue: {
    type: String
  }
})

onMounted(() => {
  if (props.modelValue) {
    state.currentIconName = props.modelValue;
  }
  for (let name in ElIcons) {
    state.icons.push(name)
  }
  emit(`update:modelValue`, state.currentIconName);
})

const state = reactive({
  iconList: [],
  icons: [],
  dialogVisible: false,
  currentIconName: 'ele-Aim'
})

const handleIconSelect = (name: string) => {
  state.currentIconName = 'ele-' + name;
}
const handleClose = () => {
  state.dialogVisible = false;
}
const beforeOpen = () => {

}
const handleOk = () => {
  emit(`update:modelValue`, state.currentIconName);
  emit('on-change')
  handleClose();
}

</script>

<style scoped lang="scss">
.selected {
  background-color: var(--el-color-primary);
  color: white;
}
</style>

