<template>
    <el-container>
        <el-header class="panel_title">
            <div class="left-panel">
                环境空气质量监测实时数据
            </div>
            <div class="right-panel">
                <div class="backMap" @click="backtoMap">
                    切换地图
                    <el-icon>
                        <Switch />
                    </el-icon>
                </div>
            </div>
        </el-header>
        <el-main class="nppadding">
            <el-container>
                <el-header class="searchWrap">
                    <div class="left-panel">
                    </div>
                    <div class="right-panel">
                        <el-select v-model="time_bucket" placeholder="周期" style="margin-left:4px"
                           >
                            <el-option v-for="item in timeOptions" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                        <el-select v-model="query.metric" placeholder="监测物" style="margin-left:4px"
                           >
                            <el-option v-for="item in metricOptions" :key="item.value" :label="item.label"
                                :value="item.value"  />
                        </el-select>
                        <el-button @click="handleQuery">查询</el-button>
                    </div>
                </el-header>
                <el-main>
                    <scTable :data="tableData"  hideDo v-show="time_bucket=='minute'">
                        <el-table-column type="index" />
                        <el-table-column prop="equipment_name" label="站点名称" />
                        <el-table-column prop="metric_0" label="0" />
                        <el-table-column prop="metric_5" label="5" />
                        <el-table-column prop="metric_10" label="10" />
                        <el-table-column prop="metric_15" label="15" />
                        <el-table-column prop="metric_20" label="20" />
                        <el-table-column prop="metric_25" label="25" />
                        <el-table-column prop="metric_30" label="30" />
                        <el-table-column prop="metric_35" label="35" />
                        <el-table-column prop="metric_40" label="40" />
                        <el-table-column prop="metric_45" label="45" />
                        <el-table-column prop="metric_50" label="50" />
                        <el-table-column prop="metric_55" label="55" />
                        <el-table-column prop="metric_hour" label="小时均值" />
                    </scTable>
                    <scTable :data="tableData"  hideDo v-show="time_bucket=='hour'">
                        <el-table-column type="index" />
                        <el-table-column prop="equipment_name" label="站点名称" />
                        <el-table-column prop="val_1" label="1" />
                        <el-table-column prop="val_2" label="2" />
                        <el-table-column prop="val_3" label="3" />
                        <el-table-column prop="val_4" label="4" />
                        <el-table-column prop="val_5" label="5" />
                        <el-table-column prop="val_6" label="6" />
                        <el-table-column prop="val_7" label="7" />
                        <el-table-column prop="val_8" label="8" />
                        <el-table-column prop="val_9" label="9" />
                        <el-table-column prop="val_10" label="10" />
                        <el-table-column prop="val_11" label="11" />
                        <el-table-column prop="val_12" label="12" />
                        <el-table-column prop="val_13" label="13" />
                        <el-table-column prop="val_14" label="14" />
                        <el-table-column prop="val_15" label="15" />
                        <el-table-column prop="val_16" label="16" />
                        <el-table-column prop="val_17" label="17" />
                        <el-table-column prop="val_18" label="18" />
                        <el-table-column prop="val_19" label="19" />
                        <el-table-column prop="val_20" label="20" />
                        <el-table-column prop="val_21" label="21" />
                        <el-table-column prop="val_22" label="22" />
                        <el-table-column prop="val_23" label="23" />
                        <el-table-column prop="val_24" label="24" />
                        <el-table-column prop="val_day" label="日均值" />
                    </scTable>
                </el-main>
            </el-container>
        </el-main>
    </el-container>
</template>
<script>
export default {
    data() {
        return {
            tableData:[],
            metricOptions: [
                { label: 'PM2.5', value: 'pm25' },
                { label: 'PM10', value: 'pm10' },
            ],
            timeOptions: [
                { label: '分钟上报值', value: 'minute' },
                { label: '小时均值', value: 'hour' },
            ],
            time_bucket:'minute',
            query: {
                year: '',
                month: '',
                day: '',
                hour: '',
                metric: 'pm25',
                ecate_code: "aqms",
            },
        }
    },
    mounted() {
        this.getTime();
    },
    methods: {
        getTime() {
            var now = new Date();
            this.query.year = now.getFullYear();
            this.query.month = now.getMonth() + 1;
            this.query.day = now.getDate();
            this.query.hour = now.getHours();
            this.handleQuery();
        },
        handleQuery() {
            let that = this;
            console.log(that.query);
            that.getTableData();
        },
        getTableData() { 
            let that = this;
            let exec_search = '';
            if (that.time_bucket == 'minute') {
                exec_search='enp_edata_metric_nodrain'
            } else if (that.time_bucket == 'hour') {
                exec_search = 'enp_edata_hour_nodrain';
            }
            that.$API.bi.dataset.exec.req(exec_search, {
                query: that.query,
                raise_exception: true
            }).then(res => { 
                console.log(res.data2.ds0);
                this.tableData = res.data2.ds0;
            })
        },
    },

}
</script>