<!--
@ 作者: 秦东
@ 时间: 2024-11-19 09:50:45
@ 备注: 流程和历史记录
-->
<script lang='ts' setup>
import { gainRunFlowStart,gainRunTaskFlow,startRunFlow,runTaskFlow,afreshRunWorkflow } from '@/api/lowCode/taskapi/management'
import squareUrl from '@/assets/image/1.png'
const props = defineProps({
	types:{
        type:Number,
		default:1,
    },
    logList:{
		type:Object,
		default(){
			return {}
		}
	},
    appInfo:{
		type:Object,
		default(){
			return {}
		}
	},
    appPageInfo:{
		type:Object,
		default(){
			return {}
		}
	},
	appFlowInfo:{
		type:Object,
		default(){
			return {}
		}
	},
    stateForm:{
		type:Object,
		default(){
			return {}
		}
	}
    
});
const types = computed({
	get() {
		return props.types
	},
	set(val: number) {
		return val
	}
});
const pageLog = computed({
    get() {
        if(props.logList&&props.logList.length>0){
            return props.logList
        }else{
            return []
        }
		
	},
	set(val: number) {
		return val
	}
});

//工作流相关
const flowLoading = ref(false) //loading
const flowMap = ref<any[]>([]);			//工作流
const nextStep = ref<number>(0);
const currentProgress  = ref<number>(1);
const nodeKey = ref<string>('');
const ruleForm = ref();	//表单
const flowOpinion = ref(false) //是否可以写评论
const sendFlowInfo = ref<string>() //审批意见
const flowAndLog = ref<number>(1); //1：啥都有;2:只有流程；3：只有历史记录；4：啥都没有
const activeName = ref<string>("log")
onBeforeMount(() => {
    newAddPageData()
    
})

/**
@ 作者: 秦东
@ 时间: 2024-11-19 10:41:41
@ 功能: 新增时获取流程列表
*/
const newAddPageData = () => {
    flowLoading.value = true
    if(types.value == 1){
        // console.log("新增时获取流程列表",props.stateForm.flowIsTrue,props.stateForm.flowKey)
        if(props.stateForm&&props.stateForm.flowIsTrue&&props.stateForm.flowKey){
           
            gainRunFlowStart({id:props.stateForm.flowKey})
            .then(({data})=>{
                // console.log("获取流程==1==>",data)
                flowMap.value = data.flowList
                nextStep.value = data.nextStep
                currentProgress.value = data.Step
                nodeKey.value = data.nodeKey
                flowLoading.value = false;
                if(data.flowList&&data.flowList.length > 0){
                    activeName.value = "flow"
                }else{
                    activeName.value = "log"
                }
            })
        }
        
    }else{
        // console.log("获取流程==2=1=>",props.appPageInfo)
        if(props.appPageInfo && props.appPageInfo.runFlowId && props.appPageInfo.runFlowId != "0" && props.appPageInfo.runFlowId != ""){
            gainRunTaskFlow({id:props.appPageInfo.runFlowId})
                .then(({data})=>{
                    // console.log("获取流程==2==>",data)
                    flowMap.value = data.flowList
                    flowOpinion.value = data.operational
                    currentProgress.value = data.current_step
                    flowLoading.value = false;
                    if(data.flowList&&data.flowList.length > 0){
                        activeName.value = "flow"
                    }else{
                        activeName.value = "log"
                    }
                })
        }
        
    }
}

const handleClick = () => {

}
/**
@ 作者: 秦东
@ 时间: 2024-11-20 13:28:04
@ 功能: 启动流程
*/
const runWorkFlow = (val:any) => {
    // console.log("启动流程--------1---------->",val)
    let sendInfo ={
		id:val.uuid,
		flowList:flowMap.value,
		state:3
	}
    startRunFlow(sendInfo)
        .then((data:any)=>{
			// console.log("流程提交成功--------1---------->",data)
		})
}
/**
@ 作者: 秦东
@ 时间: 2024-11-21 16:26:52
@ 功能: 草稿箱建立流程
*/
const rundraftWorkFlow = (val:any) => {
    // console.log("启动流程--------2---------->",val,val.data)
    let sendInfo ={
		id:val.data.uuid,
		flowList:flowMap.value,
		state:1
	}
    // console.log("流程提交成功--------3---------->",sendInfo)
    startRunFlow(sendInfo)
        .then((data:any)=>{
			// console.log("流程提交成功--------2---------->",data)
		})
}
/**
@ 作者: 秦东
@ 时间: 2024-11-21 15:14:54
@ 功能: 重新发起流程
*/
const reapplyWorkFlow = (val:any) => {
    // console.log("重新发起流程--------2---------->",val)
    if(val.data.runFlowId != "0" && val.data.runFlowId != ""){
        afreshRunWorkflow({ id: val.data.runFlowId })
        .then((data:any)=>{
			// console.log("流程提交成功--------1---------->",data)
		})
    }else{

    }
    
}

/**
@ 作者: 秦东
@ 时间: 2024-11-20 15:44:03
@ 功能: 提交审批
*/
const yesOrNo = (val:string,agreeOrRefuse:number) => {
    let sendInfo = {
		id:props.appPageInfo.runFlowId,
		agreeOrRefuse:agreeOrRefuse,
		suggest:sendFlowInfo.value,
		flowlist:flowMap.value
	}
    runTaskFlow(sendInfo)
		.then((data:any)=>{

			// console.log("提交审批----22222->",data)
			ElMessage({
				message: '处理完成！',
				type: 'success'
			})

		})
		.finally(()=>{
			newAddPageData();
		})
}


defineExpose({
    runWorkFlow,
    reapplyWorkFlow,
    rundraftWorkFlow
})
</script>
<template>
    <div>
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane v-if="flowMap&&flowMap.length > 0" label="审批流程" name="flow">
                
                <el-steps direction="vertical" :active="currentProgress">
                    <el-step v-for="item in flowMap" :key="item.step">
                        <template #title>
                            {{ item.nodeName }}<span v-if="item.examinemode==1"> ● 依次审批</span><span v-if="item.examinemode==2"> ● 会签</span><span v-if="item.examinemode==3"> ● 或签</span>
                            <el-tooltip
                                v-if="item.helpTips!=''&&item.helpTips!='<p><br></p>'"
                                :content="item.helpTips"
                                raw-content
                                effect="light"
                            >
                                <i class="fa fa-question-circle-o"></i>
                            </el-tooltip>
                        </template>
                        <template  #description>
                        <div class="logCards">
                            <table>
                                <tbody>
                                    <tr  v-for="items in item.operator" :key="items.id">
                                        <td  valign="top" align="center" width="50">
                                            <el-avatar v-if="items.iconbase64==''&&items.icon!=''" shape="square" fit="cover" :src="items.icon" />
                                            <el-avatar v-else-if="items.iconbase64!=''" shape="square" fit="cover" :src="items.iconbase64" />
                                            <el-avatar v-else shape="square" fit="cover" :src="squareUrl" />
                                        </td>
                                        <td  valign="top" align="left">
                                            <el-row>
                                                <el-col :span="24">
                                                    <el-text>{{ items.departmentname }}</el-text>
                                                    <el-text><span v-if="items.departmentname"> - </span>{{ items.postname }}</el-text>
                                                    <el-text><span v-if="items.departmentname||items.postname"> - </span>{{ items.name }}</el-text>
                                                </el-col>
                                                <el-col :span="24">
                                                    <ul>
                                                        <li v-for="(logItem,logIndex) in items.log" :key="logIndex" class="logLi">
                                                            <el-text v-if="logItem.state==2" type="success">
                                                                <span v-if="logItem.cause">{{logItem.cause}}</span><span v-else>已同意</span>
                                                            </el-text>
                                                            <el-text v-else-if="logItem.state==3" type="danger">
                                                                <span v-if="logItem.cause">{{logItem.cause}}</span><span v-else>已驳回</span>
                                                            </el-text>
                                                            <el-text v-else>
                                                                <span v-if="logItem.cause">{{logItem.cause}}</span><span v-else>未操作</span>
                                                            </el-text> · {{ logItem.time }}
                                                        </li>
                                                    </ul>
                                                </el-col>
                                            </el-row>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div  v-if="item.judgelist"  class="addUser" @click="addPeople(item)">
                                                <svg-icon icon-class="addxuxian" size="50" />
                                            </div>
                                        </td>
                                        <td></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        </template>
                    </el-step>
                </el-steps>
                <el-affix v-if="flowOpinion"  position="bottom" :offset="0">
                    <div class="approvalBoard">
                        <el-text size="large" class="appBoardTitle">审批意见</el-text>
                            <el-row :gutter="20">
                            <el-col :span="24">
                                <el-input
                                    v-model="sendFlowInfo"
                                    :autosize="{ minRows: 2, maxRows: 6 }"
                                    type="textarea"
                                    placeholder="请输入审批意见"
                                />
                            </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="4"></el-col>
                                <el-col :span="8" class="juzhong"><el-button type="primary" style="width:100%" @click="yesOrNo(props.flowKey,1)">同意</el-button></el-col>
                                <el-col :span="8" class="juzhong"><el-button type="danger" style="width:100%" @click="yesOrNo(props.flowKey,2)">驳回</el-button></el-col>
                                <el-col :span="4"></el-col>
                            </el-row>
                    </div>
                </el-affix>
            </el-tab-pane>
            <el-tab-pane v-if="pageLog&&pageLog.length > 0" label="修改记录" name="log">
            
                <el-timeline>
                    <el-timeline-item v-for="(item,index) in pageLog" :key="index" :timestamp="item.time+' 操作人：'+item.creater" placement="top">
                        <el-card class="logCard">
                            <table  cellspacing="0"  bgcolor="#EBEEF5">
                                <tbody>
                                    <tr  v-for="(mastItem,mastIndex) in item.masterdata" :key="mastIndex">
                                        <td class="biankuang" width="100" bgcolor="#F5F7FA">{{mastItem.label}}：</td>
                                        <td class="biankuang" bgcolor="#FFFFFF">{{mastItem.value}}</td>
                                    </tr>
                                </tbody>
							</table>
                            <el-tabs v-if="item.sunData" type="border-card" style="margin-top:20px;">
                                <el-tab-pane v-for="(sonItem,sonIndex) in item.sunData" :label="sonIndex" :key="sonIndex">
                                    <el-card  v-for="(sunItem,sunIndex) in sonItem" :key="sunIndex" class="logCard">
                                        <table  cellspacing="0"  bgcolor="#EBEEF5">
                                            <tbody>
                                                <tr  v-for="(mastSununItem,mastSunIndex) in sunItem" :key="mastSunIndex">
                                                    <td class="biankuang" width="100" bgcolor="#F5F7FA">{{mastSununItem.label}}：</td>
                                                    <td class="biankuang" bgcolor="#FFFFFF">{{mastSununItem.value}}</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </el-card>
                                </el-tab-pane>
                            </el-tabs>
                            <table v-if="item.explicate" style="margin-top:20px;">
                                <tbody>
                                    <tr>
                                        <td class="biankuang" width="100">修改说明：</td>
                                        <td class="biankuang">{{item.explicate}}</td>
                                    </tr>
                                </tbody>
							</table>
                        </el-card>
                        
                    </el-timeline-item>
                </el-timeline>

            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<style  lang='scss' scoped>
.logCard{
    table {
        width: 100%;
        margin: 0;
        border: 1px solid #EBEEF5;
        border-collapse: collapse;
    }
    
    th,
    td {
        border: 1px solid #EBEEF5;
        text-align: left;
        padding: 0.5em;
        vertical-align: top;
    }
    :deep .el-tabs__content{
        padding: 5px;
    }
}
.logCards{
    td {
        vertical-align: top;
    }
}
.approvalBoard{

	background-color: #FFFFFF;
	border-top: 1px solid #EBEEF5;
	.juzhong{
		padding: 10px 0;
		text-align: center;
	}
	.appBoardTitle{
		padding: 5px 0 10px 0;
		display: block;
	}
}
</style>