<!--
@ 作者: 秦东
@ 时间: 2023-07-14 08:27:12
@ 备注: 
-->
<script lang='ts' setup>
import { FormData,FileAttributeAll } from '@/api/DesignForm/types'
const emits = defineEmits<{
    (e: 'click', value: FormData): void
}>()
// const state = reactive({
//     visible: false,
//     list: []
// })
const state = reactive<FileAttributeAll>({
    visible: false,
    list: []
})
const open = () => {
    state.visible = true
    init()
}
const init = () => {
    const template = import.meta.globEager('./template/*.ts')
    console.log(template)
    state.list = []
    Object.keys(template).forEach((key: string) => {
		const file: any = template[key]
		state.list.push({
			imgPath: file.imgPath,
			title: file.title,
			formData: file.formData
		})
    })
}
const selectClick = (item: any) => {
    emits('click', item.formData)
    state.visible = false
}
defineExpose({
    open
})
</script>
<template>
	<div
		v-if="state.visible"
		class="use-template"		
		:class="{ active: state.visible }"
	>
		<span class="close icon-close" @click="state.visible = false"></span>
		<div v-if="state.list.length === 0" class="no-date">暂无可用模板</div>
		<div v-else class="list">
			<div
				v-for="(item, index) in state.list"
				:key="index"
				class="item"
				@click="selectClick(item)"
			>
				<img :src="item.imgPath" alt="" />{{ item.title }}
			</div>
		</div>
	</div>
</template>
<style  lang='scss' scoped>

</style>
