<!--
@ 作者: 秦东
@ 时间: 2024-06-12 10:58:03
@ 备注: App表单。有无流程处理
-->
<script lang='ts' setup>
import { nodeFlow,conditionInfo,nodelPeoples } from '@/api/taskapi/types'
import { haveCustomerFormVersion,generateFlow,echoTableFormPage,realTimeUpdateFlow } from '@/api/taskapi/management'
import { string2json,stringToObj } from '@/utils/DesignForm/form'
import { judgeSubmitCancel,startRunFlow,gainAppPageInfo } from '@/api/DesignForm/requestapi'
import { notAsA_BasisForJudgment,asAnApprovalActionControl,fixedValueControl,timeControl,timeEquation,submitButton, afreshSubmitButton } from '@/utils/workflow/const'
import { appPageDataInit,appWorkFlow } from "@/api/date/type"


import FlowStep from '@/views/taskplatform/taskmanagement/flowStep.vue'

const props = defineProps({
	isopen:{
		type:Boolean,
		default:true
	},
	versionid:{
		type:String,
		default:""
	},
	versiontitle:{
		type:String,
		default:""
	},
	drawerwith:{
		type:Number,
		default:0
	},
	pickAppMenu:{
		type:Object,
		default(){
			return {}
		}
	}
})
const formLoading = ref(false) //loading
const flowLoading = ref(false) //loading

const flowFactor = reactive<conditionInfo[]>([])	//表单组件
const flowMap = ref<any[]>();			//工作流
const nextStep = ref<number>(0);
const currentProgress  = ref<number>(1);
const nodeKey = ref<string>('');
//获取工作流条件
const gainFlowChart = reactive<nodeFlow>({
	id:"0"
})

const nodelUserList = reactive<nodelPeoples[]>([])
/**
@ 作者: 秦东
@ 时间: 2024-04-08 15:35:54
@ 功能: 表单基本数据结构
*/
const state = reactive<any>({
	type: 1, // 1新增；2修改；3查看（表单模式） ；4查看； 5设计
    formData: {
      list: [],
      form: {},
      config: {},
	  powerstr:{}
    },
    dict: {},
    formId: props.versionid,
    id: 0,
    loading: true
})
const emits = defineEmits(["update:isopen","searchquery"]);
const drawerOpenOrClose =   computed({
	get: () => props.isopen,
	set: (val) => {
		emits("update:isopen", val);
	},
});

const drawbox =   computed({
	get: () => {
		
			// console.log("isFlowTable",isFlowTable.value)
			if(isFlowTable.value){
				return 1300
			}
			return props.drawerwith
		
	},
	set: (val:number) => {
		return val
	},
});
const isFlowTable = ref(false) //判断是不是流程表单
//获取表单数据
const getTaskFormData = () =>{
	formLoading.value = true
	flowLoading.value = true
	echoTableFormPage({id:props.versionid.toString()})
		.then(({ data }) =>{
			// console.log("表单数据",data)
			if(data.tableFormPage.flowIsOpen == 1 && data.tableFormPage.flowkeystr != "0"){
				isFlowTable.value = true;
				drawbox.value =  800 + 350
			}else{
				isFlowTable.value = false;
				drawbox.value =  800
			}
			gainFlowChart.id=data.tableFormPage.flowkeystr
			// console.log("表单数据--->1",data.flowPage.flowList)
			flowMap.value = data.flowPage.flowList
			state.id=props.versionid
			state.formData = stringToObj(data.tableFormPage.mastesform)
			state.formData.config.hideField = []//暂时的修复方法:接口返回的config中没有hideField属性,手动添加
      		state.dict = string2json(data.tableFormPage.dict)
			state.formData.powerstr = string2json(data.tableFormPage.powerstr)
			judgeSubmitCancel({"name":data.tableFormPage.mastesformjson})
				.then((datajud:any) =>{
					if(datajud.code == 0){
						if (datajud.data == 3 || datajud.data == 4){
							state.formData.list.push(submitButton)
						}
					}
				})
		})
		.finally(()=>{
			formLoading.value = false
			flowLoading.value = false
		})
}

//监听页面变化
watch(()=>props.isopen,()=>{
	if(props.isopen){
			if(isFlow.value == 2){
				drawbox.value =  800 + 350
			}else{
				drawbox.value = 800
			}
		// getTaskFormData();
		initLoadData();
	}else{
		initData()
	}
})
//数据初始化
const initData = () => {
	state.formData = {
      list: [],
      form: {},
      config: {}
    };
	state.dict = {};
	state.formId = 0;
	state.id = 0;
	state.loading = true;
	let aryLen = flowFactor.length
	if(aryLen > 0) flowFactor.splice(0,aryLen);
}
//组件解析
const changeKeyVal = (key:any,val:any,type:any,attribute:any) => {
	// console.log("改变表单值--key--->",key)
	// console.log("改变表单值--val--->",val,Array.isArray(val))
	// console.log("改变表单值--type--->",type)
	// console.log("改变表单值--attribute--->",attribute)

	// console.log("改变表单值--type-1-true->",notAsA_BasisForJudgment.indexOf(type))


	// console.log("改变表单值--flowFactor--->",flowFactor)
	

	// if(notAsA_BasisForJudgment.indexOf(type) != -1){
	// 	console.log("改变表单值--type--true->",notAsA_BasisForJudgment.indexOf(type))
	// }
	let unitsVal = val
	let isUpdateFlowChart = false
	//单选，多选，下拉菜单
	if(notAsA_BasisForJudgment.indexOf(type) === -1){
		let isWrite = true
		flowFactor.forEach((item:any)=>{
			if(item.factorid == key){
				isWrite = false
				
				item.type=3
				if(type == "checkbox"){
					item.isCheckbox = true
					item.answers = val.map(String)
				}else{
					item.isCheckbox = false
					item.oneanswer = val.toString()
				}
				if(notAsA_BasisForJudgment.indexOf(type) === -1){
					isUpdateFlowChart = true
				}
			}
		})
		if(isWrite){
			if(type == "checkbox"){
				flowFactor.push({
					factorid:key,
					type:3,
					isCheckbox:true,
					answers:val.map(String)
				})
			}else{
				flowFactor.push({
					factorid:key,
					type:3,
					isCheckbox:false,
					oneanswer:val.toString()
				})
			}
			isUpdateFlowChart = true
		}
		// console.log("改变表单值--flowFactor--->",flowFactor)
		
	}
	// console.log("改变表单值--flowFactor--1->",unitsVal,timeControl,type)
	//时间类空间附加判断条件
	if(timeControl.indexOf(type) > -1 || fixedValueControl.indexOf(type) > -1 || type == "input"){
		// console.log("改变表单值--flowFactor--3->",unitsVal)
		let addNewTime = true		//判断是否新增
		flowFactor.forEach((item:any)=>{
			// console.log("改变表单值--flowFactor--5->",item.type)
			if(item.type == 2){
				addNewTime = false
				// console.log("改变表单值--flowFactor--5====1->",item.type)
				// console.log("改变表单值--flowFactor--5====3->",item.customFields,item.customFields.length)
				if(item.customFields && item.customFields.length > 0){
					// console.log("改变表单值--flowFactor--5====2->",item.customFields)
					let sunNewAdd = true
					item.customFields.forEach((sunItem:any)=>{
						// console.log("改变表单值--flowFactor-4->",sunItem.wordfield , key,sunItem.wordfield == key)
						if(sunItem.wordfield == key){
							sunNewAdd = false
							isUpdateFlowChart = true
							if(timeEquation.indexOf(attribute) === -1){			//非区间性时间
								sunItem.leftval = val.toString()
							}else{ //区间性时间
								if(Array.isArray(val)){
									if(val.length >= 2){
										sunItem.leftval =  val[0].toString()
										sunItem.rightval = val[val.length - 1].toString()
									}
								}
							}
						}
					})
					if(sunNewAdd){
						isUpdateFlowChart = true
						if(timeEquation.indexOf(attribute) === -1){//非区间性时间
							let customFieldInfo = {
								wordfield: key,
								optType: "1",
								leftval: val.toString()
							}
							item.customFields.push(customFieldInfo)
						}else{ //区间性时间
							if(Array.isArray(val)){
								if(val.length >= 2){
									let customFieldInfo = {
										wordfield: key,
										optType: "6",
										leftval: val[0].toString(),
										leftoptType:"3",
										rightoptType:"3",
										rightval:val[val.length - 1].toString()
									}
									item.customFields.push(customFieldInfo)
								}
							}
						}
					}
				}
			}
		})
		
		if(addNewTime){	//新增自定义类数据判断
			isUpdateFlowChart = true
			if(timeEquation.indexOf(attribute) === -1){			//非区间性时间
				let customFieldInfo = {
					wordfield: key,
					optType: "1",
					leftval: val.toString()
				}
				let condInfo = {
					factorid:"customFields",
					type:2,
					isCheckbox:false,
					customFields:[customFieldInfo]
				}
				flowFactor.push(condInfo)
			}else{		//区间性时间
				if(Array.isArray(val)){
					
					if(val.length >= 2){
						let customFieldInfo = {
							wordfield: key,
							optType: "6",
							leftval: val[0].toString(),
							leftoptType:"3",
							rightoptType:"3",
							rightval:val[val.length - 1].toString()
						}
						let condInfo = {
							factorid:"customFields",
							type:2,
							isCheckbox:false,
							customFields:[customFieldInfo]
						}
						flowFactor.push(condInfo)
					}
				}
			}
			
		}
	}
	//操作人
	if(asAnApprovalActionControl.indexOf(type) > -1){
		isUpdateFlowChart = true
		let isWriteUs = true
		nodelUserList.forEach((item:any)=>{
			if(item.factorid == key){
				isWriteUs = false
				item.userList = val
			}
		})
		if(isWriteUs){
			nodelUserList.push({
				factorid:key,
				userList:val
			})
		}
	}

	// console.log("改变表单值--flowFactor--->",flowFactor)
	//更新工作流图
	if(isUpdateFlowChart){
		flowLoading.value = true
		//获取工作流不进图
		gainFlowChart.conditionList=flowFactor
		gainFlowChart.nodelPeople=nodelUserList
		gainFlowChart.oldFlow = flowMap
		// console.log("获取工作流不进图--gainFlowChart--->",gainFlowChart)
		realTimeUpdateFlow(gainFlowChart)
			.then((data:any) =>{
				// console.log("获取工作流不进图-new-->",data)
				flowMap.value = data.data.flowList
				nextStep.value = data.data.nextStep;
				currentProgress.value  = data.data.Step;
				nodeKey.value = data.data.nodeKey;
				// // console.log("获取工作流不进图-1-->",flowMap.value)
				flowLoading.value = false
			})
	}
}
/**
@ 作者: 秦东
@ 时间: 2024-04-09 16:41:20
@ 功能: 提交成功回调
*/
const afterSubmit = (type: string,val?:any) => {
	// console.log("表单提交成功------------------>",type,val)
	// console.log("流程------------------>",flowMap)
	if (type === 'success') {
		if(isFlowTable.value){
			if(val.code == 0){
				if(val.data){
					let sendInfo ={
						id:val.data.uuid,
						flowList:flowMap.value,
						state:3
					}
					startRunFlow(sendInfo)
						.then((data:any)=>{
							// console.log("流程提交成功--------1---------->",data)
						})
				}
			}
		}
	}
	closeAppSubmit()
}
/**
@ 作者: 秦东
@ 时间: 2024-04-09 16:49:09
@ 功能: 表单前置数据
*/
const beforeSubmit = (params: any) => {
    params.formId =  props.versionid
    params.id = ""
	// emits("update:isopen", false);
    return params
}
/**
@ 作者: 秦东
@ 时间: 2024-04-09 16:50:01
@ 功能: 关闭操作
*/
const closeAppSubmit = () =>{
	emits("searchquery")
	emits("update:isopen", false);
}
/**
@ 作者: 秦东
@ 时间: 2024-04-09 16:50:37
@ 功能: 保存草稿
*/
const saveDraftPage = (type: string,val?:any) => {
	if (type === 'success') {
		if(isFlowTable.value){
			if(val.code == 0){
				let sendInfo ={
						id:val.data.uuid,
						flowList:flowMap.value,
						state:1
					}
					startRunFlow(sendInfo)
						.then((data:any)=>{
							// console.log("流程提交成功--------1---------->",data)
						})
			}
		}
	}
	closeAppSubmit()
}


//app表单
const stateForm = reactive<any>({
	type: 1, // 1新增；2修改；3查看（表单模式） ；4查看； 5设计
    formData: {
      list: [],
      form: {},
      config: {},
	  powerstr:{}
    },
    dict: {},
    formId: "1",
    id: 0,
	formId: 0,
	versionId: 0,
    loading: true
})
const appInitData = ref<appPageDataInit>("")
const mastesformjson = ref("")	//
const isFlow = ref(2)
const versionId = ref<string>("")	//表单版本号
const versionTitle = ref<string>("")	//表单名称
/**
@ 作者: 秦东
@ 时间: 2024-06-03 09:00:10
@ 功能: 初始化数据
*/
const initLoadData = () => {
	// console.log("initLoadData",props.pickAppMenu.type,props.pickAppMenu.type != 1)
	if(props.pickAppMenu.type != 1){
		// appFormTitle.value = props.pickAppMenu.label
		gainAppPageInfo({id:props.pickAppMenu.id})
		.then((data)=>{
			// console.log("获取初始化表单数据",data)
			appInitData.value = data.data
			// console.log("获取初始化表单数据---!",appInitData.value)
			mastesformjson.value = data.data.appForm.mastesformjson
			isFlow.value = data.data.appForm.flowIsOpen
			
			versionId.value = data.data.appForm.id.toString()
			versionTitle.value = data.data.appForm.name
			
			if(data.data.page){
				// console.log("data.data.mastesform", data.data)
				stateForm.id=data.data.appForm.version.toString()
				stateForm.formId =data.data.appForm.cfid.toString()
				stateForm.versionId =data.data.appForm.id.toString()
				stateForm.formData = stringToObj(data.data.appForm.mastesform)
				stateForm.formData.config.hideField = []//暂时的修复方法:接口返回的config中没有hideField属性,手动添加
				stateForm.dict = string2json(data.data.appForm.dict)
				stateForm.formData.powerstr = string2json(data.data.appForm.powerstr)
				// console.log("data.data.mastesform", stateForm.formData)
				
				judgeSubmitCancel({"name":data.data.appForm.mastesformjson})
					.then((datajud:any) =>{
						if(datajud.code == 0){
							if (datajud.data == 3 || datajud.data == 4){
								stateForm.formData.list.push(submitButton)
							}
						}
					})
			}
			
		})
	}
	
}

function optionsValue3Get3(data: any,fieldName: string){
	for(let i = 0; i < stateForm.formData.list.length; i++){
		if(stateForm.formData.list[i].name==fieldName){
			stateForm.formData.list[i].options = []
			for(let j = 0;j<data.length;j++){
				stateForm.formData.list[i].options.push(data[j])
			}
		}
	}
}
</script>
<template>
	<el-drawer  v-model="drawerOpenOrClose" v-loading="loadingData" :title="versiontitle"  :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :size="drawbox" class="drawerClass" >{{drawbox}}
		<AppFormPage
						
			ref="formEl"
			:number="props.pickAppMenu.id"
			:isWorkFlow="isFlow"
			:form-data="stateForm.formData"
			:type="1"
			:mastesformjson="mastesformjson"
			:flowkey="appInitData.flowkey"
			:groupid="appInitData.groupid"
			:sign-code="appInitData.signCode" 
			:version-id="versionid"
			:after-submit="afterSubmit"
			add-url="addData"
			@optionsValue3Get3="optionsValue3Get3"
		/>
		<!-- <ak-form
						
			ref="formEl"
			:number="props.pickAppMenu.id"
			:isWorkFlow="isFlow"
			:form-data="stateForm.formData"
			:type="1"
			:mastesformjson="mastesformjson"
			:flowkey="appInitData.flowkey"
			:groupid="appInitData.groupid"
			:sign-code="appInitData.signCode"
			:version-id="versionid"
			:after-submit="afterSubmit"
			add-url="addData"
			@optionsValue3Get3="optionsValue3Get3"
		/> -->
	</el-drawer>
	
</template>
<style  lang='scss' scoped>
.common-layout{
	height: calc(100vh - 55px);
	padding: 0 15px;
	.el-main{
		height: calc(100vh - 55px);
		padding:0;
	}
	.flowBox{
		height: calc(100vh - 55px);
		border-left: 1px solid #ccc;
		padding: 0 15px;
	}
	.el-header{
		padding:0 10px;
		line-height:30px;
		text-align:right;
		font-size:20px;
		i{
			cursor:pointer;
		}
	}
	
}
</style>
