<!--
@ 作者: 秦东
@ 时间: 2023-10-20 13:32:10
@ 备注: 表单字段
-->
<script lang='ts' setup>
import { formWordList, gainFormTableWorde, searchVal } from '@/components/workflow/dialog/common'
import $func from '@/utils/workflow/index'
//引入样式
import '@/styles/workflowcss/dialog.scss'
//引入页面
import selectBox from '@/components/workflow/selectBoxs.vue'
import selectResult from '@/components/workflow/selectResult.vue'
import { ElStep } from 'element-plus'

let props = defineProps({
	visible: {
		type: Boolean,
		default: false
	},
	data: {
		type: Array,
		default: () => []
	},
	formid:{
		type:String,
		default:""
	},
	formtype:{
		type:Number,
		default:1
	}
});
let checkedFormList = ref<any>([])
let emits = defineEmits(['update:visible', 'change'])
let list = computed(() => {
	if(props.formtype == 1){
		return [{
			type: 'formword',
			not: false,
			data: formWordList.value,
			isActive: (item:any) => $func.toggleClass(checkedFormList.value, item, 'id'),
			
			change: (item:any) => {
				console.log("------>",item)
				if(checkedFormList.value.length == 0){
					checkedFormList.value.push(item)
				}else{
					if(checkedFormList.value.some((a:any) => a.id != item.id)){
						checkedFormList.value.push(item)
					}
				}
				// checkedFormList.value = [item]
			}
		}]
	}else{
		return [{
			type: 'formword',
			not: true,
			data: formWordList.value,
			isActive: (item:any) => $func.toggleClass(checkedFormList.value, item, 'id'),
			change: (item:any)=> $func.toChecked(checkedFormList.value, item),
		}]
	}
	
})
let resList = computed(() => {
	if(props.formtype == 1){
	return [{
		type: 'formword',
		data: checkedFormList.value,
		cancel: (item:any) => $func.removeEle(checkedFormList.value, item, 'id')
	}]
}else{
	return [{
		type: 'formword',
		data: checkedFormList.value,
		cancel: (item:any)=> $func.removeEle(checkedFormList.value, item)
	}]
}
})
//关闭弹窗
const closeDialog = () => {
  	emits('update:visible', false)
}
let isShow = computed({
	get() {
		return props.visible
	},
	set(val:any) {
		closeDialog()
	}
})
watch(() => props.visible, (val:any) => {
	if (val) {
		gainFormTableWorde(props.formid,props.formtype);
		searchVal.value = "";
		checkedFormList.value = props.data.map(({ name, id,options,isCheckbox }) => ({
			name: name,
			id: id,
			options:options,
			isCheckbox:isCheckbox
		}));
	}
})
let total = computed(() => checkedFormList.value.length)
const saveDialog = () => {
	
	let checkedList = checkedFormList.value.map((item:any) => ({
		type: props.formtype,
		name: item.name,
		id: item.id,
		options:item.options,
		isCheckbox:item.isCheckbox
	}))
	emits('change', checkedList)
}
const delList = () => {
	checkedFormList.value = [];
}
</script>
<template>
	<el-dialog v-model="isShow" title="选择人力资源字段" :width="600" append-to-body class="promoter_person">
      <div class="person_body clear">
		  	<el-row>
				<el-col :span="12">
					<div class="person_tree l">
						<selectBox :list="list"/>
					</div>
				</el-col>
				<el-col :span="12">
					<selectResult :list="resList" :total="total" @del="delList"/>
				</el-col>
			</el-row>
      </div>
      <template #footer>
          <el-button @click="closeDialog">取 消</el-button>
          <el-button type="primary" @click="saveDialog">确 定</el-button>
      </template>
  </el-dialog>
</template>
<style  lang='scss' scoped>

</style>
