<template>

  <el-button  @click="dialogVisible = ! dialogVisible" type="primary"> {{dialogVisible}} </el-button>

  <el-button @click="fnOutData" type="primary"> <slot></slot></el-button>

  <el-dialog :title="title" v-model="dialogVisible">

      <div class="container">

          <div class="item" v-for="(item, index) in ElIcons" :key="index"  @click="clickItem(item.name)">

          <div class="text">

            <component :is="`el-icon-${toLine(item.name)}`"></component>

          </div>

          <div class="icon">{{ item.name }}</div>

        </div>

     </div>

  </el-dialog>

</template>

<script lang='ts' setup>

import { ref } from 'vue'

import * as ElIcons from '@element-plus/icons-vue'

import { toLine } from '../../../utils'

import { useCopy } from '../../../hooks/useCopy'

let props = defineProps<{

  title: string, // 弹出框的标题

  visible: boolean  // 控制弹出框的显示与隐藏

}>()

const  dialogVisible = ref(false)

let emits = defineEmits(['update:visible'])

let fnOutData = () => {

  emits('update:visible', dialogVisible.value)

}

// 点击图标

let clickItem = (item: string) => {

  let text = `<el-icon-${toLine(item)} />`

  // 复制文本

  useCopy(text)

  // 关闭弹框

  dialogVisible.value = false

}

</script>

<style lang='scss' scoped>

.container {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

}

.item {

  width: 25%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  margin-bottom: 20px;

  cursor: pointer;

  height: 70px;

}

.text {

  font-size: 14px;

}

.icon {

  flex: 1;

}

svg {

  width: 2em;

  height: 2em;

}

</style>