<!--
@ 作者: 秦东
@ 时间: 2024-05-09 15:12:45
@ 备注: 自定义表单组件页面(App专用)
-->
<script lang='ts' setup>
import { jsonParseStringify } from '@/utils/DesignForm'
import controlListData from '@/components/DesignForm/assembly'
import Draggable from 'vuedraggable-es'
import '@/assets/iconfont/iconfont.css'

//引入页面
import FormVersion from '@/components/DesignForm/formVersion.vue';


const props = withDefaults(
    defineProps<{
      tableKey?: number | string,
	  signCode?: number | string,
    }>(),
    {}
)
const designType = inject('formDesignType') as string	//注入一个由祖先组件或整个应用 (通过 app.provide()) 提供的值。
const isSearch = computed(() => {
    return designType === 'search'
})
// 默认搜索允许显示的字段
const searchField = [
    'input',
    'radio',
    'checkbox',
    'select',
    'datePicker',
    'timePicker',
    'inputNumber',
    'cascader',
    'component',
    'button'
]
/**
@ 作者: 秦东
@ 时间: 2024-05-09 10:58:56
@ 功能: 表单组件数据
*/
const controlList = computed(() => {
    if (designType === 'search') {
		// 只返回基础字段
		const temp: any = []
		controlListData.forEach((item: any) => {
			if (item.children) {
				const filter = item.children.filter((ch: any) => {
					return searchField.includes(ch.type)
				})
				if (filter && filter.length) {
					temp.push({ title: item.title, children: filter })
				}
			}
		})
      	return temp
    } else {
      	return controlListData
    }
})
const tableVersion = ref()	//版本显示器

const emits = defineEmits<{
	(e: 'versionUpdateForm', value: string): void
	(e: 'versionPreviewPage', value: string): void
}>()
/**
@ 作者: 秦东
@ 时间: 2024-05-09 11:36:59
@ 功能: 启用和禁用版本
*/
const enableOrDisable = (val?:any) =>{
	console.log("启用和禁用版本",val)
	emits('versionUpdateForm', val)
}
/**
@ 作者: 秦东
@ 时间: 2024-05-21 09:05:20
@ 功能: 预览版本
*/
const previewPage = (val?:any) =>{
	emits('versionPreviewPage', val)
}
/**
@ 作者: 秦东
@ 时间: 2024-05-09 11:40:15
@ 功能: 打开版本选择页面
*/
const useVersionClick = () => {
	tableVersion.value.open()
}
const activities = [
  {
    content: 'Event start',
    timestamp: '2018-04-15',
  },
  {
    content: 'Approved',
    timestamp: '2018-04-13',
  },
  {
    content: 'Success',
    timestamp: '2018-04-11',
  },
]
/**
@ 作者: 秦东
@ 时间: 2024-05-15 10:15:14
@ 功能: 克隆选中的组件数据结构
*/
const clone = (origin: any) => {
	// console.log("克隆选中的组件数据结构",origin)
    return jsonParseStringify(origin)
}
</script>
<template>
	<div class="components-list">
		<div  v-for="(list, index) in controlList" :key="index">
			<div class="title">
				{{ list.title }}
				<div
					v-if="index === 0 && !isSearch"
					class="template"
					@click="useVersionClick"
				>
				版本
				</div>
			</div>
			<draggable
				v-model="list.children"
				tag="ul"
				:group="{ name: 'form', pull: 'clone', put: false }"
				ghost-class="ghost"
				:sort="false"
				:clone="clone"
				:item-key="key123"
			>
			
				<template #item="{ element }">
					<li class="fontIcon" :class="[element.type]">
						<i v-if="element.iconFont==''" :class="`icon-${element.icon}`"></i>
						<i  v-if="element.iconFont!=''" :class="`fa ${element.iconFont} `"></i>
						<span :title="element.label">{{ element.label }}</span>
					</li>
				</template>
			</draggable>
		</div>
	</div>
	<FormVersion ref="tableVersion" :table-key="props.tableKey" :sign-code="props.signCode" @enableOrDisable="enableOrDisable" @previewPage="previewPage" />
</template>
<style  lang='scss' scoped>
.tab_pane_body{
	text-align: center;
	
}
.fontIcon{
	i{
		padding: 4px 0px 0 0px;
	}
}
</style>
