<template>
    <!-- nav---隐患 -->
    <div class="hiddendanger">
      <div class="table">
            <el-table :data="tableData" v-if="searchType!=='finish'">
                <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" v-if="searchType!=='finish'">
                      <span v-if="scope.row.BeforeAnnex.length > 0">
                         <viewer>
                           <img v-for="(cell, idx) in scope.row.BeforeAnnex" :src="$commonFun.judgeImgsrc(cell.attachPath)" :key="idx" :onerror="defaultImg"
                                alt="" 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 label="整改后图片" width="260">
                    <template slot-scope="scope">
                      <span v-if="scope.row.AfterAnnex.length > 0">
                        <viewer>
                           <img v-for="(cell, idx) in scope.row.AfterAnnex" :src="$commonFun.judgeImgsrc(cell.attachPath)" :key="idx"
                                @click="openPic()" :onerror="defaultImg"
                                alt="" 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="hdangerLevel"
                    label="隐患等级"
                >
                </el-table-column>

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

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

                <el-table-column
                    prop="sGroupName"
                    label="责任单位"
                >
                </el-table-column>
            </el-table>
            <el-table :data="tableData" v-if="searchType==='finish'">
                <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)" style="width: 50px;height: 50px;margin: 10px 7px 0 0;cursor: pointer;object-fit: cover;" :onerror="defaultImg">
                         </viewer>
                      </span>
                      <span v-else>暂无图片</span>
                    </template>                    
                </el-table-column>
                <el-table-column
                    prop="hdangerLevelStr"
                    label="隐患等级"
                >
                </el-table-column>

                <el-table-column
                    prop="hdangerTitle"
                    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="groupName"
                    label="责任单位"
                >
                </el-table-column>
            </el-table>            
            <div class="el-pagination-container" v-if="searchType!=='finish'">
                <el-pagination
                    background
                    layout="total,prev, pager, next"
                    @current-change="currentChange"
                    :page-size="pageSize"
                    :total="baseTableData.length">
                </el-pagination>    
            </div> 
            <div class="el-pagination-container" v-if="searchType==='finish'">
                <el-pagination
                    background
                    layout="total,prev, pager, next"
                    @current-change="currentChange"
                    :page-size="pageSize"
                    :total="finishData.length">
                </el-pagination>    
            </div>                        
        </div>
    </div>
</template>
<script>
  /*import Viewer from 'v-viewer'
  import 'viewerjs/dist/viewer.css'*/
  // import lrz from "lrz"
  import './../../../static/js/lrz.bundle.js'

  export default {
    name: "hiddendanger",
    data() {
        return {
            searchType:"",
            baseTableData:[],
            tableData:[],
            finishData:[],
            baseUrl: this.$ip,
            defaultImg: 'this.src="' + require('../../assets/image/defaultImg.png') + '"',
            pageSize:10
        }
    },
    created(){
        this.getTableList()
    },
    methods:{
        findFn(){
            console.log('11111111111')
        },
        getTableList(){
            let that = this;
            let obj = {
              gId:this.$route.query.gId,
              cId:this.$route.query.cId
            }
            const searchType=this.$route.query.searchType
            this.searchType=searchType;
            if(searchType==='finish'){
                this.getFinishData()
                return
            }
            this.$axios.AxiosMethods("get","3rd/bigScreenData/getHiddenDangerList",obj,function (res) {
              that.baseTableData=res.data;
              that.filterTable();//过滤数据类型
              that.tableData =that.filterCurrentTable(that.baseTableData,1)//处理分页             
            });
        },
        getFinishData(){//获取已完成数据
            let that = this;
            let obj = {
              gId:this.$route.query.gId,
              cId:this.$route.query.cId,
              status:4
            }
            this.$axios.AxiosMethods("get","3rd/bigScreenData/queryRiskPointHDangerByPage",obj,function (res) {
              that.finishData = res.data.list;   
              that.tableData =that.filterCurrentTable(that.finishData,1)        
            });
        },
        filterTable(){
            const searchType=this.$route.query.searchType
            var content=JSON.parse(JSON.stringify(this.baseTableData))          
            switch(searchType){
                case 'lv1' :
                    content=content.filter((item)=>item.hdangerLevel==="重大")
                break
                case 'lv3' :
                    content=content.filter((item)=>item.hdangerLevel==="一般")
                break
                case 'toBeRectified' :
                    content=content.filter((item)=>item.hdStatus==="待整改")
                break
                case 'waitForChecking' :
                    content=content.filter((item)=>item.hdStatus==="待验收")
                break                                     
            }
            this.baseTableData=content
        },
        filterCurrentTable(table=[],current=1,size=10){
            if(this.pageSize){size=this.pageSize}
            return  table.filter((item,index)=>{
                return (current*size>index)&&((current-1)*size<=index)
            })
        },        
        currentChange(current){      
            if(this.searchType==='finish'){
                let finishData=JSON.parse(JSON.stringify(this.finishData))
                this.tableData=this.filterCurrentTable(finishData,current)
            }else{
                this.filterTable()
                let baseTableData=JSON.parse(JSON.stringify(this.baseTableData))
                baseTableData=this.filterCurrentTable(baseTableData,current)
                this.tableData=baseTableData;
            }
            
        },
        openPic(){

        },

    }
}


</script>
<style lang="less" scoped>
    .hiddendanger{
        font-size: 0.1rem;
        .table{
            margin-top: 10px;
        }
    }
</style>
<style >
    .hiddendanger .el-table{
      background: #022528;
    }
    .hiddendanger{
        padding: 20px 15px;
        box-sizing: border-box;
        margin: 20px 16px 0 16px;
        height: 80%;
        overflow-x: auto;
    }
    .hiddendanger>div{
        border: none;
    }
    .hiddendanger .el-table tr th {
        background-color: #022528;
    }
    .hiddendanger .el-table th,
    .hiddendanger .el-table tr td{
        background-color: #02353d;
        color: #fff;
    }
    .hiddendanger .el-table tr:nth-child(even) td{
        background-color: #022528;
        color: #fff;
    }
    .hiddendanger .el-table td,
    .hiddendanger .el-table th.is-leaf {
        border-bottom: 0 !important;
    }
    .hiddendanger .el-table--enable-row-hover .el-table__body tr:hover>td {
        background-color: #126670 !important;
    }
    .hiddendanger .el-table__footer-wrapper thead div, .hiddendanger .el-table__header-wrapper thead div {
        background-color: #022528;
        color: #fff;
    }
    .hiddendanger .el-table__empty-block{
        min-height: 130px;
        background-color: #126670;
    }
    .hiddendanger .el-table__empty-text{
        font-size: 16px;
        color:#fff;
    }
    .hiddendanger .el-table::after,.hiddendanger .el-table::before {
        background-color: transparent;
    }
</style>
<style lang="less">
.el-pagination-container{
    padding: 10px;
    display: flex;
    justify-content: flex-end;
    .el-pagination__total{
         color: #fff !important;
    }
}
</style>
