<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-select
                                size="mini"
                                filterable
                                v-model="querys[0].value"
                                clearable
                                multiple
                                collapse-tags
                                placeholder="请选择水库名称"
                            >
                                <el-option
                                    v-for="item in rsnms"
                                    :key="item.id"
                                    :label="item.rsnm"
                                    :value="item.rscd"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="行政区划">
                            <el-cascader
                                clearable
                                filterable
                                size="mini"
                                :options="basAdNames"
                                v-model="querys[2].value"
                                :props="setKesLabel"
                                @change="onhouChange"
                            >
                                <template slot-scope="{node, data}">
                                    <span>{{ data.name }}</span>
                                    <span v-if="!node.isLeaf"
                                        >({{
                                            data.children === []
                                                ? ''
                                                : data.children.length
                                        }})</span
                                    >
                                </template>
                            </el-cascader>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="时间">
                            <el-date-picker
                                v-model="timeValue"
                                @change="changeDate"
                                type="datetime"
                                placeholder="选择日期时间"
                            >
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="6">
						<el-form-item label="类型">
							
						</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">
                <el-button @click="openContrast"> 库容对比 </el-button>
            </div>
            <el-table
                ref="table"
                stripe
                size="mini"
                :height="tableMaxHeight"
                :style="{width: '100%'}"
                table-footer-class-name="footer-class"
                v-loading="loading"
                border
                :data="tableData"
                sum-text="总和"
                :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="hy"
                    label="当前库容(万m³)"
                    align="center"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                    min-width="130"
                    sortable
                    prop="ddwl"
                    label="死水位(m)"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                    min-width="130"
                    sortable
                    prop="ddstcp"
                    label="死库容(万m³)"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                    min-width="130"
                    sortable
                    prop="acstcp"
                    label="兴利库容(万m³)"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                    min-width="130"
                    sortable
                    prop="ttstcp"
                    label="总库容(万m³)"
                    show-overflow-tooltip
                >
                </el-table-column>
            </el-table>
        </div>
        <reservoirCapacityDialog
            ref="reservoirCapacityDialog"
        ></reservoirCapacityDialog>
    </div>
</template>
<script>
import hdWaterLatest from '@/api/monitor/resMonitor/hdWaterLatest.js'
import reservoirCapacityDialog from './components/reservoirCapacityDialog.vue'
import reservoirCapacity from '@/api/monitor/resMonitor/reservoirCapacity.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: 'reservoirCapacity',
    components: {
        reservoirCapacityDialog,
    },
    mixins: [TableMixin],
    data() {
        return {
            timeValue: '',
            rscdValue: '',
            scopeTime: '',
            loading: false,
            basAdNames: [], //行政区
            setKesLabel: {
                value: 'code',
                label: 'name',
                children: 'children',
            },
            querys: [
                {
                    group: 'main',
                    operation: 'IN',
                    parentGroup: '',
                    property: 'bs.rscd',
                    relation: 'AND',
                    value: '',
                },
                {
                    group: 'main',
                    operation: 'EQUAL',
                    parentGroup: '',
                    property: 'ri.tm',
                    relation: 'AND',
                    value: '',
                },
                {
                    group: 'main',
                    operation: 'EQUAL',
                    parentGroup: '',
                    property: 'bs.addvcd',
                    relation: 'AND',
                    value: '',
                },
            ],
            queryParam: {
                pageBean: {
                    pageSize: -1,
                    page: 1,
                    showTotal: true,
                },
                params: {
                    tm: '',
                },
                sorter: [
                    {
                        direction: 'ASC',
                        property: '',
                    },
                ],
            },
            tableData: [],
            rsnms: [], //水库下拉，
            baseUrl: null,
        }
    },
    updated() {
        this.$nextTick(() => {
            if (this.$refs.table) {
                this.$refs.table.doLayout()
            }
        })
    },
    created() {
        this.queryParam.params.tm = moment().format('YYYY-MM-DD 8:00:00')
        this.timeValue = moment().format('YYYY-MM-DD 8:00:00')
        this.baseUrl = window.context.portal
        // this.getCurrentMonthLast()
        this.getSysDict()
        this.getDateList()
    },
    methods: {
        onhouChange(val) {
            if (val) {
                this.querys[2].value = val[val.length - 1]
            } else {
                this.querys[2].value = null
            }
        },
        //指定列求和
        getSummaries(param) {
            const {columns, data} = param
            const sums = []
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = '合计'
                    return
                }
                const values = data.map((item) => Number(item[column.property]))
                if (
                    column.property == 'hy' ||
                    column.property == 'ddstcp' ||
                    column.property == 'acstcp' ||
                    column.property == 'ttstcp'
                ) {
                    sums[index] = values.reduce((prev, curr) => {
                        const value = Number(curr)
                        if (!isNaN(value)) {
                            return Math.round((prev + curr) * 1000) / 1000
                        } else {
                            return Math.round(prev * 1000) / 1000
                        }
                    }, 0)
                    sums[index]
                }
            })
            return sums
        },
        openContrast() {
            this.$refs.reservoirCapacityDialog.openShare()
        },
        //获取字典数据
        getSysDict() {
            reservoirCapacity.getRsnm({}, (res) => {
                this.rsnms = res.value
            })
            // 行政区查询
            hdWaterLatest.getbasAdName({}, (res) => {
                this.basAdNames = res.value
            })
        },
        changeDate() {
            if (this.timeValue == null) {
                this.queryParam.params.tm = ''
            } else {
                let cstDate = new Date(this.timeValue)
                let year = cstDate.getFullYear()
                let month = (cstDate.getMonth() + 1).toString().padStart(2, '0')
                let day = cstDate.getDate().toString().padStart(2, '0')
                let hours = cstDate.getHours().toString().padStart(2, '0')
                let minutes = cstDate.getMinutes().toString().padStart(2, '0')
                let seconds = cstDate.getSeconds().toString().padStart(2, '0')
                this.queryParam.params.tm = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
            }
        },

        getDateList() {
            // this.getCurrentMonthLast()
            this.loading = true
            this.tableData = []
            this.queryParam.querys = []
            if (this.querys[0].value.length > 0) {
                this.queryParam.querys.push(this.querys[0])
            }
            if (this.querys[2].value) {
                this.queryParam.querys.push(this.querys[2])
            }
            reservoirCapacity.resDailyData(this.queryParam, (res) => {
                if (res.state) {
                    this.tableData = res.value.rows
                    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() {
            if (
                this.querys[0].value.length > 0 ||
                this.queryParam.params.tm != ''
            ) {
                this.queryParam.pageBean.page = 1
                this.getDateList()
            } else {
                this.$message.warning('请选择查询条件')
            }
        },
        // 重置
        resetQuery() {
            this.queryParam.params = {
                tm: moment().format('YYYY-MM-DD 8:00:00'),
            }
            this.queryParam.querys = []
            this.querys.forEach((item) => {
                item.value = ''
            })
            this.scopeTime = ''
            this.onClickSearch()
        },
    },
}
</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;
	}

	/deep/ .el-table__footer .cell {
		text-align: center;
	}
</style>
