<template>
    <el-container>
        <el-header>
            <div class="left-panel">
                <el-select
                    v-model="query.type"
                    placeholder="查询类型"
                    clearable
                    class="headerSearch"
                    @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.searchDay"
                    type="date"
                    value-format="YYYY-MM-DD"
                    format="YYYY-MM-DD"
                    placeholder="查询日期"
                    v-if="query.type==0"
                    class="headerSearch"
                />
                <el-date-picker
                    v-model="query.searchMonth"
                    type="month"
                    value-format="YYYY-MM"
                    format="YYYY-MM"
                    placeholder="查询月份"
                    v-if="query.type==1"
                    class="headerSearch"
                />
                <el-date-picker
                    v-model="query.searchYear"
                    type="year"
                    value-format="YYYY"
                    format="YYYY"
                    placeholder="查询年份"
                    v-if="query.type==2"
                    class="headerSearch"
                />
                <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" style="width: 100%;height: 100%;">
				<div ref="print" id="myReport" class="printContainer">
                    <el-table
                        id="hourBaseTable"
                        :data="tableDatas"
                        border
                    >
                        <el-table-column label="能源监察报表" align="center">
                            <el-table-column label="序号" prop="index" width="60">
                            </el-table-column>
                            <el-table-column label="指标名称" prop="name" min-width="100">
                            </el-table-column>
                            <el-table-column label="能耗" prop="value" min-width="80">
                            </el-table-column>
                            <el-table-column label="备注" prop="note" min-width="60">
                            </el-table-column>
                        </el-table-column>
                    </el-table>
                </div>
			</el-card>
		</el-main>
    </el-container>
  </template>
<script>
    export default {
        data() {
            return { 
                query:{
                    type:0,
                    year:'',
                    month:'',
                    yearStart:'',
                },
                currentDay:'',
                tableName:'能源监察日报表',
                options:[
                    {id:0,name:'日统计'},
                    {id:1,name:'月统计'},
                    {id:2,name:'年统计'},
                ],
                tableDatas:[
                    {index:1,name:'水泥单位产品综合能耗(kgce/t)',value:0,note:''},
                    {index:2,name:'熟料单位产品综合能耗(kgce/t)',value:0,note:''},
                    {index:3,name:'熟料单位产品综合电耗(kW·h/t)',value:0,note:''},
                    {index:4,name:'熟料单位产品综合煤耗(kgce/t)',value:0,note:''},
                    {index:5,name:'水泥单位产品分布电耗(kW·h/t)',value:0,note:''},
                ],

            };
        },
        mounted() {
            var myDate = new Date();
            this.query.searchDay =this.currentDay = this.$TOOL.dateFormat2(myDate);
            this.getData();
        },
        methods: {
            typeCange(value){
                if(value==1){
                    this.tableName = '能源监察日报表'
                }else if(value==1){
                    this.tableName = '能源监察月报表'
                }else{
                    this.tableName = '能源监察年报表'
                }
            },
            getData(){
                let that = this;
                let arr = [],type='',year_s = 2024,month_s = 1,day_s = 1;
                if(that.query.type==0){//日
                    type='day_s';
                    arr = that.query.searchDay.split('-');
                    year_s = Number(arr[0]);
                    month_s = Number(arr[1]);
                    day_s = Number(arr[2]);
                }else if(that.query.type==1){//月
                    type='month_s';
                    arr = that.query.searchMonth.split('-');
                    year_s = Number(arr[0]);
                    month_s = Number(arr[1]);
                    day_s = null;
                }else if (that.query.type==2){
                    type='year_s';
                    day_s = null;
                    month_s = null;
                    year_s = Number(that.query.searchYear);
                }
                let params1 = {
                    page:0,
                    type:type,
                    year_s:year_s,
                    month_s:month_s,
                    day_s:day_s,
                    mgroup__name:'水泥磨'
                }
                that.$API.enm.enstat.req(params1).then((res) => {
                    console.log(res[0]);
                    that.tableDatas[0].value = res[0].cen_consume_unit;
                    that.tableDatas[4].value = res[0].elec_consume_unit;
                });
                let params2 = {
                    page:0,
                    type:type,
                    year_s:year_s,
                    month_s:month_s,
                    day_s:day_s,
                    mgroup__name:'回转窑'
                }
                that.$API.enm.enstat.req(params2).then((res2) => {
                    that.tableDatas[1].value = res2[0].cen_consume_unit;
                    that.tableDatas[2].value = res2[0].celec_consume_unit;
                    that.tableDatas[3].value = res2[0].coal_consume_unit;
                    console.log(res2[0]);
                });
                
            },
            getTableData(){
                this.getData();
            },
            
            handlePrint() {
                this.$PRINT('#myReport');
            },
            exportExcel() {
                this.exportLoading = true;
                this.$XLSX('#hourBaseTable', this.tableName)
                this.exportLoading = false;
            },
        }
    };
</script>
<style>
</style>