<template>
    <div class="bbsl-common-page" @click="commonPageClick">
        <div class="bbsl-table-search">
            <el-form v-model="queryParam" :inline="true">
                <el-row :gutter="10">
                    <el-col :span="6">
                        <el-form-item label="时间">
                            <el-date-picker
                                v-model="queryParam.params.day"
                                type="date"
                                placeholder="选择日期"
                                value-format="yyyy-MM-dd"
                                @change="changeDate"
                                :picker-options="pickerOptions0"
                            >
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item>
                            <el-button
                                type="primary"
                                icon="el-icon-search"
                                size="mini"
                                @click="onClickSearch"
                                >搜索
                            </el-button>
                            <el-button
                                icon="el-icon-refresh"
                                size="mini"
                                @click="resetQuery"
                                >重置</el-button
                            >
                            <el-button
                                size="mini"
                                icon="el-icon-download"
                                type="warning"
                                @click="updateExcl"
                                >导出
                            </el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div class="bbsl-table-content" ref="contentPanel">
            <div class="bbsl-btn-content" ref="btnPanel"></div>
            <el-table
                ref="table"
                stripe
                size="mini"
                :height="tableMaxHeight"
                :style="{width: '100%'}"
                v-loading="loading"
                border
                :data="tableData"
                :header-cell-style="{'text-align': 'center'}"
                :cell-style="{'text-align': 'center'}"
                show-summary
                :summary-method="getSummaries"
            >
                <el-table-column
                    type="index"
                    width="80"
                    label="序号"
                    align="center"
                ></el-table-column>
                <el-table-column
                    min-width="130"
                    sortable
                    prop="rsnm"
                    label="水库名称"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                    min-width="120"
                    sortable
                    prop="rz"
                    label="当前水位(m)"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                    min-width="130"
                    sortable
                    prop="realRstpc"
                    label="当前库容(万m³)"
                    align="center"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                    min-width="130"
                    sortable
                    prop="dyp"
                    label="日累计降雨量(mm)"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                    min-width="130"
                    sortable
                    prop="dsfllv"
                    label="设计洪水位(m)"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                    min-width="130"
                    sortable
                    prop="nrstlv"
                    label="正常蓄水位(m)"
                    show-overflow-tooltip
                >
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script>
import resWaterNewspaper from '@/api/monitor/resMonitor/resWaterNewspaper.js'
import dictUtils from '@/components/dict/DictSelectUtils.js'
import {TableMixin} from '@/mixins/tableMixin'
import moment from 'moment'
import req from '@/request.js'
export default {
    name: 'resWaterNewspaper',
    components: {},
    mixins: [TableMixin],
    data() {
        return {
            pickerOptions0: {
                disabledDate(time) {
                    return time.getTime() > Date.now() - 8.64e6 //如果没有后面的-8.64e6就是不可以选择今天的
                },
            },
            scopeTime: '',
            loading: false,
            queryParam: {
                pageBean: {
                    pageSize: -1,
                    page: 1,
                    showTotal: true,
                },
                params: {
                    day: '',
                },
            },
            tableData: [],
            baseUrl: null,
        }
    },
    updated() {
        this.$nextTick(() => {
            if (this.$refs.table) {
                this.$refs.table.doLayout()
            }
        })
    },
    created() {
        this.baseUrl = window.context.portal
        this.getCurrentMonthLast()
        this.getDateList()
    },
    methods: {
        changeDate() {
            console.log(this.scopeTime)
        },
        // 默认当天时间
        getCurrentMonthLast() {
            let date = new Date()
            // 获取当前月份
            let nowMonth = date.getMonth() + 1
            // 获取当前是几号
            let strDate = date.getDate()
            // 添加分隔符“-”
            let seperator = '-'
            // 对月份进行处理，1-9月在前面添加一个“0”
            if (nowMonth >= 1 && nowMonth <= 9) {
                nowMonth = '0' + nowMonth
            }
            // 对月份进行处理，1-9号在前面添加一个“0”
            if (strDate >= 0 && strDate <= 9) {
                strDate = '0' + strDate
            }
            // 最后拼接字符串，得到一个格式为(yyyy-MM-dd)的日期
            let nowDate =
                date.getFullYear() + seperator + nowMonth + seperator + strDate
            this.queryParam.params.day = nowDate
        },
        //导出excl
        updateExcl() {
            //导出excl
            const loading = this.$loading({
                lock: true,
                text: '导出中...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)',
            })
            let param = {
                groupRelation: 'AND',
                groupTree: {},
                pageBean: {
                    page: 1,
                    pageSize: -1,
                    showTotal: true,
                },
                params: {
                    day: this.queryParam.params.day,
                },
                querys: [
                    {
                        group: 'main',
                        operation: 'EQUAL',
                        parentGroup: '',
                        property: '',
                        relation: 'AND',
                        value: {},
                    },
                ],
                sorter: [
                    {
                        direction: 'ASC',
                        property: '',
                    },
                ],
            }
            resWaterNewspaper.resDailyDerived(param, (res) => {
                loading.close()
                if (!!res) {
                    this.$message.success('导出成功')
                }
            })
        },
        getDateList() {
            // this.getCurrentMonthLast()
            this.loading = true
            this.tableData = []
            resWaterNewspaper.resDailyData(this.queryParam, (res) => {
                if (res.state) {
                    this.tableData = res.value.rows
                    console.log(this.tableData)
                    this.tableData.forEach((item) => {
                        if (item.rz == undefined) {
                            item['rz'] = 0
                        }
                        if (item.dyp == undefined) {
                            item['dyp'] = 0
                        }
                    })
                    this.loading = false
                } else {
                    this.$message.error(res.message)
                }
            })
        },
        // // 点击查询
        onClickSearch() {
            this.queryParam.pageBean.page = 1

            // return
            this.getDateList()
        },
        // 重置
        resetQuery() {
            this.queryParam.params = {}
            this.scopeTime = ''
            this.onClickSearch()
        },
        getSummaries(param) {
            const {columns, data} = param
            const sums = []
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = '总库容'
                    return
                }
                if (column.property == 'realRstpc') {
                    const values = data.map((item) => {
                        let strValue = '',
                            value = 0
                        if (item[column.property]) {
                            strValue = item[column.property].replace('约', '')
                            value = Number(strValue)
                        }
                        return value
                    })

                    if (!values.every((value) => isNaN(value))) {
                        sums[index] = values.reduce((prev, curr) => {
                            const value = Number(curr)
                            if (!isNaN(value)) {
                                return prev + curr
                            } else {
                                return prev
                            }
                        }, 0)
                        sums[index] = sums[index].toFixed(3)
                        sums[index] += ' 万m³'
                    } else {
                        sums[index] = '--'
                    }
                } else {
                    sums[index] = ''
                }
            })
            this.$nextTick(() => {})
            console.log(sums)
            return sums
        },
    },
}
</script>
<style lang="scss" scoped>
.btn-content {
    display: flex;
}

.el-select-dropdown__item span {
    color: rgb(51, 51, 51) !important;
}

.el-select-dropdown__item {
    color: #9a9a9a !important;
}

.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
    background: #f5f7fa;
}

.btn-content :first-child {
    margin: 0 0 0 0 !important;
}

.el-switch__label--left {
    position: relative;
    left: 45px;
    color: #fff;
    z-index: -1111;
}

.el-switch__core {
    width: 50px !important;
}

.el-switch__label--right {
    position: relative;
    right: 46px;
    color: #fff;
    z-index: -1111;
}

.el-switch__label--right.is-active {
    z-index: 1111;
    color: #fff !important;
}

.el-switch__label--left.is-active {
    z-index: 1111;
    color: #9c9c9c !important;
}

.sampling {
    ::v-deep .el-dialog__body {
        padding: 30px 20px 0 20px;
    }
}

::-webkit-scrollbar {
    background: #fff !important;
}

.bbsl-pagination {
    bottom: 10px !important;
}
</style>
