<!--
@ 作者: 秦东
@ 时间: 2023-11-27 15:14:55
@ 备注: 
-->
<script lang='ts' setup>
import { submitButton, afreshSubmitButton,editFormCont,draftSubmitButton,editLookFormCont } from "@/utils/workflow/const";
import {
    json2string,
    objToStringify,
    string2json,
    stringToObj
} from '@/utils/DesignForm/form'

import { haveCustomerFormVersion,generateFlow } from '@/api/taskapi/management'

import RunFlowStep from '@/views/taskplatform/taskmanagement/runFlowStep.vue'

import { judgeSubmitCancel,startRunFlow,afreshRunFlow,onlyPublishFlow,gainEditFormFlowInfo } from '@/api/DesignForm/requestapi'



const props = defineProps({
	isshow:{
		type:Boolean,
		default:true
	},
	drawerWith:{
		type:Number,
		default:0
	},
	flowLogInfo:{
		type:Object,
		default(){
			return {}
		}
	},
	operState:{
		type:Number,
		default:1
	}
})
const flowAry = ref<any[]>();
const emits = defineEmits(["update:isshow","getmytodolist"]);
const isOpen =   computed({
	get: () => props.isshow,
	set: (val) => {
		emits("update:isshow", val);
	},
});
const logistrue = ref(false)
const formLoading  = ref(false)
const loadingData = ref(false)			//加载表单数据
const flowLoading = ref(false)			//加载流程数据
const versiontitle = ref<any>("")
const flowMap = ref<any>()
const nextStep = ref(0)
const nodeKey = ref<string>('');
const currentProgress  = ref<number>(1);
const newLogAry = ref<any>("")
const oldLogAry = ref<any>("")
//表单相关内容
const formState = reactive({
    formData: {
      list: [],
      form: {},
      config: {}
    },
    dict: {},
    formId: 25,
    id: 1,
    loading: true
})
//获取表单内容
const gainFormData = () =>{
	formLoading.value = true;
	console.log("获取表单内容--->",props.flowLogInfo)
	nextStep.value = props.flowLogInfo.nextStep
	nodeKey.value = props.flowLogInfo.nodeKey;
	currentProgress.value = props.flowLogInfo.currentStep
	console.log("props.flowLogInfo--5-------->",props.flowLogInfo.mastesform)
	formState.formData = stringToObj(props.flowLogInfo.mastesform)
	// formState.formData.list.push(submitButton)
	haveCustomerFormVersion({id:props.flowLogInfo.formVersionId})
		.then(({ data }) =>{
			console.log("res----------->",props.flowLogInfo.flowkeys, data)
			// formState.formData = stringToObj(data.mastesform)
			formState.dict = string2json(data.dict)
			if(props.operState == 2 || props.operState == 3 || props.operState == 4){
				judgeSubmitCancel({"name":data.mastesformjson})
						.then((dataBut:any) =>{
							console.log("res----判断按钮------->",dataBut,props.operState)
							if(dataBut.code == 0){
								// formState.formData.list.push(afreshSubmitButton)
								// console.log("res----判断按钮------->",dataBut,props.operState)
								if (dataBut.data == 3 || dataBut.data == 4){
									console.log("res----判断按钮------->",dataBut.data,props.operState)
									if(props.operState == 2){
										formState.formData.list.push(afreshSubmitButton)
									}else if(props.operState == 3){
										formState.formData.list.push(editFormCont)
									}else if(props.operState == 4){
										formState.formData.list.push(draftSubmitButton)
									}
									
								}
							}
						})
			}
			nextTick(() => {
				// formEl.value.getData({ id: props.flowLogInfo.flowkeys,version: props.flowLogInfo.formVersionId})
				// formState.loading = false
			})
			formLoading.value = false
		})
		.finally(() => {
			gainEditFormFlowInfo({ id: props.flowLogInfo.flowkeys})
				.then((data:any)=>{
					if(data.data.logistrue){
						formState.formData.list.push(editLookFormCont)
					}
					console.log("res----获得数据回显------->",data)
					formEl.value.setValue(data.data.masterDataInfo)
					newLogAry.value = data.data.newData
					oldLogAry.value = data.data.oldData
					logistrue.value = data.data.logistrue
					
					
				})

		})
		
}

const formType = computed(() => {
    // 带有参数id为编辑状态
    if (true) {
      return 2
    } else {
      return 1
    }
	// return props.operState
})

const formEl = ref<any>()
const drawerBeforeClose = () => {
	console.log("监听打开关闭",false)
	emits("getmytodolist")
	emits("update:isshow", false);
}
onMounted(()=>{
	versiontitle.value = props.flowLogInfo.title
	flowMap.value = JSON.parse(props.flowLogInfo.flowcont)
	gainFormData()
})
//关闭拉窗
const closeAppSubmit = () => {
	drawerBeforeClose();
}
const runstep = ref(null)
//重新提交审核
const anewSubmit = (type: string,val?:any) => {
	
	if(type == "success"){
		afreshRunFlow({id:props.flowLogInfo.flowkeys})
			.then((data:any) => {
				console.log("重新提交数据---<",data,runstep.value)
				runstep.value.gainRunFlowTask()
			})
			.finally(() => {
				drawerBeforeClose();
			})
	}
}
//保存草稿箱
const saveEditFormInfo  = (type: string,val?:any) => {
	
	if(type == "success"){
		runstep.value.gainRunFlowTask()
		drawerBeforeClose();
	}
}
//草稿提交审批
const sendDraftSubmit =  (type: string,val?:any) => {
	
	if(type == "success"){
		let sendInfo ={
			id:props.flowLogInfo.flowkeys,
			flowList:flowAry.value,
			state:3
		}
		onlyPublishFlow(sendInfo)
			.then((data:any) =>{
				console.log("草稿提交审批---<",sendInfo,data)
				if(data.code == 0){
					ElMessage.success(data.msg || '提交成功！')
					runstep.value.gainRunFlowTask()
					drawerBeforeClose();
				}
			})
		// 
		// 
	}
}
</script>
<template>
	<el-drawer  v-model="isOpen" v-loading="loadingData" element-loading-my-text="Loading..." :title="versiontitle"  :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :size="props.drawerWith" class="drawerClass" :before-close="drawerBeforeClose">
		<table border="0"  class="tableFlowBox">
			<tr>
				<td valign="top">
					<div class="drawerFormBox boxLeft">
						<ak-form
							ref="formEl"
							v-loading="formLoading" element-loading-text="Loading..."
							:form-data="formState.formData"
							:type="formType"
							:dict="formState.dict"
							request-url="getFormContent"
							add-url="saveFormContent"
							edit-url="editFormContent"
							:before-submit="beforeSubmit"
							:close-app-submit="closeAppSubmit"
							:change-key-val="changeKeyVal"
							:anew-submit = "anewSubmit"
							:save-edit-form-info="saveEditFormInfo"
							:send-draft-submit= "sendDraftSubmit"
						/>
						<el-divider v-if="logistrue" content-position="left">历史记录</el-divider>
						<el-timeline>
							<el-timeline-item v-if="newLogAry.length > 0" :timestamp="newLogAry.logTime" placement="top">
								<el-card>
									<el-descriptions
										direction="vertical"
										:column="4"
										size="24px"
										border
									>	
										<div  v-for="(item,index) in newLogAry"  :key="index">
											<el-descriptions-item v-if="!Array.isArray(item)&&index!='logTime'" :label="index">
												{{ item }}
											</el-descriptions-item>
											<el-descriptions-item v-if="Array.isArray(item)&&index!='logTime'" :label="index" span="4">
											
												<el-descriptions
													
													direction="vertical"
													:column="4"
													size="24px"
													border
												>
													<el-descriptions-item  v-for="(items,indexs) in item[0]" :key="indexs" :label="indexs">
														{{ items }}
													</el-descriptions-item>
												</el-descriptions>
												
											</el-descriptions-item>
											
										</div>
									</el-descriptions>

								</el-card>
							</el-timeline-item>
							
							<el-timeline-item v-for="itemss in oldLogAry" :key="itemss.id" :timestamp="itemss.logTime" placement="top">
								<el-card>
									<el-descriptions
										direction="vertical"
										:column="4"
										:size="24"
										border
									>	
										<div  v-for="(item,index) in itemss"  :key="index">
											<el-descriptions-item v-if="!Array.isArray(item)&&index!='logTime'" :label="index">
												{{ item }}
											</el-descriptions-item>
											<el-descriptions-item v-if="Array.isArray(item)&&index!='logTime'" :label="index" :span="4">
											
												<el-descriptions
													
													direction="vertical"
													:column="4"
													:size="24"
													border
												>
													<el-descriptions-item  v-for="(items,indexs) in item[0]" :key="indexs" :label="indexs">
														{{ items }}
													</el-descriptions-item>
												</el-descriptions>
												
											</el-descriptions-item>
											
										</div>
									</el-descriptions>
								</el-card>
							</el-timeline-item>
					
						</el-timeline>


					</div>
				
				</td>
				<td valign="top" width="350">
					<RunFlowStep ref="runstep" v-model:flowary="flowAry" :flow-key="props.flowLogInfo.flowkeys" :current-progress="currentProgress"  @updatelist="drawerBeforeClose" />
				</td>
			</tr>
		</table>
	</el-drawer>
</template>
<style  lang='scss' scoped>
.tableFlowBox{
	width: 100%;
	height: 100%;
	// background-color: #000000;
	.drawerFormBox{
		width: 100%;
		height: 100%;
		// background-color: #ff0000;
	}
}
.boxLeft{
	padding: 0 10px 0 15px;
	overflow: hidden;
	overflow-y: auto;
}
.flowBox{
	padding: 0 5px 0 10px;
}
.boxRight{
	overflow: hidden;
	overflow-y: auto;
	border-left: 1px solid #EEEEEE;
}
.approvalBoard{
	padding: 5px 10px;
	background-color: #FFFFFF;
	border-top: 1px solid #EEEEEE;
	.juzhong{
		padding: 10px 0;
		text-align: center;
	}
	.appBoardTitle{
		padding: 5px 0 10px 0;
		display: block;
	}
}
</style>
<style  lang='scss'>

.drawerClass ::v-deep.el-drawer__header {
        font-size: 22px;
        text-align: center;
        margin-bottom: 0px;
        padding: 0;
        .el-drawer__close-btn{
            background-color: rgb(255, 77, 79);
            color: white;
        }
    }
    ::v-deep .el-drawer__body {
        padding: 0px;
    }
    .details {
        width: 80%;
        margin-right: 0px;
        margin-left: 20%;
        box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    }
.drawerBody{
	padding: 20px;
	
}

</style>
