<template>
    <div class="app-container">
        <el-card class="box-carde">
            <div slot="header" class="clearfix">
                <span>山东发电计划</span>
            </div>

            <el-header style="padding: 0px;display:flex;justify-content:space-between;align-items: center">
                <div style="display: inline;">

                    <el-date-picker
                            v-model="dateTime"
                            size="mini"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"/>
                    <el-button type="primary" size="mini" style="margin-left: 5px"
                               @click="searchEmp">查询数据
                    </el-button>
                </div>
            </el-header>
            <div style="padding-top: 10px">
                <el-tabs v-model="activeName" type="card">
                    <el-tab-pane label="图表" name="first">
                        <el-main style="padding-left: 0px;padding-top: 0px">
                            <div class="container">
                                <div id="forcastdataChart" ref="forcastdataChart"/>
                            </div>
                        </el-main>
                    </el-tab-pane>

                    <el-tab-pane label="列表" name="second">
                        <vxe-table
                                highlight-current-row
                                :keep-source="true"
                                align="center"
                                export-config
                                :loading="loading"
                                ref="xTable"
                                auto-resize
                                border
                                resizable
                                show-overflow
                                :data="tableData"
                                height="500px"
                                max-height="800px"
                        >

                            <vxe-table-column field="backupA" sortable title="时间"/>
                            <vxe-table-column field="planValue" sortable title="值"/>

                            <template v-slot:empty>
                        <span style="color: red;">
                          <p>没有更多数据了！</p>
                        </span>
                            </template>
                        </vxe-table>
                    </el-tab-pane>
                </el-tabs>
            </div>

        </el-card>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                dateTime: [new Date(new Date().toLocaleDateString()).getTime(), new Date(new Date().toLocaleDateString()).getTime() + 60 * 60 * 24 * 1000],
                filterName: '',
                tableData: [],
                stationData: [],
                loading: false,
                activeName: 'first',
                fdataVals: [],
                fdataMVals: [],
                realpowers: [],
                datatimes: [],
                xzxs: '1',
                yxts: '1',
            }
        },
        mounted: function () {
        },
        methods: {
            searchEmp() {
                this.$axios.get('/pwoerPlanSD/' + Math.round(this.dateTime[0]) + '/' +
                    Math.round(this.dateTime[1])).then((res) => {
                    console.log(res.data)
                    this.tableData = res.data
                    this.fdataVals = []
                    this.datatimes = []
                    for (var i = 0; i < this.tableData.length; i++) {
                        this.fdataVals.push(this.tableData[i].planValue)
                        this.datatimes.push(this.tableData[i].planTime)
                    }
                    this.drawLine()
                    this.loading = false
                }).catch((error) => {
                    this.$message.error('获取预测数据出错' + error)
                })
            },
            updateEmp() {
                if (this.stationName === '') {
                    this.$message({
                        message: '请选择场站！',
                        type: 'warning'
                    });
                    return
                }
                this.loading = true
                this.$axios.get('/forcastdata/' + this.stationName + '/' + Math.round(this.dateTime[0]) + '/' +
                    Math.round(this.dateTime[1]) + '/' + this.xzxs + '/' + this.yxts
                ).then((res) => {
                    if (res.code === 0) {
                        this.searchEmp()
                    }
                }).catch((error) => {
                    this.loading = false
                    this.$message.error('更新预测数据出错' + error)
                })
            },
            createEmp() {
                if (this.stationName === '') {
                    this.$message({
                        message: '请选择场站！',
                        type: 'warning'
                    });
                    return
                }
                this.loading = true
                this.$axios.get('/forcastdata/' + this.stationName).then((res) => {
                    this.loading = false
                    this.$message.info('文件生成成功！')
                }).catch((error) => {
                    this.$message.error('获取系统信息出错' + error)
                })
            },
            drawLine() {
                let elementById = document.getElementById('forcastdataChart')
                let echarts = this.$echarts.init(elementById)
                let option = {
                    title: {
                        text: '发电计划'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['发电计划']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: this.datatimes
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '发电计划',
                            type: 'line',
                            data: this.fdataVals
                        }
                    ]
                }
                echarts.setOption(option, true)
                window.onresize = echarts.resize// 图表自适应浏览器大小
            },
        }
    }
</script>
<style>
    .keyword-lighten {
        color: #000;
        background-color: #FFFF00;
    }

    #forcastdataChart {
        width: 100%;
        height: 400px;
    }
</style>
