<template>
  <div v-wechat-title="$route.meta.title" style="height:100%;background-color:#FAFAFA;">
    <div style="height:1px;"></div>    
        <div class="housebackgroundcolor">
             <div class="houselist" >
                <Icon @click="openMain" size="18" style="color:#fff;float:right;margin-right:10px;" type="md-home" />
            </div>
            <hr style="border:0.5px solid #DDDDDD;" align="center">
        </div>
        <div :style="model1==1?'background-color:#fff;color:blue;':''" class="headdoneheadd">
            <p @click="model1 = 1" :style="model1==1?'color:blue;':'color:black;'" class="headdtwo">业务</p>
            <hr :style="model1==1?'border:0.5px solid blue;':'display:none;'" align="center">
        </div>
        <div :style="model1==2?'background-color:#fff;color:blue;':''" class="headdoneheadd">
            <p @click="model1 = 2" :style="model1==2?'color:blue;':'color:black;'" class="headdtwo">意见</p>
            <hr :style="model1==2?'border:0.5px solid blue;':'display:none;'" align="center">
        </div>
        <div :style="model1==3?'background-color:#fff;color:blue;':''" class="headdoneheadd">
            <p @click="model1 = 3" :style="model1==3?'color:blue;':'color:black;'" class="headdtwo">流向</p>
            <hr :style="model1==3?'border:0.5px solid blue;':'display:none;'" align="center">
        </div>
        <div :style="model1==4?'background-color:#fff;color:blue;':''" class="headdoneheadd">
            <p @click="model1 = 4" :style="model1==4?'color:blue;':'color:black;'" class="headdtwo">附件</p>
            <hr :style="model1==4?'border:0.5px solid blue;':'display:none;'" align="center">
        </div>
        <Button :style="modal3?'margin:0px 0px 10px 0px;height:40px;':'display:none;'" @click="openQainShou" type="primary" long>签收</Button>
        <ButtonGroup :style="modal3?'display:none;':'width:100%;margin:0px 0px 10px 0px;'">
            <Button @click="openReturn" :style="modal7?'width:50%;height:40px;':'display:none;'" type="primary">
                <Icon type="ios-arrow-back" />
                退回
            </Button>
            <Button @click="openSend" :style="modal4?'width:50%;height:40px;':'display:none;'" type="success">
                发送
                <Icon type="ios-arrow-forward" />
            </Button>
            <Button @click="openFinishVisible" :style="modal5?'width:50%;height:40px;':'display:none;'" type="success">
                结束
                <Icon type="ios-arrow-forward" />
            </Button>
            <Button @click="openTaskFinishVisible" :style="modal6?'width:50%;height:40px;':'display:none;'" type="success">
                完成
            <Icon type="ios-arrow-forward" />
            </Button>
        </ButtonGroup>
        <!--业务-->
        <div :style="model1==1?'':'display:none;'">
            <iframe :src="pSrc" height="560" width="100%"></iframe>
            
        </div>
        <!-- 意见 -->
        <div :style="model1==2?'':'display:none;'">
            <Timeline style="margin:0px 0px 0px 34px;">
                 <TimelineItem color="green" v-for="i in detauils" :key="i.id">
                    <Icon type="md-cube" slot="dot"></Icon>
                    <Card style="width:95%;" shadow>
                        <span style="font-weight:bold;font-size:13px;width:50%;color:black;">{{i.opinionText}}</span>&nbsp;
                        <br>
                        <span style="font-size:11px;">{{i.actUserName}}</span>&nbsp;
                        <span style="font-size:11px;">{{i.taskActorName}}</span>&nbsp;
                        <br>
                        <span style="float:right;font-size:11px;"><Icon type="md-clock" style="margin-right:2px;"/>{{i.opinionDate}}</span>&nbsp;
                    </Card>
                </TimelineItem>
            </Timeline>
        </div>
        <!-- 流向 -->
        <div :style="model1==3?'':'display:none;'">
            <Timeline style="margin:0px 0px 0px 34px;">
                <TimelineItem color="green" v-for="i in directions" :key="i.id">
                    <Icon type="md-arrow-down" slot="dot"></Icon>
                    <Card style="width:95%;" shadow>
                        <span style="font-weight:bold;font-size:13px;width:50%;color:black;">{{i.toTaskName}}</span>&nbsp;
                        <br>
                        <span style="font-size:11px;">{{i.actUserName}}</span>&nbsp;
                        <span style="font-size:11px;">{{i.statusName}}</span>&nbsp;
                        <br>
                        <span style="float:right;font-size:11px;"><Icon type="md-clock" style="margin-right:2px;"/>{{i.finishDate}}</span>&nbsp;
                    </Card>
                </TimelineItem>
             </Timeline>
        </div>
        <!--附件 -->
        <div :style="model1==4?'':'display:none;'">
            <Timeline style="margin:0px 0px 0px 34px;">
                <TimelineItem color="green" v-for="i in files" :key="i.id">
                    <Icon type="md-document" slot="dot"></Icon>
                    <Card style="width:95%;" shadow>
                        <span style="font-weight:bold;font-size:16px;width:50%;color:black;">{{i.filename}}</span>
                        
                    </Card>
                </TimelineItem>
             </Timeline>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            modal3:false,
            modal4:false,
            modal5:false,
            modal6:false,
            modal7:false,
            model1:1,
            user:JSON.parse(sessionStorage.getItem('usercode')),
            code:JSON.parse(sessionStorage.getItem('actCode')),
            userid:JSON.parse(sessionStorage.getItem('userid')),
            detauils:[],
            directions:[],
            files:[],
            pSrc:'',
            opinionText:'',
            pdfs:'',
        }
    },
    created() {
        if(this.user==null){
            this.$router.push('/');
            return;
        }
        if(this.code==null){
            this.$router.push('daiban');
            return;
        }
        

        this.$store.dispatch('GetWorkFlowFile',this.code).then(rfile=>{
            let count0 =1;
            for (let i of rfile){
                let a = {
                    id:count0,
                    filename:i.filename,
                    
                    filecontenttype:i.filecontenttype,

                }
                count0 ++;
                this.files.push(a);
            }

        })


        let FWQ ={
            taskActorName:'第三方注册系统编码',
            actUserName:'调取地产云地址',
            opinionDate:'PDF地址',
            opinionConfirm:'',
            opinionText:'Web接口',
        };
        this.$store.dispatch('GetSystemURL',FWQ).then(r=>{
            this.opinionText = r.opinionText;
            this.pdfs = r.opinionDate;
            this.$axios({
                url:this.opinionText+"/GetWorkFlowPage?userCode="+this.user+"&actCode="+this.code,
                method:'get',
                //发送格式为json
                headers:{
                'Content-Type': 'application/json'
                }
            }).then(r=>{
                this.pSrc = 'pdf/web/viewer.html?file=/' + this.pdfs+'/'+ r.data.data.pdfUrl//跨域加载pdf文件
                if(r.data.data.toolbar.signInVisible){
                    this.modal3 = true;
                }
                //校验退回按钮
                if(r.data.data.toolbar.backVisible){
                    this.modal7 = true;
                }
                // 校验发送按钮
                if(r.data.data.toolbar.sendVisible){
                    this.modal4 = true;
                }
                // 校验结束按钮
                if(r.data.data.toolbar.finishVisible){
                    this.modal5 = true;
                }
                // 校验完成按钮
                if(r.data.data.toolbar.taskFinishVisible){
                    this.modal6 = true;
                }
                let count = 1;
                for(let i of r.data.data.opinions){
                    let a={
                        id:count,
                        actUserName:i.actUserName,
                        taskActorName:i.taskActorName,
                        opinionDate:i.opinionDate,
                        opinionText:i.opinionText,
                    }
                    count ++;
                    this.detauils.push(a)
                }
                let count1 = 1;
                for(let i of r.data.data.directions){
                    let a={
                        id:count1,
                        toTaskName:i.toTaskName,
                        statusName:i.statusName,
                        actUserName:i.actUserName,
                        finishDate:i.finishDate,
                    }
                    count1 ++;
                    this.directions.push(a)
                }
                sessionStorage.setItem('pname',JSON.stringify(r.data.data.procedureName));
                sessionStorage.setItem('flowNumber',JSON.stringify(r.data.data.flowNumber));
            })
        })
    },
    methods: {
        //返回主页面
        openMain(){
            this.$router.push('/main');
        },
         //打开完成
        openTaskFinishVisible(){
            this.$router.push('/taskFinishVisible');
        },
        //结束
        openFinishVisible(){
            this.$router.push('/finishVisible');
        },
        //发送
        openSend(){
            this.$router.push('/send');
        },
        //退回
        openReturn(){
            this.$router.push('/continue');
        },
        //待办签收事件,调用签收接口
        openQainShou(){
            this.$axios({
                url: this.opinionText+"/WorkFlowSignIn?userCode="+this.user+"&actCode="+this.code,
                method:'get',
                //发送格式为json
                headers:{
                'Content-Type': 'application/json'
                }
            }).then(r=>{
               if(r.data.msg=='签收成功'){
                    this.$Message.success(r.data.msg);
                    this.$router.push('/zaibandetauils');
                }
                else{
                    this.$Message.error(r.data.msg);
                }
            })            
        }
    },
}
</script>

<style>
    .housebackgroundcolor{
    background-color:rgb(55, 150, 223);
    }
    .housebackgroundcolor:hover{
    cursor: pointer;  
    }
    .houselist{
    padding:13px 0px 0px 10px;height:45px;font-size:13px;
    }
    .headdoneheadd{
    width:25%;display: inline-block;text-align:center;height:40px;
    }
    .headdtwo:hover{
    cursor: pointer;
    }
    .headdtwo{
    margin:10px 0px 10px 0px;font-weight:bold;
    }
    .bodyone{
        padding:10px 0px 0px 10px;font-weight:bold;font-size:15px;
    }
    .bodyone:hover{
        cursor: pointer;
    }
</style>
