<template>
    <el-container>
        <el-main class="nopadding" style="padding: 10px">
            <el-row>
                <xtSelect
                        :apiObj="apiObjM"
                        :params="paramsM"
                        style="width: 600px"
                        v-model = "query.mpoint"
                        placeholder="选择测点"
                    >
                        <el-table-column label="测点名" prop="name"></el-table-column>
                        <el-table-column label="别名" prop="nickname"></el-table-column>
                        <el-table-column label="计量物料" prop="material_name"></el-table-column>
                </xtSelect>
            </el-row>
            <div style="height: 6px;"></div>
            <el-row style="width: 600px;">
                <el-date-picker v-model="timeRange" type="datetimerange" 
					value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
					start-placeholder="开始时间" end-placeholder="结束时间"
					format="YYYY-MM-DD HH"
                    popper-class="tpc"/>
            </el-row>
            <div style="height: 6px;"></div>
            <el-row>
                <el-button type="primary" @click="start" v-loading="bLoading">开始计算</el-button>
            </el-row>
            <div style="height: 6px;"></div>
            <el-row style="width: 600px;">
                <el-table
                        id="hourBaseTable"
                        :data="tableData"
                        border
                    >
                        <el-table-column label="指标聚合" align="center">
                            <el-table-column label="指标名称" prop="mpoint__name" min-width="80">
                            </el-table-column>
                            <el-table-column label="指标别名" prop="mpoint__nickname" min-width="100">
                            </el-table-column>
                            <el-table-column label="计算值" prop="total_val" min-width="100">
                            </el-table-column>
                        </el-table-column>
                    </el-table>
            </el-row>

        </el-main>
    </el-container>

</template>
<script>
export default {
    name: 'enstat',
    data() {
        return {
            apiObjM: this.$API.enm.mpoint.list,
			paramsM: {page: 0},
            timeRange: [],
            tableData: [],
            bLoading: false,
            query:{
                mpoint: null,
                start_time: null,
                end_time: null
            }
        }
    },
    methods: {
        start() {
            let that = this;
            this.query.type = "hour";
            this.tableData = [];
            if (this.query.mpoint == null) {
                this.$message.error('请选择测点');
                return;
            }
            if (this.timeRange.length == 0) {
                this.$message.error('请选择时间范围');
                return;
            }
            this.query.start_time = this.timeRange[0]
            this.query.end_time = this.timeRange[1]
            this.bLoading = true;
            this.$API.enm.mpointstat.groupValues.req(this.query).then((res)=>{
                this.bLoading = false;
                this.tableData = res;
            }).catch(e=>{
                this.bLoading = false;
            })
        }
    }
}
</script>

<style>
.tpc .el-time-spinner__wrapper {
  width:100% !important;
}
.tpc .el-scrollbar:nth-of-type(2) {
  display: none !important;
}
</style>