<!--
@ 作者: 秦东
@ 时间: 2023-07-12 10:58:26
@ 备注: 快速选择表单字段
-->
<script lang='ts' setup>
import type { TabsPaneContext } from 'element-plus'

import { FormData,FormList } from '@/api/DesignForm/types'
import { stringToObj } from '@/utils/DesignForm/form'
import { jsonParseStringify } from '@/utils/DesignForm'
import controlListData from '@/components/DesignForm/assembly'
import { getRequest } from '@/api/DesignForm'
import Draggable from 'vuedraggable-es'
import UseTemplate from './template.vue'

import { customerFormVersionCont } from '@/api/DesignForm/type'

import '@/assets/iconfont/iconfont.css'

const props = withDefaults(
    defineProps<{
      // eslint-disable-next-line vue/require-default-prop
      formId?: number | string,
	  // eslint-disable-next-line vue/require-default-prop
	  versioncont?:customerFormVersionCont[],
	  versionid:number | string,
    }>(),
    {}
)
// 默认搜索允许显示的字段
const searchField = [
    'input',
    'radio',
    'checkbox',
    'select',
    'datePicker',
    'timePicker',
    'inputNumber',
    'cascader',
    'component',
    'button'
]
const designType = inject('formDesignType') as string	//注入一个由祖先组件或整个应用 (通过 app.provide()) 提供的值。
const formDataList = ref<any[]>([])
const isSearch = computed(() => {
    return designType === 'search'
})
const emits = defineEmits(["clickCheck","click","update:versionid","editversionstaus"]);
// 筛选设计时左则勾选已有表单字段
const selectChange = (val: any,obj: FormList) => {
    if (val) {
		// 勾选时追加
		const newObj = jsonParseStringify(obj)
		delete newObj.rules
		delete newObj.customRules
		emits('clickCheck', newObj)
    }
}
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 useTemplateEl = ref()
const useTemplateClick = () => {
    useTemplateEl.value.open()
}
const useTemplateSelect = (data: FormData) => {
	console.log("使用模版",data);
    emits('click', data)
}
const clone = (origin: any) => {
	// console.log("All--->克隆选中的组件数据结构",origin)
    return jsonParseStringify(origin)
}
//数据监听
watch(
    () => props.formId,
    (val: any) => {
      if (val && isSearch.value) {
        getFormField(val)
      }
    }
)

// 加载当前列表所属的表单，从表单中提取可用于搜索的字段
const getFormField = (formId: number) => {
    getRequest('designById', { id: formId }).then((res: any) => {
		const data = stringToObj(res.data.data)
		if (data && data.list) {
			forEachGetData(data.list)
		}
    })
}
const forEachGetData = (data: FormList[]) => {
    data.forEach((item: any) => {
		if (item.type === 'grid' || item.type === 'tabs') {
			item.columns.forEach((col: any) => {
			forEachGetData(col.list)
			})
		} else if (item.type === 'card') {
			forEachGetData(item.list)
		} else if (searchField.includes(item.type) && item.type !== 'button') {
			formDataList.value.push(item)
		}
    })
}

//当前版本
const activeName = ref<any>(6)
//切换版本
const handleTabsClick = (val:any)  =>{
	// console.log("切换版本",val)
	emits("update:versionid",val)
	
	
}
watch(()=>props.versioncont,(val: any)=>{
	// console.log("versioncont---版本-->",val)
	if(val.length>0){
		val.forEach((item:any,index:number) => {
			if(item.status == 1){
				activeName.value = item.id
			}
		});
	}

	// console.log("选定版本------->",activeName.value)
})
//编辑状态
const setupStatus = (val:any) =>{
	emits("editversionstaus",val.id)
}
</script>
<template>
	<div class="components-list">
		<div v-if="isSearch && formDataList?.length">
			<div class="title">快速选择表单字段</div>
			<div class="content">
				<el-checkbox
					v-for="item in formDataList"
					:key="item.name"
					@change="selectChange($event,item)"
				>
					{{ item.item?.label }}
				</el-checkbox>
			</div>
		</div>
		<!--组件主体-->
		<div v-for="(list, index) in controlList" :key="index">
			<div class="title">
				{{ list.title }}
				<div
					v-if="index === 0 && !isSearch"
					class="template"
					@click="useTemplateClick"
				>
				使用模板
				</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>
		<use-template
			v-if="!isSearch"
			ref="useTemplateEl"
			@click="useTemplateSelect"
		/>

		<div>版本</div>
		{{props.formId}}
		<el-tabs  v-model="activeName" :stretch="true" class="demo-tabs"  @tab-change="handleTabsClick" >
			<el-tab-pane v-for="(item,index) in props.versioncont" :key="index" :label="'V'+item.version" :name="item.id" class="tab_pane_body">
				<el-button v-if="item.status!=1" type="primary" round @click="setupStatus(item)">启用</el-button>
				<el-button v-if="item.status==1" type="warning" round @click="setupStatus(item)">使用中</el-button>
			</el-tab-pane>
			
		</el-tabs>
		<div style="display:none">
			<i class="icon-mouse"></i>
			<i class="icon-hand"></i>
			<i class="icon-lock-open"></i>
			<i class="icon-lock"></i>
			<i class="icon-eye-close"></i>
			<i class="icon-border"></i><br>
			<i class="icon-text2"></i>
			<i class="icon-stext"></i>
			<i class="icon-apply"></i>
			<i class="icon-work"></i>
			<i class="icon-todo"></i>
			<i class="icon-applyed"></i>
			<i class="icon-done"></i><br>
			<i class="icon-button"></i>
			<i class="icon-design"></i>
			<i class="icon-data-source"></i>
			<i class="icon-sp"></i>
			<i class="icon-cs"></i>
			<i class="icon-branch"></i>
			<i class="icon-doc"></i><br>
			<i class="icon-sys"></i>
			<i class="icon-creat"></i>
			<i class="icon-data"></i>
			<i class="icon-menu"></i>
			<i class="icon-user"></i>

			<i class="icon-form"></i>
			<i class="icon-list"></i>
			<i class="icon-log"></i><br>
			<i class="icon-dict"></i>
			<i class="icon-post"></i>
			<i class="icon-role"></i>
			<i class="icon-log2"></i>
			<i class="icon-tool"></i>
			<i class="icon-bar"></i>
			<i class="icon-pie"></i>
			<i class="icon-line"></i>
			<i class="icon-tree2"></i><br>
			<i class="icon-flex"></i>
			<i class="icon-div"></i>
			<i class="icon-tree"></i>
			<i class="icon-time"></i>
			<i class="icon-tinymce"></i>
			<i class="icon-rate"></i>
			<i class="icon-slider"></i>
			<i class="icon-divider"></i>
			<i class="icon-color"></i>
			<i class="icon-import"></i><br>
			<i class="icon-image"></i>
			<i class="icon-card"></i>
			<i class="icon-help"></i>
			<i class="icon-table"></i>
			<i class="icon-component"></i>


			<i class="icon-link"></i>
			<i class="icon-cascader"></i>
			<i class="icon-number"></i>
			<i class="icon-title"></i>
			<i class="icon-tabs"></i>
			<i class="icon-close"></i><br>
			<i class="icon-plus"></i>
			<i class="icon-arrow"></i>
			<i class="icon-check"></i>
			<i class="icon-vue"></i>
			<i class="icon-switch"></i>
			<i class="icon-save"></i>
			<i class="icon-move"></i>
			<i class="icon-clone"></i>
			<i class="icon-del"></i>
			<i class="icon-eye"></i>
			<i class="icon-json"></i><br>
			<i class="icon-grid"></i>
			<i class="icon-text"></i>
			<i class="icon-date"></i>
			<i class="icon-input"></i>
			<i class="icon-checkbox"></i>
			<i class="icon-textarea"></i>
			<i class="icon-radio"></i>
			<i class="icon-select"></i>
		</div>
	</div>
</template>
<style  lang='scss' scoped>
.tab_pane_body{
	text-align: center;
	
}
.fontIcon{
	i{
		padding: 4px 0px 0 0px;
	}
}
</style>
