<template>
    <el-container>
        <el-header style="height: 40%;padding: 0;">
            <el-container>
                <el-header class="panel_title">
                    <div class="left-panel">CEMS监测清单</div>
                    <div class="right-panel">
                        <el-button type="primary" @click="backtoMap">返回地图</el-button>
                    </div>
                </el-header>
                <el-main class="nopadding">
                    <scTable :data="tableData" style="width: 100%;" size="large" :apiObj="apiObj" row-key="id"
                        :params="params"  hidePagination hideDo @row-click="rowClick">
                        <el-table-column type="index" width="50" />
                        <el-table-column prop="number" label="设备编号" width="120" />
                        <el-table-column prop="name" label="设备名称" width="160" />
                        <el-table-column prop="running_state" label="运行状态">
                            <template #default="scope">
                                <!-- <span>{{ scope.row.running_state }}</span> -->
                                <el-tag :type="runningStateEnum[scope.row.running_state]?.type">{{
                            runningStateEnum[scope.row.running_state]?.text }}</el-tag>
                            </template>
                        </el-table-column>

                        <el-table-column label="SO2(mg/m3)" width="130">
                            <template #default="scope">
                                {{ scope.row.envdata.so2_zs ? scope.row.envdata.so2_zs : '-' }}
                            </template>
                        </el-table-column>
						<el-table-column label="SO2达标率(%)" width="130">
                            23%
                        </el-table-column>
                        <el-table-column label="NOX(mg/m3)" width="130">
                            <template #default="scope">
                                {{ scope.row.envdata.nox_zs ? scope.row.envdata.nox_zs : '-' }}
                            </template>
                        </el-table-column>
						<el-table-column label="NOX达标率(%)" width="130">
                           36%
                        </el-table-column>
                        <el-table-column label="颗粒物(mg/m3)" width="130">
                            <template #default="scope">
                                {{ scope.row.envdata.dust_zs ? scope.row.envdata.dust_zs : '-' }}
                            </template>
                        </el-table-column>
						<el-table-column label="颗粒物达标率(%)" width="130">
                            45%
                        </el-table-column>
                        <el-table-column label="温度(℃)">
                            <template #default="scope">
                                {{ scope.row.envdata.temperature ? scope.row.envdata.temperature :
                            '-'
                                }}
                            </template>
                        </el-table-column>
                        <el-table-column label="压力(KPa)">
                            <template #default="scope">
                                {{ scope.row.envdata.pressure ? scope.row.envdata.pressure : '-' }}
                            </template>
                        </el-table-column>
                        <el-table-column label="流速(m/s)">
                            <template #default="scope">
                                {{ scope.row.envdata.speed ? scope.row.envdata.speed : '-' }}
                            </template>
                        </el-table-column>
                        <el-table-column label="湿度(%)">
                            <template #default="scope">
                                {{ scope.row.envdata.humidity ? scope.row.envdata.humidity : '-' }}
                            </template>
                        </el-table-column>
                        <el-table-column label="流量(m3/h)" width="130">
                            <template #default="scope">
                                {{ scope.row.envdata.flux ? scope.row.envdata.flux : '-' }}
                            </template>
                        </el-table-column>
                        <el-table-column label="监测达标率" />
                    </scTable>
                </el-main>
            </el-container>

        </el-header>
        <el-main class="nopadding">
            <el-container>
                <el-main class="nopadding">
                    <el-container>
                        <el-header class="panel_title">
                            <div class="left-panel">
                                CEMS监测详情
                            </div>
                            <div class="right-panel">
                                <el-date-picker v-model="timeRange" type="datetimerange" range-separator="至"
                                    start-placeholder="开始时间" end-placeholder="结束时间" @change="handleQuery"
                                    style="width: 100%" />
                                <el-select v-model="query.time_bucket" placeholder="周期" style="margin-left:4px"
                                    @change="handleQuery">
                                    <el-option v-for="item in timeOptions" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </div>
                        </el-header>
                        <el-main class="nppadding">
                            <div v-show="currentEquipmentId != ''" id="cChart" style="width: 100%; height:100%;"></div>
                        </el-main>
                    </el-container>
                </el-main>
            </el-container>
        </el-main>
    </el-container>
</template>
<script>
import * as echarts from "echarts";
import { runningStateEnum } from "@/utils/enum.js";
export default {
    props: {
        directDetail: {
            type: Boolean,
            default: () => {
                return false;
            },
        },
        eqId: {
            type: String,
            default: () => {
                return '';
            },
        },
    },
    data() {
        return {
            runningStateEnum,
            apiObj: this.$API.em.equipment.list,
            params: { cate__code: 'cems', has_envdata: 'yes' },
            currentEquipmentId: '',
            currentEquipmentName: '',
            timeRange: [],
            timeOptions: [
                { label: '分钟', value: '1 minute' },
                { label: '小时', value: '1 hour' },
                { label: '天', value: '1 day' },
            ],
            basicOption: {
                title: {
                    text: '设备名称'
                },
                tooltip: {
                    trigger: 'axis',
                    confine: true,
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                legend: {

                    // itemStyle: {
                    //     color: '#fff'
                    // }
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                dataset: {
                    source: []
                },
                xAxis: { type: 'category' },
                yAxis: {},
                series: [{ type: 'line', encode: { y: '颗粒物折算值', seriesName: ["颗粒物折算值"] } },
                { type: 'line', encode: { y: 'so2折算值', seriesName: ["so2折算值"] } },
                { type: 'line', encode: { y: 'nox折算值', seriesName: ["nox折算值"] } },
                { type: 'line', encode: { y: '温度', seriesName: ["温度"] } },
                { type: 'line', encode: { y: '压力', seriesName: ["压力"] } },
                { type: 'line', encode: { y: '流速', seriesName: ["流速"] } },
                { type: 'line', encode: { y: '湿度', seriesName: ["湿度"] } },
                { type: 'line', encode: { y: '流量', seriesName: ["流量"] } }
                ]
            },
            query: {
                "end_time": "",
                "start_time": "",
                "time_bucket": "1 hour",
                "equipment_id": ''
            }
        }
    },
    mounted() {
        if (this.directDetail) {
            this.currentEquipmentId = this.eqId;
            this.currentEquipmentName = this.eqId;
            this.query.equipment_id = this.eqId;
            this.$nextTick(() => { this.handleQuery() })
        }




        console.log(runningStateEnum[50])
        this.initTimeRange()
    },
    methods: {
        backtoMap() {
            this.$emit('close')
        },
        initTimeRange() {
            var now = new Date();
            var start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
            this.timeRange = [start, now]
        },
        rowClick(row) {
            this.currentEquipmentId = row.id;
            this.currentEquipmentName = row.name;
            this.query.equipment_id = row.id;
            this.$nextTick(() => { this.handleQuery() })

        },
        initChart() {
            var that = this;
            var myChart = echarts.getInstanceByDom(document.getElementById('cChart'));
            if (myChart == undefined) {
                myChart = echarts.init(document.getElementById('cChart'), 'dark');
            }
            myChart.showLoading();
            this.$API.bi.dataset.exec.req('enp_edata2', {
                query: this.query,
                raise_exception: true
            }).then(res => {
                let newOption = Object.assign({}, this.basicOption);
                // 去除最后一个数
                // let ds0 = res.data.ds0
                // ds0.pop()
                // let series = []
                // if (ds0) {
                //     let ds00 = ds0[0]
                //     for (var x = 1, y = ds00.length; x < y; x++) {
                //         series.push({ type: 'line' })
                //     }
                // }
                newOption.dataset.source = res.data.ds0;
                // newOption.series = series;
                newOption.title.text = this.currentEquipmentName;
                myChart.setOption(newOption);
            }).then(() => { myChart.hideLoading() })

        },
        handleQuery() {
            let that = this;
            let timeRange = Object.assign([], that.timeRange);;
            let time1 = timeRange[0]
            let time2 = timeRange[1];
            let formatstr = 'yyyy-MM-dd hh:mm:ss'
            if (this.query.time_bucket == '1 minute') {
                time2 = new Date(time2.getTime() + 1000 * 60);
                formatstr = 'yyyy-MM-dd hh:mm:00'
            }
            else if (this.query.time_bucket == '1 hour') {
                time2 = new Date(time2.getTime() + 1000 * 60 * 60);
                formatstr = 'yyyy-MM-dd hh:00:00'
            }
            else if (this.query.time_bucket == '1 day') {
                time2 = new Date(time2.getTime() + 1000 * 60 * 60 * 24);
                formatstr = 'yyyy-MM-dd'
            }
            this.query.start_time = this.$TOOL.dateFormat(time1, formatstr)
            this.query.end_time = this.$TOOL.dateFormat(time2, formatstr)
            this.initChart()
        }
    },

}
</script>
