<template>
    <div class="detail-container">
        <el-dialog title="详情"
            custom-class="el-dialog-riskPointerDetail"
            :visible.sync="dialogVisible"
            fullscreen>  
            <el-tabs v-model="activeName" @tab-click="tabChange">
                <el-tab-pane label="基本信息" name="1">
                    <div class="tab-container base">
                         <table class="custom-table" >
                            <tr>
                                <td>名称</td>
                                <td>{{baseInfo.riskPointName}}</td>
                                <td>风险点等级</td>
                                <td>{{filterLevel(baseInfo.riskPointLevel)}}</td>
                            </tr>
                            <tr>
                                <td>部门名称</td>
                                <td colspan="3">{{baseInfo.liableGroupIdName}}</td>
                            </tr>
                            <tr>
                                <td>责任人</td>
                                <td>{{baseInfo.aName}}</td>
                                <td>是否激活</td>
                                <td>{{baseInfo.isActive==1?'激活':"未激活"}}</td>
                            </tr>
                            <tr>
                                <td>激活开始时间</td>
                                <td>{{baseInfo.activeStartTime}}</td>
                                <td>激活结束时间</td>
                                <td>{{baseInfo.activeEndTime}}</td>
                            </tr>
                            <tr>
                                <td>风险点位置</td>
                                <td colspan="3">{{baseInfo.riskPointPlaces}}</td>
                            </tr>
                            <tr>
                                <td>描述</td>
                                <td colspan="3">{{baseInfo.riskPointDesc}}</td>
                            </tr>                            
                            
                         </table>   
                        <h3 class="head">预警信息</h3>	
                        <el-table
                            :data="baseRiskPointWarn"
                            style="width: 100%;">
                            <el-table-column
                            type="index"
                            width="80"
                            align="center"
                            label="序号">
                            </el-table-column>                            
                            <el-table-column
                                align="center"
                                prop="createdTime"
                                label="预警时间">
                            </el-table-column>
                            <!-- <el-table-column
                              prop="type"
                              label="类型">
                                <template slot-scope="scope">
                                    <span>{{filterDetailType(scope.row.detailType)}}</span>
                                </template>
                            </el-table-column> -->
                            <el-table-column
                                prop="causeDesc"
                               label="描述">
                            </el-table-column>                                                        
                        </el-table>
                        <div class="el-pagination-container">
                            <el-pagination
                                background
                                layout="prev, pager, next"
                                @current-change="currentChange"
                                :total="baseInfo.riskPointWarn.length">
                            </el-pagination>    
                        </div>                                         
                    </div>
                </el-tab-pane>
                <el-tab-pane label="风险表" name="2">
                    <div class="tab-container">
                        <el-table
                            :data="riskTableData"
                            style="width: 100%;">
                            <el-table-column
                            type="index"
                            width="80"
                            label="序号">
                            </el-table-column>                            
                            <el-table-column
                                prop="parentDangerSrcName"
                                label="危险源">
                            </el-table-column>                          
                            <el-table-column
                                prop="riskCode"
                                label="风险编号">
                            </el-table-column>
                            <el-table-column
                                min-width="160"
                                prop="riskName"
                                label="作业步骤/风险名称">
                            </el-table-column>                            
                            <el-table-column
                                prop="riskLevel"
                                label="风险等级">
                                <template slot-scope="scope">
                                    <span>{{filterLevel(scope.row.riskLevel)}}</span>
                                </template>                                
                            </el-table-column>
                            <el-table-column
                                prop="riskReason"
                                label="危害因素">
                            </el-table-column>                            
                            <el-table-column
                                prop="riskConsequence"
                                label="未达标的情况及后果">
                            </el-table-column>                                                                        
                                                                        
                        </el-table>
                        <div class="el-pagination-container">
                            <el-pagination
                                background
                                layout="prev, pager, next"
                                @current-change="currentChange"
                                :total="riskCheckList.table.length">
                            </el-pagination>    
                        </div> 
                    </div>
                </el-tab-pane>
                <el-tab-pane label="安全检查表" name="3">
                <!-- <h3>安全检查表</h3> -->
                    <div class="tab-container">	
                        <div v-for="(item) in safeTableData" :key="item.dangerSrcId">
                            <el-card>
                                <div slot="header">
                                <h3>{{item.rootName}}</h3>
                                </div>
                                <table  class="custom-table safeCheckList" v-for="(row,index) in item.list" :key="'safeCheckList'+index">
                                    <th colspan="5">{{index+1}}-{{row.riskName}}</th>
                                    <tr>
                                        <td>工程技术</td>
                                        <td>管理</td>
                                        <td>教育</td>
                                        <td>应急</td>
                                        <td>个体防护</td>
                                    </tr>
                                    <tr>
                                        <td>{{filterCheckList(row.riskMeasureContent,0)}}</td>
                                        <td>{{filterCheckList(row.riskMeasureContent,1)}}</td>
                                        <td>{{filterCheckList(row.riskMeasureContent,2)}}</td>
                                        <td>{{filterCheckList(row.riskMeasureContent,3)}}</td>
                                        <td>{{filterCheckList(row.riskMeasureContent,4)}}</td>
                                    </tr>                                                       
                                </table>                             
                            </el-card>                       
                        </div>                          
                        <div class="el-pagination-container">
                            <el-pagination
                                background
                                layout="prev, pager, next"
                                @current-change="currentChange"
                                :total="safeCheckList.table.length">
                            </el-pagination>    
                        </div> 
                    </div>
                </el-tab-pane>
                <el-tab-pane label="检查记录" name="4">
                    <div class="tab-container">
                        <el-table
                            :data="recordTableData"
                            style="width: 100%;">
                            <el-table-column
                            type="index"
                            width="80"
                            label="序号">
                            </el-table-column>                            
                            <el-table-column
                                prop="checkDefName"
                                label="安全检查表">
                            </el-table-column>                          
                            <el-table-column
                                prop="checkedGroupName"
                                label="检查部门">
                            </el-table-column>
                            <el-table-column
                                min-width="160"
                                prop="checkedUserName"
                                label="执行人">
                            </el-table-column>                            
                            <el-table-column
                                prop="checkResult"
                                label="检查结果">
                            </el-table-column>
                            <el-table-column
                                prop="createdTime"
                                label="检查日期">
                            </el-table-column>                            
                            <el-table-column
                                prop="checkContentDesc"
                                label="描述">
                            </el-table-column>                                                                        
                                                                        
                        </el-table>
                        <div class="el-pagination-container">
                            <el-pagination
                                background
                                layout="prev, pager, next"
                                @current-change="currentChange"
                                :total="recordBaseInfo.length">
                            </el-pagination>    
                        </div> 
                    </div> 
                </el-tab-pane>
                <el-tab-pane label="隐患" name="5">
                    <!-- <h3>隐患</h3> -->
                    <div class="tab-container">
                        <el-table :data="dangerTableData">
                            <el-table-column
                                type="index"
                                label="序号"
                                width="50">
                            </el-table-column>
                            <el-table-column
                                prop="hdangerTitle"
                                label="隐患名称"
                            >
                            </el-table-column>
                            <el-table-column label="图片" width="260">
                                <template slot-scope="scope">
                                <span v-if="scope.row.imgUrl">
                                    <viewer>
                                    <img :src="$commonFun.judgeImgsrc(scope.row.imgUrl)" :onerror="defaultImg"
                                     style="width: 50px;height: 50px;margin: 10px 7px 0 0;cursor: pointer;object-fit: cover;">
                                    </viewer>
                                </span>
                                <span v-else>暂无图片</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="hdangerLevelStr"
                                label="隐患等级"
                            >
                            </el-table-column>

                            <el-table-column
                                prop="disposeStatusStr"
                                label="隐患状态"
                            >
                            </el-table-column>

                            <el-table-column
                                prop="executor"
                                label="当前执行人"
                            >
                            </el-table-column>
                            <el-table-column
                                prop="createdTimeStr"
                                label="整改期限"
                            >
                            </el-table-column>

                            <el-table-column
                                prop="createdTimeStr"
                                label="责任单位"
                            >
                            </el-table-column>
                        </el-table>
                        <div class="el-pagination-container">
                            <el-pagination
                                background
                                layout="prev, pager, next"
                                @current-change="currentChange"
                                :total="dangerBaseInfo.length">
                            </el-pagination>    
                        </div> 
                    </div>                    
                </el-tab-pane>
            </el-tabs>  
        </el-dialog>    
    </div>
</template>
<script>
export default {
    name:"riskPointDetail",
    data(){
        return{
            defaultImg: 'this.src="' + require('../../assets/image/defaultImg.png') + '"',
            dialogVisible:false,
            riskPointId:undefined,
            activeName:"1",
            baseRiskPointWarn:[],
            riskTableData:[],
            safeTableData:[],
            dangerTableData:[],
            recordTableData:[],
            baseInfo:{riskPointWarn:[]},
            riskCheckList:{table:[]},
            safeCheckList:{table:[]},
            dangerBaseInfo:[],
            recordBaseInfo:[]
        }
    },
    methods:{
        filterDetailType(type){
            var name="--"
            if(type==1){name="隐患告警"}else if(type==2){name="任务逾期告警"}else if(type==3){
                name="传感器告警"
            }else{name="其他告警"}  
            return name 
        },  
        filterLevel(status){
            var name="--"
            if(status==1){name="重大"}else if(status==2){name="较大"}
            else if(status==3){name="一般"}else if(status==4){name="较低"}  
            return name 
        },  
        filterCheckList(info,index){
            if(!info) return;
            if(info.split(',').length>0){
                if(info.split(',')[index]){
                    info=info.split(',')[index].substr(2)
                }else{
                    info=""
                }
            }else{info="--"}
            return info;
        },              
        onLoad(riskPointId){
            this.riskPointId=riskPointId;
            this.dialogVisible=true
            this.getRiskPointDetails();
            this.getRiskMeasureList()
            // this.getRiskRecord()
        },
        getRiskPointDetails(){
            let obj = {
                gId:this.$route.query.gId,
                cId:this.$route.query.cId,
                riskPointId:this.riskPointId
            }         
            this.$axios.AxiosMethods("get","3rd/bigScreenData/getRiskPointDetails",obj,(res)=>{
                this.baseInfo=res.data;
                let riskPointWarn=JSON.parse(JSON.stringify(this.baseInfo.riskPointWarn))
                this.baseRiskPointWarn=this.filterTable(riskPointWarn,1)
                /**隐患 */
                this.dangerBaseInfo=res.data.hiddenDangerList
                let dangerBaseInfo=JSON.parse(JSON.stringify(this.dangerBaseInfo))
                this.dangerTableData=this.filterTable(dangerBaseInfo,1)   
                /**记录 */     
                this.recordBaseInfo=res.data.riskCheckedRecord
                let recordBaseInfo=JSON.parse(JSON.stringify(this.recordBaseInfo))
                this.recordTableData=this.filterTable(recordBaseInfo,1)                          
            })
        },      
        getRiskMeasureList(){
            let obj = {
                gId:this.$route.query.gId,
                cId:this.$route.query.cId,
                riskPointId:this.riskPointId
            }          
            this.$axios.AxiosMethods("get","3rd/bigScreenData/getRiskMeasureList",obj,(res)=>{
                let content=[]
                if(!res.data) return;
                for(let i=0;i<res.data.length;i++){
                    content=content.concat(res.data[i].list)
                } 
                //风险检查表   
                this.riskCheckList.table=content     
                let riskTableData=JSON.parse(JSON.stringify(this.riskCheckList.table))
                this.riskTableData=this.filterTable(riskTableData,1) 
                //安全检查表  
                this.safeCheckList.table=res.data     
                let safeTableData=JSON.parse(JSON.stringify(this.safeCheckList.table))
                this.safeTableData=this.filterTable(safeTableData,1)                            
            })
        }, 
        getRiskRecord(){
            let obj = {
                gId:this.$route.query.gId,
                cId:this.$route.query.cId,
                riskPointId:this.riskPointId,
                industryCode:"1"
            }          
            this.$axios.AxiosMethods("get","3rd/bigScreenData/getRiskRecord",obj,(res)=>{
                console.log({"getRiskRecord":res})
            })
        }, 
        tabChange(){
            this.currentChange(1)
        },
        filterTable(table=[],current=1,size=10){
            return  table.filter((item,index)=>{
                return (current*size>index)&&((current-1)*size<=index)
            })
        },
        currentChange(current){
            if(this.activeName==='1'){
                let riskPointWarn=JSON.parse(JSON.stringify(this.baseInfo.riskPointWarn))
                this.baseRiskPointWarn=this.filterTable(riskPointWarn,current)
            }else if(this.activeName==='2'){  
                let riskTableData=JSON.parse(JSON.stringify(this.riskCheckList.table))
                this.riskTableData=this.filterTable(riskTableData,current)   
            }else if(this.activeName==='3'){
                let safeTableData=JSON.parse(JSON.stringify(this.safeCheckList.table))
                this.safeTableData=this.filterTable(safeTableData,current)  
            }else if(this.activeName==='4'){
                
            }
        }                  
    }    
}
</script>>
<style lang="less">
    .detail-container{   
        .el-dialog__header{
            padding: 10px;
        }
        .el-dialog__body{
            padding-top: 0;
        }
        .tab-container{
            .custom-table{
                width: 100%;
                border-collapse:collapse;            
                border-top:1px solid #ccc;
                border-right: 1px solid #ccc;
                td,th{
                    border-left: 1px solid #ccc;
                    border-bottom: 1px solid #ccc;
                    padding: 8px 12px;
                }
                &.safeCheckList{
                    margin-top: 20px;
                    td{
                        width: 20%;
                        min-width:200px;
                    }
                    th{
                        padding: 5px 0;
                        text-align: left;
                        text-indent: 24px;
                    }
                }
            }
            .el-pagination-container{
                padding: 10px  0;
                display: flex;
                justify-content: flex-end;
            }
            .head{
                line-height: 1;
                padding: 12px;
            }            
        }
    }
</style>