<template>
    <div>
        <!-- <div class="p" v-if="carddianShow">{{list.groupname}}{{list.departmentname}}定量考核</div>
        <div class="p2" v-if="cardShow">{{list.groupname}}{{list.departmentname}}定量考核</div> -->
        <div :style="'width:' + bianKuan + '%;margin: 0 auto;padding: 5px;'">
            <el-card :body-style="{ padding: '10px' }" class="box-card" style="margin-bottom: 10px;padding-top: 5px;padding-bottom: 5px;">
                <p class="xiao">审批编号：{{form.outid}}</p>
                <p class="da">
                    {{list.title}}
                </p>
            </el-card>
            <el-card v-if="carddianShow" class="box-card"  v-for="(item,index) in list.List" :key="index" style="margin-bottom: 10px;">
                <el-descriptions class="margin-top" :column="3" border>
                    <el-descriptions-item>
						<template slot="label">
							名称
						</template>
                        {{item.title}}
                    </el-descriptions-item>
					<el-descriptions-item>
						<template slot="label">
							零奖值
						</template>
					    {{item.zeroprize}}
					</el-descriptions-item>
					<el-descriptions-item>
						<template slot="label">
							全奖值
						</template>
					    {{item.allprize}}
					</el-descriptions-item>
					<el-descriptions-item>
						<template slot="label">
							实际值
						</template>
						{{item.Score}}
					</el-descriptions-item>
					<el-descriptions-item>
						<template slot="label">
							权重分
						</template>
						{{item.weight}}
					</el-descriptions-item>
					<el-descriptions-item>
						<template slot="label">
							封顶值
						</template>
					    {{item.CappingVal}}%
					</el-descriptions-item>
					<el-descriptions-item>
						<template slot="label">
							达成率
						</template>
					    {{item.achievement}}%
					</el-descriptions-item>
                    <el-descriptions-item>
						<template slot="label">
							指标得分
						</template>
						{{item.actual}}{{item.unit}}
                    </el-descriptions-item>
                    <el-descriptions-item>
						<template slot="label">
							说明
						</template>
						{{item.content}}
                    </el-descriptions-item>
                </el-descriptions>
            </el-card>
            <el-card v-if="cardShow" class="box-card" v-for="(item,index) in list.List" :key="index" style="margin-bottom: 10px;">
                <el-descriptions class="margin-top" :column="1">
                    <el-descriptions-item label="名称">{{item.title}}</el-descriptions-item>
					<el-descriptions-item label="零奖值">{{item.zeroprize}}</el-descriptions-item>
					<el-descriptions-item label="全奖值">{{item.allprize}}</el-descriptions-item>
					<el-descriptions-item label="封顶值">{{item.CappingVal}}%</el-descriptions-item>
					<el-descriptions-item label="实际值">{{item.Score}}</el-descriptions-item>
					<el-descriptions-item label="权重分">{{item.weight}}</el-descriptions-item>
					<el-descriptions-item label="达成率">{{item.achievement}}%</el-descriptions-item>
                    <el-descriptions-item label="指标得分">{{item.actual}}{{item.unit}}</el-descriptions-item>
                    <el-descriptions-item label="说明">{{item.content}}</el-descriptions-item>
                </el-descriptions>
            </el-card>
			
            <el-card class="box-card" style="margin-bottom: 130px;">
                <el-steps direction="vertical" :active="buzhou">
                    <el-step v-for="(item,index) in list.flowall" :key="index" :title="item.nodename" icon="el-icon-circle-check" > 
                        <template slot="description">
                            <div style="color: rgb(153,153,153);" v-for="(a,userlistIndex) in item.userlist" :key="userlistIndex">
                                        <el-row>
                                            <el-col :span="4" v-if="a.log!=null">
                                                <el-badge is-dot type="primary ">
                                                    <el-avatar style="margin-right: 5px;" shape="square" size="small" :src="a.icon"></el-avatar>
                                                </el-badge>
                                            </el-col>
                                            <el-col :span="4" v-else>
                                                <el-avatar style="margin-right: 5px;" shape="square" size="small" :src="a.icon"></el-avatar>
                                            </el-col>
                                            <el-col :span="20" style="margin-top: -5px;">
                                                {{a.workshopname}}-{{a.postname}}-{{a.name}}
                                                <el-row>
                                                    <div v-for="(i,logIndex) in a.log" :key="logIndex"  style="margin-top: -5px;">
                                                        <div class="left" v-if="i.state==2">已同意&nbsp·&nbsp</div>
                                                        <div class="left" v-if="i.state==1" type="info">未操作&nbsp·&nbsp</div>
                                                        <div class="left" v-if="i.state==3" type="danger">驳回&nbsp·&nbsp</div> 
                                                        <div class="left">{{i.time}}</div>
                                                    </div>
                                                </el-row>
                                            </el-col>
                                        </el-row>
                            </div>
                        </template>
                    </el-step>
                </el-steps>
                <!-- <el-steps direction="vertical" :active="buzhou">
                    <el-step v-for="(item,index) in list.flowall" :key="index" :title="item.nodename" icon="el-icon-circle-check" > 
                        <template slot="description">
                            <p style="color: rgb(153,153,153);" v-for="(a,index) in item.userlist" >
                                <el-avatar style="margin-right: 5px;" shape="square" size="small" :src="a.icon"></el-avatar>
                                {{a.workshopname}}-{{a.postname}}-{{a.name}}  
                                <template v-if="a.log!=null">
                                    <el-tag v-if="a.log.state==2">通过</el-tag>
                                    <el-tag v-if="a.log.state==1" type="info">未操作</el-tag>
                                    <el-tag v-if="a.log.state==3" type="danger">驳回</el-tag>
                                    <div>{{a.log.time}}</div>
                                </template>
                            </p>
                        </template>
                    </el-step>
                </el-steps> -->
            </el-card>
			<el-card class="box-card" style="position: fixed;bottom: 0;width: 100%;z-index: 1000;" v-if="list.isset==1">
			  <el-input
				style="margin-bottom:10px"
				type="textarea"
				autosize
				placeholder="请输入审批意见"
				v-model="opinionText">
			  </el-input>
			  <el-button type="primary" @click="xingOperation(1)" plain>同意</el-button>
			  <el-button type="danger" @click="xingOperation(2)" plain>驳回</el-button>
			</el-card>
            <!-- <el-timeline reverse="true">
                <el-timeline-item
                v-for="(item,index) in list.flowLog"
                :key="index"
                >
                 <el-card>
                    <h4>{{item.groupname}}</h4>
                    <p v-for="(a,index) in item.userlist">
                        {{a.name}}  {{a.timeval}}
                    </p>
                </el-card>
                </el-timeline-item>
            </el-timeline> -->
            <!-- <el-card style="margin-top: 25px" class="box-card" v-for="(item,index) in list.flowLog" :key="index">
                    <el-descriptions class="margin-top" :column="3" border>
                    <el-descriptions-item>
                    <template slot="label">
                        节点
                    </template>+
                    {{item.groupname}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        步骤
                    </template>
                    {{item.step}}
                </el-descriptions-item>
                <el-descriptions-item>
                <template slot="label">
                    状态
                </template>
                <div v-if="item.state==1">
                    未操作
                </div>
                <div v-if="item.state==2">
                    已操作
                </div>
                </el-descriptions-item>
                </el-descriptions>
            <el-table
                :data="item.userlist"
                border
                style="width: 100%">
                <el-table-column
                    prop="name"
                    label="姓名">
                </el-table-column>
                <el-table-column
                    prop="istrue"
                    label="操作">
                     <template #default="scope">
                        <div v-if="scope.row.istrue==1"><img width="20px" src="../../assets/duihao.png"></div>
                        <div v-if="scope.row.istrue==0"></div>
                     </template>
                </el-table-column>
                <el-table-column
                    prop="timeval"
                    label="操作时间">
                </el-table-column>
            </el-table>
            </el-card> -->
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return{
				opinionText:'',
                buzhou:0,
                carddianShow:false,
                cardShow:false,
                reverse: true,
                activities: [{
                content: '活动按期开始',
                }, {
                content: '创建成功',
                
                }],
                // 数据列表
                list:[],
                // 选择员工配置项
                userProps: {
                    value: "id",
                    label: "name",
                    children: "groupUser",
                    emitPath:false,
                    multiple: false
                },
                grouplistBackup:[],
                form:{
                    outid:'',
                },
                tableData:[
                    {
                      type:1,//类型
                      userkey:'',//人员
                      weight:''//比重
                    },
                ],
            }
        },
        created () {
			this.form.outid=this.$route.query.outid
			this.urlData=this.$route.query
			 this.getData()
            // if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
                
            //     setToken(this.$route.query.token)
            //     setKey(this.$route.query.key)
            //     if (getToken()=='') {
            //         window.location.href = 'https://www.hxgk.group/jumpapiurl/?url=http://new.hxgk.group&controll=quantitativeList&id='+this.$route.query.id;
            //     }else if (typeof this.$route.query.token === 'undefined') {
            //         window.location.href = 'https://www.hxgk.group/jumpapiurl/?url=http://new.hxgk.group&controll=quantitativeList&id='+this.$route.query.id;
            //     }else{
            //         this.form.outid=this.$route.query.id
                   
            //     }
                
            // }else{
            //     if (sessionStorage.getItem('userinfo')==null) {
            //    this.$router.push('/quantitativeListLogin?id='+this.$route.query.id)
            //     }else if (sessionStorage.getItem('userinfo')==undefined) {
            //         this.$router.push('/quantitativeListLogin?id='+this.$route.query.id)
            //     }else if (sessionStorage.getItem('userinfo')=='') {
            //         this.$router.push('/quantitativeListLogin?id='+this.$route.query.id)
            //     }else if (this.$store.state.user.token=='') {
            //     this.$router.push('/quantitativeListLogin?id='+this.$route.query.id)
            //     }else if (this.$store.state.user.token==null) {
            //         this.$router.push('/quantitativeListLogin?id='+this.$route.query.id)
            //     }else if (this.$store.state.user.token===undefined) {
            //         this.$router.push('/quantitativeListLogin?id='+this.$route.query.id)
            //     }else if (typeof this.$store.state.user.token=="undefined") {
            //         this.$router.push('/quantitativeListLogin?id='+this.$route.query.id)
            //     }else{
            //         this.form.outid=this.$route.query.id
            //       this.getData()
            //     }
            // } 

            if (document.body.clientWidth<1000) {
                this.bianKuan=100
                this.carddianShow=false
                this.cardShow=true
            }else{
                this.bianKuan=40
                this.carddianShow=true
                this.cardShow=false
            }
        },
        methods: {
			// 定量审核同意
			    async xingOperation(val){
			      // 同意
			      if (val==1) {
			        const from = {
			          orderid: this.form.outid, //审批单ID
			          yesorno: 1, //1：同意；2：驳回
			          content: this.opinionText //审批意见
			        }
					this.$u.api.Duty.sanction(from).then(res => {
						if(res.code==0){
							 this.$message({
							   type: 'success',
							   message: '成功!'
							 })
						}	
					})
			        
			          this.opinionText=''
					  this.getData()
			      }
			      // 驳回
			      if (val==2) {
			        const from = {
			          orderid: this.form.outid, //审批单ID
			          yesorno: 2, //1：同意；2：驳回
			          content: this.opinionText //审批意见
			        }
			       this.$u.api.Duty.sanction(from).then(res => {
			       	if(res.code==0){
			       		 this.$message({
			       		   type: 'success',
			       		   message: '成功!'
			       		 })
			       	}	
			       })
			          this.getData()
			          this.opinionText=''
			      }
			    },
            // 获取数据
           getData(){
              this.$u.api.Duty.lookrationkscoreflow(this.form).then(res => {
              	if(res.code==0){
              		this.list=res.data
					this.list.flowall.forEach(element => {
						if (element.state==2) {
							this.buzhou=this.buzhou+1
						}
					});
              	}
              		
              	})
           },
            
            // 删除行
            deleteRulesList(row){
                this.tableData.splice(row.$index,1);
            },
            // 数组加行
            jiaArr(){
                this.tableData.push({
                      type:'',//类型
                      userkey:'',//人员
                      weight:''//比重
                    })
            },
            
        }
    }
</script>

<style lang="scss" scoped>
	.recommendPage {
	  width: 100%;
	  height: 100%;
	}
	
.el-card__body{
    padding: 10px !important;
}
.form{
    width: 100%;
    margin: 0 auto;
}
.p{
    margin-bottom: 10px !important;
    margin-top: 20px !important;
    width: 330px;
    font-size: 30px;
    font-weight:bold;
    margin: 0 auto;
}
.p2{
    margin-bottom: 10px !important;
    margin-top: 20px !important;
    width: 270px;
    font-size: 24px;
    margin: 0 auto;
}
.xiao{
    color: rgb(174,174,174);
}
.da{
   font-size: 16px;
   font-weight:bold;
}
.left{
    float: left;
}
</style>