<template>
    <!-- nav---隐患 -->
    <div class="hiddendanger">
      <div class="table">
            <el-table :data="tableData">
                <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">
                        <!--<img v-for="(cell, idx) in scope.row.BeforeAnnex" :src="baseUrl+cell.attachPath" :key="idx"
                            @click="openPic()" :onerror="defaultImg"
                            alt="" style="width: 50px;height: 50px;margin: 10px 7px 0 0;">-->

                      <span v-if="scope.row.BeforeAnnex.length > 0">
                          <img  v-for="(cell, idx) in scope.row.BeforeAnnex" :src="baseUrl+cell.attachPath" :key="idx"
                                :onerror="defaultImg" :preview="idx" preview-text="整改前图片"
                                alt="" style="width: 50px;height: 50px;margin: 10px 7px 0 0;">
                      </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">
                        <img v-for="(cell, idx) in scope.row.AfterAnnex" :src="baseUrl+cell.attachPath" :key="idx"
                             @click="openPic()" :onerror="defaultImg" :preview="idx" preview-text="整改后图片"
                             alt="" style="width: 50px;height: 50px;margin: 10px 7px 0 0;">
                      </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>
        </div>
    </div>
</template>
<script>
export default {
    name: "hiddendanger",
    data() {
        return {
            tableData:[],
            baseUrl: this.$ip,
            defaultImg: 'this.src="' + require('../../assets/image/defaultImg.png') + '"'
        }
    },
    mounted(){
        this.getTableList()
    },
    methods:{
        findFn(){
            console.log('11111111111')
        },
        getTableList(){
            let that = this;
            let obj = {
              gId:this.$route.query.gId,
              cId:this.$route.query.cId
            }
            this.$axios.AxiosMethods("get","3rd/bigScreenData/getHiddenDangerList",obj,function (res) {
                that.tableData = res.data;
                that.$previewRefresh() //图片是异步生成的，在图片数据更新后调用：this.$previewRefresh()
            });
        },
        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>
