<template>
    <div style="background-color:rgb(242,244,246)">
        <!-- <div class="p2" v-if="cardShow">定性考核审批</div> -->
        <div :style="'width:' + bianKuan + '%;margin: 0 auto;padding: 5px;'">
            <el-card class="box-card1" style="margin-bottom: 10px;" :body-style="{ padding: '10px' }">
                <p class="xiao">审批编号：{{list.orderid}}</p>
                <p class="da">
                    {{list.title}}
                </p>
            </el-card>
            <el-card class="box-card" v-if="carddianShow" style="margin-bottom: 10px;">
                <el-descriptions class="margin-top" :column="1" border>
                    <el-descriptions-item>
                        <template slot="label" width='85'>
                            考核纬度
                        </template>
                        {{list.dimension}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                    <template slot="label">
                        考核指标
                    </template>
                    {{list.target}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                        考核项目
                        </template>
                    {{list.targetsun}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            考核内容
                        </template>
                    {{list.detailedtargent}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            考核标准
                        </template>
                    {{list.content}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                    <template slot="label">
                        {{list.lanmuname}}
                    </template>
                    {{list.reasoninfo}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                    <template slot="label">
                        考核原因
                    </template>
                    {{list.reason}}
                    </el-descriptions-item>
                </el-descriptions>
                <el-carousel v-if="imgList.length!=0" type="card" height="100px" :autoplay="false">
                    <el-carousel-item v-for="(img,index) in imgList" :key="index">
                     <el-image 
                        style="width: 100px; height: 100px;"
                        :src="img" 
                        :preview-src-list="imgList">
                        </el-image>
                    </el-carousel-item>
                </el-carousel>
                    <el-row v-for="(itema,index) in list.enclosure" :key="index">
                        <el-col :span="24" v-if="itema.type!=1" style="margin-top: 10px;">
                            <i class="el-icon-document"></i>
                            <a :href="itema.filepath" :download="itema.filename">{{itema.filename}}</a>
                        </el-col>
                    </el-row>
            </el-card>
            <el-card class="box-card font" v-if="cardShow" style="margin-bottom: 10px;">
                <el-row class="bottom">
                    <el-col :span="6">考核纬度:</el-col>
                    <el-col :span="18">{{list.dimension}}</el-col>
                </el-row>
                <el-row class="bottom">
                    <el-col :span="6">考核指标:</el-col>
                    <el-col :span="18">{{list.target}}</el-col>
                </el-row>
                <el-row class="bottom">
                    <el-col :span="6">考核项目:</el-col>
                    <el-col :span="18">{{list.targetsun}}</el-col>
                </el-row>
                <el-row class="bottom">
                    <el-col :span="6">考核内容:</el-col>
                    <el-col :span="18">{{list.detailedtargent}}</el-col>
                </el-row>
                <el-row class="bottom">
                    <el-col :span="6">考核标准:</el-col>
                    <el-col :span="18">{{list.content}}</el-col>
                </el-row>
                <el-row class="bottom">
                    <el-col :span="6">{{list.lanmuname}}:</el-col>
                    <el-col :span="18">{{list.reasoninfo}}</el-col>
                    <!-- <el-col>{{list.reasoninfo}}</el-col> -->
                    <!-- <el-col :span="19"></el-col> -->
                </el-row>
                <el-row class="bottom">
                    <el-col :span="6">考核原因:</el-col>
                    <el-col :span="18">{{list.reason}}</el-col>
                </el-row>
                <el-carousel v-if="imgList.length!=0" type="card" height="100px" :autoplay="false">
                    <el-carousel-item v-for="(img,index) in imgList" :key="index">
                     <el-image 
                        style="width: 100px; height: 100px;"
                        :src="img" 
                        :preview-src-list="imgList">
                        </el-image>
                    </el-carousel-item>
                </el-carousel>
                    <el-row v-for="(itema,index) in list.enclosure" :key="index">
                        <el-col :span="24" v-if="itema.type!=1" style="margin-top: 10px;">
                            <i class="el-icon-document"></i>
                            <a :href="itema.filepath" :download="itema.filename">{{itema.filename}}</a>
                        </el-col>
                    </el-row>
                <!-- <el-descriptions class="margin-top" :column="1">
                    <el-descriptions-item label="考核纬度">{{list.dimension}}</el-descriptions-item>
                    <el-descriptions-item label="考核指标">{{list.target}}</el-descriptions-item>
                    <el-descriptions-item label="考核项目">{{list.targetsun}}</el-descriptions-item>
                    <el-descriptions-item label="考核内容">{{list.detailedtargent}}</el-descriptions-item>
                    <el-descriptions-item label="考核标准">{{list.content}}</el-descriptions-item>
                    <el-descriptions-item label="操作">{{list.reasoninfo}}</el-descriptions-item>
                    <el-descriptions-item label="考核原因">{{list.reason}}</el-descriptions-item>
                </el-descriptions> -->
            </el-card>
            <el-card class="box-card" style="margin-bottom: 10px;" v-if="list.divresbil!=null">
                 <div slot="header" class="clearfix">
                    <span>责任划分</span>
                </div>
                <el-descriptions style="border-bottom: 1px solid #EBEEF5;margin-top:10px" class="margin-top font" :column="1" v-for="(item,index) in list.divresbil" :key="index">
                    <el-descriptions-item label="责任类型">{{item.type}}</el-descriptions-item>
                    <el-descriptions-item label="姓名">{{item.username}}</el-descriptions-item>
                    <el-descriptions-item label="比重">{{item.weight}}</el-descriptions-item>
                </el-descriptions>
            </el-card>
            <!-- <el-card class="box-card" style="margin-bottom: 10px;" v-if="list.enclosure!=null">
                 <div slot="header" class="clearfix">
                    <span>附件</span>
                </div>
                
                <el-carousel type="card" height="100px" :autoplay="false">
                    <el-carousel-item v-for="(img,index) in imgList" :key="index">
                     <el-image 
                        style="width: 100px; height: 100px;"
                        :src="img" 
                        :preview-src-list="imgList">
                        </el-image>
                    </el-carousel-item>
                </el-carousel>
                    <el-row v-for="(itema,index) in list.enclosure" :key="index">
                        <el-col :span="24" v-if="itema.type!=1" style="margin-top: 10px;">
                            <i class="el-icon-document"></i>
                            <a :href="itema.filepath" :download="itema.filename">{{itema.filename}}</a>
                        </el-col>
                    </el-row>
            </el-card> -->
            <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
            <el-card class="box-card" v-for="(item,index) in list.rectifmeasures" :key="index" style="margin-bottom: 10px;">
                 <div slot="header" class="clearfix">
                    <span>整改措施</span>
                </div>
                <el-descriptions class="margin-top font" :column="1">
                    <el-descriptions-item label="姓名">{{item.recname}}</el-descriptions-item>
                    <el-descriptions-item label="内容">{{item.reccont}}</el-descriptions-item>
                    <el-descriptions-item label="时间">{{item.timeval}}</el-descriptions-item>
                    <el-carousel v-if="imgList.length!=0" type="card" height="100px" :autoplay="false">
                        <el-carousel-item v-for="(img,index) in item.enclosure" :key="index">
                        <el-image 
                            v-if="img.type==1"
                            style="width: 100px; height: 100px;"
                            :src="img.filepath" 
                            :preview-src-list="item.enclosure">
                            </el-image>
                        </el-carousel-item>
                    </el-carousel>
                    <el-row v-for="(itema,index) in item.enclosure" :key="index">
                        <el-col :span="24" v-if="itema.type!=1" style="margin-top: 10px;">
                            <i class="el-icon-document"></i>
                            <a :href="itema.filepath" :download="itema.filename">{{itema.filename}}</a>
                        </el-col>
                    </el-row>
                </el-descriptions>
            </el-card>
            <!-- <el-table
                :data="list.divresbil"
                border
                style="width: 100%">
                <el-table-column
                    prop="type"
                    label="责任类型">
                </el-table-column>
                <el-table-column
                    prop="username"
                    label="姓名">
                </el-table-column>
                <el-table-column
                    prop="weight"
                    label="比重">
                </el-table-column>
            </el-table> -->
            <!-- <div v-for="(item,index) in list.TechnologicalProcess">
                <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>
            </div> -->
            <!--  -->
            <el-card class="box-card" style="margin-bottom: 130px;">
                
                <el-steps direction="vertical" :active="buzhou">
                    <el-step v-for="(item,index) in list.flowmapall" :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 style="margin-bottom: 10px;">
                                            <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>  
                                        
                                        <!-- {{userlist.log}} -->
                                           
                                        <!-- <div class="left">
                                            <el-avatar style="margin-right: 5px;" shape="square" size="small" :src="a.icon"></el-avatar>
                                        </div>
                                        
                                        
                                        <div class="left">{{a.workshopname}}-{{a.postname}}-{{a.name}}  </div>
                                        
                                    
                                        <div class="left" v-for="(i,logIndex) in a.log">
                                            <el-tag v-if="i.state==2">通过</el-tag>
                                            <el-tag v-if="i.state==1" type="info">未操作</el-tag>
                                            <el-tag v-if="i.state==3" type="danger">驳回</el-tag>
                                            <div>{{i.time}}</div>
                                        </div> -->
                                    
                                
                                
                                <!-- <template v-if="a.log!=null">
                                    <div v-for="(i,logIndex) in a.log">
                                        <el-tag v-if="i.state==2">通过</el-tag>
                                        <el-tag v-if="i.state==1" type="info">未操作</el-tag>
                                        <el-tag v-if="i.state==3" type="danger">驳回</el-tag>
                                    <div>{{i.time}}</div>
                                    </div>
                                </template> -->
                                
                                <!-- <el-tag v-if="a.log!=null||a.log.state==1" type="info">未操作</el-tag>
                                <el-tag v-if="a.log!=null||a.log.state==3" type="danger">驳回</el-tag> -->
                                <!-- <div>{{}}</div> -->
                            </div>
                        </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-table
                :data="list.rectifmeasures"
                border
                style="width: 100%">
                <el-table-column
                    prop="recname"
                    label="姓名">
                </el-table-column>
                <el-table-column
                    prop="reccont"
                    label="操作">
                </el-table-column>
                <el-table-column
                    prop="timeval"
                    label="时间">
                </el-table-column>
            </el-table> -->
            
        </div>
        
        
    </div>
</template>

<script>
import { getToken, setToken, removeToken,setKey } from '@/utils/auth'
import { getgroupuser,adddivisionresponsibility,addcorrectivemeasures,lookdutkscoreflow,operation } from '@/api/dutys'
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
    export default {
        components: {
            swiper,
            swiperSlide
        },
        data() {
            return{
                // 审批意见
				opinionText:'',
                swiperOption: {
                    // slidesPerView: 1,
                    loop: true, // 循环模式
                    autoplay: {
                    delay: 3000,
                    stopOnLastSlide: false,
                    disableOnInteraction: false
                    },
                    speed: 2000,
                    // effect: 'fade',
                // 显示分页
                pagination: {
                    el: ".swiper-pagination",
                    clickable: true //允许分页点击跳转
                },
                // 设置点击箭头
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev"
                },
                },
                imgList:[],
                dialogImageUrl: '',
                dialogVisible: false,
                disabled: false,
                // 步骤显示
                buzhou:0,
                carddianShow:false,
                cardShow:false,
                // 数据列表
                list:[],
                // 选择员工配置项
                userProps: {
                    value: "id",
                    label: "name",
                    children: "groupUser",
                    emitPath:false,
                    multiple: false
                },
                grouplistBackup:[],
                form:{
                    outid:'',
                },
                tableData:[
                    {
                      type:1,//类型
                      userkey:'',//人员
                      weight:''//比重
                    },
                ],
            }
        },
        computed: {
            swiper() {
            return this.$refs.mySwiper.swiper;
            }
        },
        created () {
            var jumpId=this.$route.query.id

            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=approvalList&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=approvalList&id='+this.$route.query.id;
                }else{
                    this.form.outid=this.$route.query.id
                    this.getData()
                }
            }else{
                if (this.$route.query.token=='') {
                    this.jump(jumpId)
                }else if (this.$route.query.token==null) {
                    this.jump(jumpId)
                }else if (this.$route.query.token===undefined) {
                    this.jump(jumpId)
                }else if (this.$route.query.token=="undefined") {
                    this.jump(jumpId)
                }else{
                    this.form.outid=this.$route.query.id
                    this.getData()
                }
            } 
            
            // if (sessionStorage.getItem('userinfo')==null) {
            //    this.$router.push('/dingxingLogin?id='+this.$route.query.id)
            //     }
            //     if (sessionStorage.getItem('userinfo')==undefined) {
            //         this.$router.push('/dingxingLogin?id='+this.$route.query.id)
            //     }
            //     if (sessionStorage.getItem('userinfo')=='') {
            //         this.$router.push('/dingxingLogin?id='+this.$route.query.id)
            //     }
            //     if (this.$store.state.user.token=='') {
            //     this.$router.push('/dingxingLogin?id='+this.$route.query.id)
            //     }
            //     if (this.$store.state.user.token==null) {
            //         this.$router.push('/dingxingLogin?id='+this.$route.query.id)
            //     }
            //     if (this.$store.state.user.token===undefined) {
            //         this.$router.push('/dingxingLogin?id='+this.$route.query.id)
            //         }
            //     if (typeof this.$store.state.user.token=="undefined") {
            //         this.$router.push('/dingxingLogin?id='+this.$route.query.id)
            //     }
                 
            //  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: {
            jump(jumpId){
                
                window.location.href='https://open.weixin.qq.com/connect/oauth2/authorize?appid=ww02f310301953277a&redirect_uri=https%3A%2F%2Fwww.hxgk.group%2Fjumpapiurl%2Fscancode%3Fcontroll%3DapprovalList%26id%3D'+jumpId+'%26num%3D0%26istrue%3D2&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect'
            },
            // 定性审核同意
            async xingOperation(val){
            // 同意
            if (val==1) {
                const from = {
                orderid: this.list.orderid, //审批单ID
                yesorno: 1, //1：同意；2：驳回
                content: this.opinionText //审批意见
                }
                const res = await operation(from)
                if (res.code === 0) {
                    this.$message({
                    type: 'success',
                    message: '成功!'
                    })
                }
                this.getData()
                this.opinionText=''
            }
            // 驳回
            if (val==2) {
                const from = {
                orderid: this.list.orderid, //审批单ID
                yesorno: 2, //1：同意；2：驳回
                content: this.opinionText //审批意见
                }
                const res = await operation(from)
                if (res.code === 0) {
                    this.$message({
                    type: 'success',
                    message: '成功!'
                    })
                }
                this.getData()
                this.opinionText=''
            }
            },
            handleRemove(file) {
                console.log(file);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            handleDownload(file) {
                console.log(file);
            },
            // 获取数据
            async getData(){
                this.buzhou=0
                const res = await lookdutkscoreflow(this.form)
                this.list=res.data
                this.list.flowmapall.forEach(element => {
                    if (element.state==2) {
                        this.buzhou=this.buzhou+1
                    }
                });
                this.list.enclosure.forEach(element => {
                    if (element.type==1) {
                        this.imgList.push(element.filepath)
                        
                    }
                });
                //  this.list.flowmapall.forEach(function(element) {
                //         if (element.userlist!=null) {
                //             element.userlist.forEach(function(iteam){
                //                 if (iteam.log==null) {
                //                     iteam.log=[{
                //                         state: 0,
                //                         time: ""
                //                     }]
                //                 }
                //             })
                //             }
                //     });
               console.log("this.list")
                console.log(this.list)
            },
            // 提交数据
            async tijiao(){
                console.log(this.tableData)
                const res = await addcorrectivemeasures(this.form)
                if (res.code==0) {
                    this.$message({
                    type: 'success',
                    message: '提交成功',
                    showClose: true
                  })
                }
            },
            // 删除行
            deleteRulesList(row){
                this.tableData.splice(row.$index,1);
            },
            // 数组加行
            jiaArr(){
                this.tableData.push({
                      type:'',//类型
                      userkey:'',//人员
                      weight:''//比重
                    })
            },
            // 获取员工列表
            async getSystemadminlist(){
                const res = await getgroupuser()
                this.grouplistBackup=res.data.list
            },
        }
    }
</script>

<style lang="scss" scoped>
  .recommendPage {
    width: 100%;
    height: 100%;
  }
.box-card1 .el-card__body{
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}
.left{
    float: left;
}
.xiao{
    color: rgb(174,174,174);
}
.da{
   font-size: 16px;
   font-weight:bold;
}
.form{
    width: 100%;
    margin: 0 auto;
}
.p{
    margin-bottom: 10px !important;
    margin-top: 20px !important;
    width: 235px;
    // 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;
}
.font{
    font-size: 16px;
        color: #606266;
}
.bottom{
    margin-bottom: 10px;
}
</style>