<template>
    <div>
        <el-table  v-if="systemName=='弱电系统'" :class="!examplesBoo?'heightCell':''"
                   :data="tableData"
                   border
                   :show-summary="!examplesBoo"  max-height="450"
                   style="width: 100%" :header-cell-style="()=>{
                                return {
                                  background:'#E5EEF6'
                                }
                              }"   :span-method="objectSpanMethod" :tooltip-effect="'dark'">
            <el-table-column
                    prop="fireZone"
                    label="分区" show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    prop="system"
                    label="系统">
            </el-table-column>
            <el-table-column
                    prop="monitorCount"
                    label="数量">
                <template slot-scope="scope">
                    <span type="text" v-if="scope.row.system=='监控系统'">{{scope.row.monitorCount}}</span>
                    <span type="text" v-if="scope.row.system=='BA系统'">{{scope.row.baCount}}</span>
                    <span type="text" v-if="scope.row.system=='DDC'">{{scope.row.ddcCount}}</span>
                    <span type="text" v-if="scope.row.system=='门禁系统'">{{scope.row.accessCount}}</span>
                </template>
            </el-table-column>
        </el-table>
        <el-table  v-if="systemName=='消防系统'" id="tables"
                   :data="tableData"
                   border   max-height="450"
                   :show-summary="!examplesBoo"
                   style="width: 100%;" :header-cell-style="()=>{return { background:'#E5EEF6'  } }" :cell-style="({row, column, rowIndex, columnIndex})=>{
                        return { background:examplesBoo&&rowIndex==3&&columnIndex==1?'#EFF0F1':'#fff' }
                     }"   :span-method="objectSpanMethod" :tooltip-effect="'dark'">
            <el-table-column
                    prop="fireZone"
                    label="防火分区" show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
                    prop="hostNum"
                    label="主机编号" show-overflow-tooltip>
                <template slot-scope="scope">
                    <div v-if="scope.row.isFm==0">{{scope.row.manageScope}}</div>
                    <span v-if="scope.row.isFm==1">{{scope.row.hostNum}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="loopNum"
                    label="回路编号" show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    prop="smokeCount"
                    label="烟感数量"> 
            </el-table-column>
            <el-table-column
                    prop="warmCount"
                    label="温感数量">
            </el-table-column>
            <el-table-column
                    prop="handNewCount"
                    label="手报数量">
            </el-table-column>
            <el-table-column
                    prop="fireHydrantCount"
                    label="消火栓数量" width="85">
            </el-table-column>
            <el-table-column
                    prop="moduleCount"
                    label="模块数量">
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    export default {
        name: "addDataTable",
        props:{
            systemName:String,
            examplesBoo:Boolean,
            tableData:{
                type: Array,
                default: ()=>{
                    return [ {
                        fireZone: '',
                        system: '监控系统',
                        monitorCount: '',
                    },
                        {
                            fireZone: '',
                            system: 'BA系统',
                            baCount: '',
                        },
                        {
                            fireZone: '',
                            system: 'DDC',
                            ddcCount: '',
                        },
                        {
                            fireZone: '',
                            system: '门禁系统',
                            accessCount: '',
                        },]
                }
            },
            tableData2:{
                type:Array,
                default:()=>{
                    return  [
                        {
                            fireZone: '',
                            isFm: '1',
                            hostNum: '',
                            loopNum: '',
                            smokeCount: '',
                            warmCount: '',
                            handNewCount: '',
                            fireHydrantCount: '',
                            moduleCount: '',
                        }
                    ]
                }
            },
            totalCount:{
                type:Object,
                default:()=>{
                    return {
                        "monitorTotalCount":"",   //监控系统总数量
                        "baTotalCount":"",        //BA系统总数量
                        "ddcTotalCount":"",       //DDC总数量
                        "accessTotalCount":""    //门禁系统总数量
                    }

                }
            }
        },
        data(){
            return {
            }
        },
        methods:{
            objectSpanMethod({ row, column, rowIndex, columnIndex }) {
                if(this.systemName=='弱电系统'){
                    if (columnIndex === 0) {
                        if (rowIndex % 4 === 0) {
                            return {
                                rowspan: 4,
                                colspan: 1
                            };
                        } else {
                            return {
                                rowspan: 0,
                                colspan: 0
                            };
                        }
                    }
                }
                if(this.systemName=='消防系统'){
                    if (row.isFm == 0) {
                        if (columnIndex === 1) {
                            return {
                                rowspan: 1,
                                colspan: 7
                            };
                        }
                    }
                }
                this.$nextTick(() => {
                    if(this.systemName=='弱电系统'){
                        let lastLine = document.getElementsByClassName("el-table__footer")[0]
                            .children[1];
                        lastLine.innerHTML = ''
                        for(let i=0;i<4;i++){
                            var newnode = document.createElement("tr");
                            if(i==0){
                                newnode.innerHTML = "<td class='cell' style='font-size: 12px!important;background: #E5EEF6!important;font-weight: 500!important;'>合计</td>" +
                                    "<td class='cell cellbg'>监控系统</td>" + `<td class='cell'>${this.totalCount.monitorTotalCount||''}</td>`;
                            }
                            if(i==1){
                                newnode.innerHTML =
                                    "<td  class='cell cellbg'>BA系统</td>" +
                                    `<td  class='cell'>${this.totalCount.baTotalCount||''}</td>`;
                            }
                            if(i==2){
                                newnode.innerHTML =
                                    "<td class='cell cellbg'>DDC</td>" +
                                    `<td  class='cell'>${this.totalCount.ddcTotalCount||''}</td>`;
                            }
                            if(i==3){
                                newnode.innerHTML =
                                    "<td  class='cell cellbg'>门禁系统</td>" +
                                    `<td class='cell'>${this.totalCount.accessTotalCount||''}</td>`;
                            }

                            lastLine.appendChild(newnode);
                        }
                        let tds = document.querySelectorAll(".el-table__footer-wrapper tr>td");
                        tds[0].rowSpan = 4;
                    }
                    if(this.systemName=='消防系统'){
                        var lastLine = document.getElementsByClassName("el-table__footer")[0]
                            .children[1];
                        lastLine.innerHTML = '';
                        let newnode = document.createElement("tr");
                        newnode.innerHTML = "<td class='cell' colSpan='3' style='font-size: 12px!important;background: #E5EEF6!important;font-weight: 500!important;'>合计</td>" +
                            `<td class='cell cellbg'>${this.totalCount.smokeTotalCount||''}</td>`
                            + `<td class='cell'>${this.totalCount.warmTotalCount||''}</td>`
                            + `<td class='cell'>${this.totalCount.handNewTotalCount||''}</td>`
                            + `<td class='cell'>${this.totalCount.fireHydrantTotalCount||''}</td>`
                            + `<td class='cell'>${this.totalCount.moduleTotalCount||''}</td>`;
                        lastLine.appendChild(newnode);
                        // let tds = document.querySelectorAll(".el-table__footer-wrapper tr>td");
                        // tds[0].colSpan = 3;
                        // tds[1].style.display = "none";
                        // tds[2].style.display = "none";
                    }
                });
            },
        }
    }
</script>

<style scoped lang="less">
    /deep/ .el-table{
        .cell{
            height: 16px!important;
            line-height:16px!important;
            color: #000000!important;
            text-align: center!important;
        }
        .el-table__footer-wrapper{
            td{
                background: #ffffff!important;
            }
            tr:first-child{
                td:first-child{
                    background: #E5EEF6!important;
                }

            }
            .cellbg{
                background: #ffffff!important;
            }
        }
       .el-table__body tr:hover > td {
            background-color: unset;
        }
    }
   /deep/ #tables{
       .cell{
           height: 30px!important;
           line-height:30px!important;
           color: #000000!important;
           text-align: center!important;
       }
    }
</style>