<template>
<l-fullscreen-dialog
    :title="`${$t('查看流程')}【${title}】`"
    :visible.sync="midVisible"
    :showOk="false"

    @closed="handleClosed"
    @opened="handleOpened"

    ref="formDialog"
    >
    <l-layout class="l-tab-page" :right="400">
        <l-panel :style="{ 'padding-right':userLogs.length >0?0:''}" >
            <div class="l-auto-window" style="padding: 0 8px;"  >
                <el-tabs v-model="activeName" @tab-click="handleTabClick" >
                    <el-tab-pane v-if="hasWfForm" :label="$t('表单信息')" name="form">
                        <div class="l-rblock" v-loading="formSchemeLoding">
                            <template v-if="showForm" >
                                <l-form-viewer 
                                    v-if="formType == '1'"
                                    :formInfo="formInfo"
                                    :isWfForm="true"
                                    :authFieldsMap="formAuthFieldsMap"
                                    ref="wfForm"
                                ></l-form-viewer>
                                <component ref="wfForm" v-else :requiredMap="formRequiredMap" :authFieldsMap="formAuthFieldsMap" :isWfForm="true" :is="sysFormComponent"></component>
                            </template>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane :label="$t('流程信息')" name="wfinfo">
                        <l-layout style="background: #f1f2f5;" :right="320">
                            <l-panel class="flow-panel" style="padding:0;padding-top:0;" >
                                <template #title>
                                    <el-button-group>
                                        <el-tooltip effect="dark" :content="$t('复原')" placement="bottom">
                                            <el-button  size="mini" icon="el-icon-aim" @click="resetZoom"></el-button>
                                        </el-tooltip>
                                        <el-tooltip effect="dark" :content="$t('放大')" placement="bottom">
                                            <el-button  size="mini" icon="el-icon-zoom-in" @click="handlerZoom(0.1)"></el-button>
                                        </el-tooltip>
                                        <el-tooltip effect="dark" :content="$t('缩小')" placement="bottom">
                                            <el-button  size="mini" icon="el-icon-zoom-out" @click="handlerZoom(-0.1)"></el-button>
                                        </el-tooltip>
                                    </el-button-group>

                                    <div style="float:right;" >
                                        <el-tag size="small" effect="plain" style="margin-right: 8px;">正在审核</el-tag>
                                        <el-tag size="small" effect="plain" style="margin-right: 8px;" type="success">已审核</el-tag>
                                    </div>
                                    
                                </template>
                                <b-wflow-viewer
                                    ref="bflow" 
                                    @elementClick="elementClick"
                                    >
                                </b-wflow-viewer>
                            </l-panel>
                            <template #right >
                                 <l-panel v-if="nodeLogs.length>0" class="flow-panel" style="padding:0;padding-top:0;" >
                                     <template #title >
                                         记录信息
                                     </template>
                                     <div class="l-rblock l-time-line-wraper" style="padding:8px;overflow:hidden auto;" >
                                        <el-timeline>
                                            <el-timeline-item :type="item.type" v-for="(item,index) in nodeLogs" :key="index" :timestamp="item.time" placement="top">
                                                <el-card shadow="hover">
                                                    <div class="title" >{{item.name}}</div>
                                                    <div class="content">
                                                        <l-user v-for="(userId,index2) in item.userIds"  :key="index2" :value="userId" ></l-user>
                                                        {{item.des}}
                                                    </div>
                                                </el-card>
                                            </el-timeline-item>
                                        </el-timeline>
                                    </div>
                                 </l-panel>
                            </template>
                        </l-layout>
                    </el-tab-pane>
                    <el-tab-pane :label="$t('流转记录')" name="wflogs">
                        <div class="l-rblock l-time-line-wraper" style="padding:8px;overflow:hidden auto;" >
                            <el-timeline>
                                <el-timeline-item :type="item.type" v-for="(item,index) in logs" :key="index" :timestamp="item.time" placement="top">
                                    <el-card shadow="hover">
                                        <div class="title" >{{item.name}}</div>
                                        <div class="content">
                                            <l-user v-for="(userId,index2) in item.userIds"  :key="index2" :value="userId" ></l-user>
                                            {{item.des}}
                                        </div>
                                    </el-card>
                                </el-timeline-item>
                            </el-timeline>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </l-panel>
         <template #right  >
            <l-panel v-if="userLogs.length >0" style="padding-left:0;" title="审批信息" >
                <div class="l-rblock" style="padding:8px;" >
                    <l-wf-audit-info :data="userLogs" ></l-wf-audit-info>
                </div>
            </l-panel>
        </template>
    </l-layout>
</l-fullscreen-dialog>
</template>

<script>
import mixin from '../../../mixins/wf'
export default {
    mixins:[mixin()],
    data () {
        return {
            midVisible:false,
        }
    },
    watch:{
        visible: {
            handler (n) {
                this.midVisible = n
            }
        },
    },
    methods:{
        resetZoom(){
            this.$refs.bflow.reset()
        },
        handlerZoom(r){
            this.$refs.bflow.handlerZoom(r)
        },
        elementClick(node){
            if(node){
                this.nodeLogs = this.nodeMap[node.id] || []
            }
            else{
                this.nodeLogs = []
            }
        },
        setForm(){
            if(this.type == 'look' && this.task)
            {
                this.currentNode = this.wfData.find(t=>t.id == this.task.f_UnitId)
                
            }
            else{
                this.currentNode = this.wfData.find(t=>t.type == 'startEvent')
            }
            
        }
    }
}
</script>