<!-- 全厂电量统计 -->
<template>
    <el-container>
        <el-header>
            <div class="left-panel">
                <el-date-picker
                    v-model="search_month"
                    type="year"
                    value-format="YYYY"
                    format="YYYY"
                    placeholder="年份"
                    style="margin-right: 6px;"
                    @change="monthChange"
                />
                <el-button
                type="primary"
                icon="el-icon-search"
                @click="getTableData"
                ></el-button>
                <el-button
                    type="primary"
                    @click="exportExcel()"
                    :loading = "exportLoading"
					v-auth="'export_excel'"
                    >导出xlsx
                </el-button>
                <el-button
                    type="primary"
                    @click="handlePrint"
                    >打印
                </el-button>
            </div>
        </el-header>
        <el-main>
            <el-card shadow="never">
                <div ref="print" id="myReport" class="printContainer" style="width: 100%;">
                    <table border="1" cellspacing="0" :key="timeStamp" id="numTable" class="myTable">
                        <thead class="myTableHead">
                            <tr>
                                <th :colspan="tableDatas.length > 0 ? tableDatas[0].length : 3" v-if="type == 'day'">生产月报</th>
                                <th :colspan="tableDatas.length > 0 ? tableDatas[0].length : 3" v-else>生产月报</th>
                            </tr>
                            <tr>
                                <th>序号</th>
                                <th colspan="2">项目</th>
                                <th v-for="(day, i) in tableHeaders" :key="i" style="width:100px">
                                    {{ day }}
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(item, index) in tableDatas" :key="index">
                                <td class="numCell">{{ item[0] }}</td>
                                <td class="numCell" v-if="index == 0" rowspan="5">{{ item[1] }}</td>
                                <td class="numCell" v-else-if="index == 5" rowspan="9">{{ item[1] }}</td>
                                <td class="numCell" v-else-if="index == 14" rowspan="5">{{ item[1] }}</td>
                                <td class="numCell" v-else-if="index == 19" rowspan="4">{{ item[1] }}</td>
                                <td class="numCell" v-else-if="index == 23" rowspan="6">{{ item[1] }}</td>
                                <td class="numCell" style="width: 180px !important;">{{ item[2] }}</td>
                                <td class="numCell" v-for="(value, i) in item.slice(3)" :key="i">{{ value }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </el-card>
        </el-main>
    </el-container>
</template>
<script>
    export default {
        data() {
            return { 
                search_month:'',
                tableHeaders:[],
                tableDatas:[
                    [1,'主机设备台产','立磨台产（t/h）',''],
                    [2,'主机设备台产','烘干破台产（t/h）'],
                    [3,'主机设备台产','煤磨台产（t/h）'],
                    [4,'主机设备台产','回转窑台产（t/h）'],
                    [5,'主机设备台产','水泥磨台产（t/h）'],

                    [6,'能耗','熟料月综合电耗（kW·h/t）'],
                    [7,'能耗','熟料月单位标煤耗(kgce/t)'],
                    [8,'能耗','熟料月综合能耗(kgce/t)'],
                    [9,'能耗','水泥月综合能耗(kgce/t)'],
                    [10,'能耗','月电石渣分布电耗（kW·h/t）'],
                    [11,'能耗','月生料分布电耗（kW·h/t）'],
                    [12,'能耗','月熟料分布电耗（kW·h/t）'],
                    [13,'能耗','月水泥粉磨分布电耗（kW·h/t）'],
                    [14,'能耗','月水泥包装分布电耗（kW·h/t）'],

                    
                    [15,'产量','月电石渣产量(t)'],
                    [16,'产量','月生料产量(t)'],
                    [17,'产量','月熟料产量(t)'],
                    [18,'产量','月水泥磨产量(t)'],
                    [19,'产量','月出厂水泥产量(t)'],

                    [20,'成本','月电石渣成本(元/吨)'],
                    [21,'成本','月生料成本(元/吨)'],
                    [22,'成本','月熟料成本(元/吨)'],
                    [23,'成本','月水泥粉磨成本(元/吨)'],
                    // [30,'成本','月水泥包装成本(元/吨)'],
                  
                    [24,'耗电量','月电石渣耗电量（kW·h）'],
                    [25,'耗电量','月生料耗电量（kW·h）'],
                    [26,'耗电量','月熟料耗电量（kW·h）'],
                    [27,'耗电量','月水泥粉磨耗电量（kW·h）'],
                    [28,'耗电量','月水泥包装耗电量（kW·h）'],
                    [29,'耗电量','月生活区耗电量（kW·h）'],
                ],
                year:'',
                month:'',
                year_h:'',
                month_h:'',
                year_t:'',
                month_t:'',
                dataList:{},
                nowData:[],
                tableName:'',
            };
        },
        mounted() {
            let that = this;
            var myDate = new Date();
            let year = myDate.getFullYear();
            let month = myDate.getMonth()+1;
            that.year = year;
            that.month = month;
            that.year_t = year-1;
            that.month_t = month;
            if(that.year==12){
                that.year_h = year-1;
                that.month_h = 1;
            }else{
                that.year_h = year
                that.month_h = month-1;
            }
            that.search_month = that.year;
            this.getNowData();
            let heights = document.getElementsByClassName('el-main')[0].clientHeight-30;
            document.getElementById('myReport').style.height = heights+'px';
        },
        methods: {
            monthChange(e){
                let that = this;
                if(e){
                   console.log('e',e);
                    that.year = Number(e);
                }
                
            },
            getNowData(){
                let that = this;
                let params = {};
                params.page = 0;
                params.year_s = that.year;
                that.tableName = that.year + '_' + that.month+'-生产月报表';
                params.type = 'month_s';
                this.$API.enm.enstat.req(params).then((res) => {  
                    let dataList = {};
					if(res.length <= 0){
                        return;
                    }
					res.forEach(item => {
						let label = item.mgroup_name;
                        if(!dataList[label]){
                            dataList[label] = [];
                        }
						dataList[label].push(item);
					});
                    //台产
                    let dataList2 = dataList.回转窑;
                    console.log('dataList2',dataList2);
                    // 取回转窑长度作为列索引
                    dataList2.forEach((item,index) => {
                        that.tableHeaders.push(item.month_s);
                        let colIndex = index+3;
                        that.tableDatas[0][colIndex] =  dataList['原料磨'][index].production_hour;           
                        that.tableDatas[1][colIndex] =  dataList['电石渣'][index].production_hour;           
                        that.tableDatas[2][colIndex] =  dataList['煤磨'][index].production_hour;           
                        that.tableDatas[3][colIndex] =  dataList['回转窑'][index].production_hour;           
                        that.tableDatas[4][colIndex] =  dataList['水泥磨'][index].production_hour;
                        //能耗（kW·h/t）
                        that.tableDatas[5][colIndex] =  dataList['回转窑'][index].celec_consume_unit;
                        that.tableDatas[6][colIndex] =  dataList['回转窑'][index].coal_consume_unit;
                        that.tableDatas[7][colIndex] =  dataList['回转窑'][index].cen_consume_unit;
                        that.tableDatas[8][colIndex] =  dataList['水泥磨'][index].cen_consume_unit;
                        that.tableDatas[9][colIndex] =  dataList['电石渣'][index].elec_consume_unit;
                        that.tableDatas[10][colIndex] =  dataList['原料磨'][index].elec_consume_unit;
                        that.tableDatas[11][colIndex] =  dataList['回转窑'][index].elec_consume_unit;
                        that.tableDatas[12][colIndex] =  dataList['水泥磨'][index].elec_consume_unit;
                        that.tableDatas[13][colIndex] =  dataList['水泥包装'][index].elec_consume_unit;
                        //产量(t)
                        that.tableDatas[14][colIndex] =  dataList['电石渣'][index].total_production;
                        that.tableDatas[15][colIndex] =  dataList['生料工序(二次配料)'][index].total_production;
                        that.tableDatas[16][colIndex] =  dataList['回转窑'][index].total_production;
                        that.tableDatas[17][colIndex] =  dataList['水泥磨'][index].total_production;
                        that.tableDatas[18][colIndex] =  dataList['水泥包装'][index].total_production;
                        //成本(元/吨)
                        that.tableDatas[19][colIndex] =  dataList['电石渣'][index].production_cost_unit;
                        that.tableDatas[20][colIndex] =  dataList['原料磨'][index].production_cost_unit;
                        that.tableDatas[21][colIndex] =  dataList['回转窑'][index].production_cost_unit;
                        that.tableDatas[22][colIndex] =  dataList['水泥磨'][index].production_cost_unit; 
                        // that.tableDatas[32][3] =  dataList.水泥包装.production_cost_unit;
                        //耗电量（kW·h）
                        that.tableDatas[23][colIndex] =  dataList['电石渣'][index].elec_consume;
                        that.tableDatas[24][colIndex] =  dataList['生料工序(二次配料)'][index].elec_consume;
                        that.tableDatas[25][colIndex] =  dataList['回转窑'][index].elec_consume;
                        that.tableDatas[26][colIndex] =  dataList['水泥磨'][index].elec_consume; 
                        that.tableDatas[27][colIndex] =  dataList['水泥包装'][index].elec_consume; 
                        that.tableDatas[28][colIndex] =  dataList['生活区'][index].elec_consume;
                    })  
                    // this.updateTableHeaders();
            });
            },
            canCompute(a,b){
                        debugger;
                        if(b!=0&&b!=='/'&&b!==''&&b!==null){
                            if(a!=='/'&&a!==''&&a!==null){
                                a= Number(a)
                                b= Number(b)
                                let num =((a-b)/b*100).toFixed(2)
                                return num
                            }
                        }else{
                            return 0
                        }
                    },
            
            getTableData(){
                // 清空table数据 当item里面有数据时每项索引大于2时候
                this.tableDatas.forEach((item,index) => {
                    item.length = 3;
                });
                this.tableHeaders = [];
                this.getNowData();
            },
            // updateTableHeaders() {
            //     let that = this;
            //     // 假设 tableDatas 至少有一行数据，且列数始终 >= 3
            //     if (this.tableDatas.length > 0) {
            //         let columnCount = this.tableDatas[0].length - 3; // 计算有多少月
            //         this.tableHeaders = Array.from({ length: columnCount }, (_, i) => i + 1);
            //     } else {
            //         this.tableHeaders = [];
            //     }
            // },
            handlePrint() {
                this.$PRINT('#myReport');
            },
            exportExcel() {
            this.exportLoading = true;
            this.$XLSX('#myReport', this.tableName)
            this.exportLoading = false;
            },
        }
    };
</script>
<style scoped>
.topTableDiv{
    position: absolute;
}
#myReport{
    overflow-y: scroll;
}
.myTable thead {
    position: sticky;
    top: 0;  /* 固定表头在顶部 */
    background-color: #008080;  /* 设置表头的背景颜色 */
    z-index: 1;  /* 保证表头在内容之上 */
}

.myTable th {
    padding: 8px;
    text-align: center;
    background-color: #008080;  /* 设置表头的背景色 */
}

.myTable td {
    padding: 8px;
    text-align: center;
}
</style>