<template>
    <div class="app-container">
        <el-header>
            <div class="left-panel">
                <el-select
                  v-model="query.belong_dept"
                  placeholder="车间"
                  clearable
                  @change="deptChange"
                  style="margin-left: 2px; width: 200px"
                >
                  <el-option
                  v-for="item in deptOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                  ></el-option>
                </el-select>
                <el-select
                    v-model="query.type"
                    placeholder="查询类型"
                    clearable
                    @change="typeCange"
                >
                    <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                    ></el-option>
                </el-select>
                <el-date-picker
                    v-model="query.month"
                    type="month"
                    value-format="YYYY-MM"
                    format="YYYY-MM"
                    placeholder="查询月份"
                    v-if="query.type==0"
                />
                <el-date-picker
                    v-model="query.year"
                    type="year"
                    value-format="YYYY"
                    format="YYYY"
                    placeholder="查询年份"
                    v-if="query.type==1"
                />
                <el-date-picker
                    v-model="query.yearStart"
                    type="year"
                    value-format="YYYY"
                    format="YYYY"
                    placeholder="起始年份"
                    v-if="query.type==2"
                />
                
                <el-button
                type="primary"
                icon="el-icon-search"
                @click="getTableData"
                ></el-button>
                <el-button
                    type="primary"
                    @click="exportExcel()"
                    :loading = "exportLoading"
                    >导出xlsx
                </el-button>
                <el-button
                    type="primary"
                    @click="handlePrint"
                    >打印
                </el-button>
            </div>
        </el-header>
        <el-card style="margin-top:5px">
            <div ref="print" id="myReport" class="printContainer">
                <h3 style="text-align: center;">{{ tableName }}</h3>
                <table border="1"  cellspacing="0" :key="timeStamp" id="myTable1" class="myTable">
                    <thead class="myTableHead">
                        <tr>
                            <th rowspan="3">日期</th>
                            <th v-if="deptName=='原料车间'" colspan="11">原料车间</th>
                            <th v-if="deptName=='烧成车间'" colspan="16">烧成车间</th>
                            <th v-if="deptName=='水泥车间'" colspan="10">水泥车间</th>
                        </tr>
                        <tr v-if="deptName=='原料车间'">
                            <th colspan="4">电石渣</th>
                            <th colspan="6">原料磨</th>
                            <th rowspan="2">压缩空气（m3）</th>
                        </tr>
                        <tr v-if="deptName=='烧成车间'">
                            <th colspan="11">回转窑</th>
                            <th colspan="4">煤磨</th>
                            <th rowspan="2">压缩空气（m3）</th>
                        </tr>
                        <tr v-if="deptName=='水泥车间'">
                            <th colspan="5">水泥磨</th>
                            <th colspan="4">包装</th>
                            <th rowspan="2">压缩空气（m3）</th>
                        </tr>
                        <tr>
                            <th>电量（KW.h）</th>
                            <th>电量折标煤（tce）</th>
                            <th v-if="deptName=='烧成车间'">煤粉（t）</th>
                            <th v-if="deptName=='烧成车间'">煤粉折标煤（tce）</th>
                            <th v-if="deptName!='原料车间'">水（t）</th>
                            <th v-if="deptName=='烧成车间'">柴油（t）</th>
                            <th v-if="deptName=='烧成车间'">柴油折标煤（tce）</th>
                            <th v-if="deptName=='烧成车间'">余热锅炉外送蒸汽（t）</th>
                            <th v-if="deptName=='烧成车间'">余热锅炉外送蒸汽折标煤（tce）</th>
                            <th>产品产量（t）</th>
                            <th>单位产品综合能耗（tce/t）</th>
                            <th>电量（KW.h）</th>
                            <th>电量折标煤（tce）</th>
                            <th v-if="deptName=='原料车间'">水（t）</th>
                            <th v-if="deptName=='原料车间'">窑尾余热利用（tce）</th>
                            <th>产品产量（t）</th>
                            <th>单位产品综合能耗（tce/t）</th>
                        </tr>
                    </thead>
                    <tr v-for="(item,index) in tableDatas3" :key="index">
                        <template v-if="item!==null&&item!==undefined">
                            <td v-for="(item1,index1) in item" :key="index1">{{ item1 }}</td>
                        </template>
                    </tr>
                </table>
            </div>
        </el-card>
    </div>
  </template>
<script>
    export default {
        data() {
            return { 
                query:{
                    type:0,
                    year:'',
                    month:'',
                    yearStart:'',
                },
                deptName:'',
                tableName:'全场能源日统计',
                options:[
                    {id:0,name:'日统计'},
                    {id:1,name:'月统计'},
                    {id:2,name:'年统计'},
                ],
                tableHead:['车间','工段','能源分类','1号','2号','3号','4号','5号','6号','7号','8号'],
                deptOptions:[],
                tableDatas3:[],
                sourceData:{}
            };
        },
        mounted() {
            var myDate = new Date();
            let month = myDate.getMonth()+1;
            if(month<10){
                month = '0'+month;
            } 
            this.query.month = myDate.getFullYear()+'-'+month;
            this.getGroup();
            // this.getMgroup();

        },
        methods: {
            typeCange(value){
                if(value==1){
                    this.tableName = '全场能源日统计'
                }else if(value==1){
                    this.tableName = '全场能源月统计'
                }else{
                    this.tableName = '全场能源年统计'
                }
            },
            deptChange(e){
                let that = this;
                that.deptOptions.forEach(item=>{
                    if(item.id==e){
                        that.deptName = item.name;
                        that.tableDatas3 = [];
                    }
                })
            },
			getGroup() {
                let that = this;
				that.$API.system.dept.list.req({ page_size: 3 , type:'dept'}).then(res=>{
					that.deptOptions = res.results;
                    that.deptName = res.results[0].name;
                    that.query.belong_dept = res.results[0].id;
                    that.getData();
				});
			},
            getData(){
                let that = this;
                let params = {};
                let arr = [];
                if(that.query.type==0){//日
                    params.type='day_s';
                    arr = that.query.month.split('-');
                    params.year_s = Number(arr[0]);
                    params.month_s = Number(arr[1]);
                }else if(that.query.type==1){//月
                    params.type='month_s';
                    params.year_s = Number(that.query.year);
                }
                params.mgroup__belong_dept = that.query.belong_dept;

                this.$API.enm.enstat.req(params).then((res) => {
                    let data = res.results;
                    let wrapArr = [];
                    let innerArr = [];
                    let ind = 0;
                    //1、将相同日期或月份/年份的数据放到一组
                    data.forEach(item => {
                        if(that.query.type==0){//日统计 
                            ind = item.day_s-1;
                        }else if(that.query.type==1){//月统计
                            ind = item.month_s-1;
                        }
                        if(wrapArr[ind]){
                        }else{
                            wrapArr[ind] = [];
                        }
                        if(that.deptName=='原料车间'){
                            if(item.mgroup_name=='电石渣'){
                                wrapArr[ind][0]=item
                            }else if(item.mgroup_name=='原料磨'){
                                wrapArr[ind][1]=item
                            }
                        }else if(that.deptName=='烧成车间'){
                            if(item.mgroup_name=='回转窑'){
                                wrapArr[ind][1]=item
                            }else{
                                wrapArr[ind][0]=item
                            }
                        }else{
                            if(item.mgroup_name=='水泥磨'){
                                wrapArr[ind][1]=item
                            }else{
                                wrapArr[ind][0]=item
                            }
                        }
                    });
                    // debugger;
                    // console.log(wrapArr);
                    wrapArr.forEach((item1)=>{
                        //item1------一天的数据
                        if(item1!=undefined){
                            let itemArr = [];
                            let time =item1[0].day_s!=null? item1[0].year_s+'.'+item1[0].month_s+'.'+item1[0].day_s:item1[0].year_s+'.'+item1[0].month_s;
                            itemArr.push(time)
                            itemArr.push( item1[0].elec_consume)
                            itemArr.push( item1[0].elec_coal_consume)
                            if(that.deptName=='烧成车间'){
                                itemArr.push( item1[0].pcoal_consume)//煤粉（t）
                                itemArr.push( item1[0].pcoal_coal_consume)//煤粉折标煤（tce)
                                itemArr.push( item1[0].water_consume)//水（t）
                                itemArr.push( item1[0].pcoal_consume)//柴油（t）
                                itemArr.push( item1[0].pcoal_coal_consume)//柴油折标煤（tce)
                                itemArr.push( item1[0].out_steam)//余热锅炉外送蒸汽（t）
                                itemArr.push( item1[0].out_steam_coal)//余热锅炉外送蒸汽折标煤（tce)
                            }else if(that.deptName=='水泥车间'){
                                itemArr.push( item1[0].water_consume)//水
                            }
                            itemArr.push( item1[0].total_production)
                            itemArr.push( item1[0].cen_consume_unit)

                            itemArr.push( item1[1].elec_consume)
                            itemArr.push( item1[1].elec_consume*0.1229/1000)
                            if(that.deptName=='原料车间'){
                                itemArr.push( item1[1].water_consume)//水
                                itemArr.push( item1[1].kiln_end_heat)//窑尾余热
                            }
                            itemArr.push( item1[1].total_production)
                            itemArr.push( item1[1].cen_consume_unit)
                            itemArr.push( item1[1].cair_consume)//压缩空气
                            innerArr.push(itemArr)
                        }
                    })
                    that.tableDatas3 = innerArr;
                });
            },
            getTableData(){
                this.getData();
            },
            
            handlePrint() {
                this.$PRINT('#myReport');
            },
            exportExcel() {
                this.exportLoading = true;
                this.$XLSX('#myTable', this.tableName)
                this.exportLoading = false;
            },
        }
    };
</script>
<style>
    .printContainer{
        width: 1075px;
    }
    #numTable{
        margin-left: 37px;
    }
    #numTable td{
        height: 32px;
        padding-left: 5px;
    }
    .numCell{
        width: 80px;
    }
    .numCell.numCell_last{
        width: 100px;
    }
    .searchHead{
        display:flex
    }
    .middleText{
        height: 32px;
        line-height: 32px;
        margin: 0 5px;
        display: inline-block;
    }
    .searchBtn{
        margin-left: 5px;
    }
</style>