<template>
    <!-- nav---风险点 -->
    <div class="riskpoint">
        <div class="table">
            <el-table :data="dataList">
                <el-table-column
                    type="index"
                    label="序号"
                    width="50">
                </el-table-column>
                <el-table-column
                    prop="riskPointName"
                    label="风险点名称"
                >
                </el-table-column>

                <!-- <el-table-column
                    prop="markerTypes"
                    label="风险点类型"
                >
                </el-table-column> -->
                <el-table-column
                    prop="riskPointLevel"
                    label="风险点等级"
                >
                <template slot-scope="scope">
                    <p v-if="scope.row.riskPointLevel == 1">重大</p>
                    <p v-if="scope.row.riskPointLevel == 2">较大</p>
                    <p v-if="scope.row.riskPointLevel == 3">一般</p>
                    <p v-if="scope.row.riskPointLevel == 4">较低</p>
                </template>
                </el-table-column>

                <el-table-column
                    prop="riskCount"
                    label="检查点个数"
                >
                    <template slot-scope="scope">
                        <div class="riskCount-cell" @click="showRiskDetail(scope.row)">{{scope.row.riskCount}}</div>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="sGroupName"
                    label="责任单位"
                >
                </el-table-column>
                <el-table-column
                    prop="aName"
                    label="责任人姓名"
                >
                </el-table-column>
            </el-table>
        </div>
        <risk-point-detail ref="risk-point-detail"></risk-point-detail>
    </div>
</template>
<script>
import riskPointDetail from './detail.vue'
export default {
    name: "riskpoint",
    components:{
        riskPointDetail
    },
    data() {
        return {
            dataList:[],
            riskFalg: ''
        }
    },
    mounted(){
        console.log('tttttttttttttttttt', this.$route.query)
        this.riskFalg = this.$route.query.riskFalg
        this.getDataListFn();
    },
    methods:{
        getDataListFn(){
            let that = this;
            let obj = {
              gId:this.$route.query.gId,
              cId:this.$route.query.cId,
              path:this.$api.todayCheck,
            }
            // console.log('obj===================================',obj)
            this.$axios.AxiosMethods("get","3rd/bigScreenData/getRiskPointList",obj,function (res) {
                console.log('风险点________________***************',res.data);
                var msg = res.data, dataArr = [];

                if(that.riskFalg == 'lv1'){
                    for(var i=0; i<msg.length; i++){
                        if(msg[i].riskPointLevel == 1){
                            dataArr.push(msg[i])
                        }
                    }
                }else if(that.riskFalg == 'lv2'){
                    for(var i=0; i<msg.length; i++){
                        if(msg[i].riskPointLevel == 2){
                            dataArr.push(msg[i])
                        }
                    }
                }else if(that.riskFalg == 'lv3'){
                    for(var i=0; i<msg.length; i++){
                        if(msg[i].riskPointLevel == 3){
                            dataArr.push(msg[i])
                        }
                    }
                }else if(that.riskFalg == 'lv4'){
                    for(var i=0; i<msg.length; i++){
                        if(msg[i].riskPointLevel == 4){
                            dataArr.push(msg[i])
                        }
                    }
                }else{
                    dataArr = msg;
                }
                that.dataList = dataArr;
            console.log('this.dataList',that.dataList)

            });
        },
        tableRowClassName({row, rowIndex}) {
            if (rowIndex %2 == 0) {
            return 'odd-row';
            } else if (rowIndex === 3) {
            return 'even-row';
            }
        },
        showRiskDetail(row){
            let item=JSON.parse(JSON.stringify(row))
            let riskPointId=item.riskPointId;
            this.$refs['risk-point-detail'].onLoad(riskPointId)
        }
    }
}
</script>
<style lang="less" scoped>
    .riskpoint{
        font-size: 0.1rem;
        .table{
            margin-top: 10px;
            .riskCount-cell{
                padding: 5px 0;
                cursor: pointer;
            }
        }
    }
</style>

<style >
    .riskpoint{
        padding: 20px 15px;
        box-sizing: border-box;
        margin: 20px 16px 0 16px;
        height: 80%;
        overflow-x: auto;
    }
    .riskpoint>div{
        border: none;
    }
    .riskpoint .el-table tr th {
        background-color: #022528;
    }
    .riskpoint .el-table th,
    .riskpoint .el-table tr td{
        background-color: #02353d;
        color: #fff;
    }
    .riskpoint .el-table tr:nth-child(even) td{
        background-color: #022528;
        color: #fff;
    }
    .riskpoint .el-table td,
    .riskpoint .el-table th.is-leaf {
        border-bottom: 0 !important;
    }
    .riskpoint .el-table--enable-row-hover .el-table__body tr:hover>td {
        background-color: #126670 !important;
    }
    .riskpoint .el-table__footer-wrapper thead div, .riskpoint .el-table__header-wrapper thead div {
        background-color: #022528;
        color: #fff;
    }
    .riskpoint .el-table__empty-block{
        min-height: 130px;
        background-color: #126670;
    }
    .riskpoint .el-table__empty-text{
        font-size: 16px;
        color:#fff;
    }
    .riskpoint .el-table::after,.riskpoint .el-table::before {
        background-color: transparent;
    }
</style>
