<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-input
                                size="mini"
                                clearable
                                placeholder="请输入测点名称"
                                v-model="queryParam.params.stnm"
                            >
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="测点">
                            <el-select
                                size="mini"
                                filterable
                                v-model="queryParam.params.stcd"
                                clearable
                                placeholder="请选择测点"
                            >
                                <el-option
                                    v-for="item in stnms"
                                    :key="item.id"
                                    :label="item.stnm"
                                    :value="item.stcd"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="降雨日期">
                            <el-date-picker
                                size="mini"
                                v-model="timeValue"
                                type="year"
                                value-format="yyyy"
                                placeholder="选择年份"
                            >
                            </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 type="text" @click.stop="openMore">
                                更多
                                <i
                                    :class="
                                        showMore
                                            ? 'el-icon-arrow-up'
                                            : 'el-icon-arrow-down'
                                    "
                                ></i>
                            </el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div
                    class="bbsl-search-more"
                    style="width: 650px"
                    v-if="showMore"
                >
                    <el-row :gutter="10">
                        <el-col :span="12">
                            <el-form-item label="应用分类">
                                <el-select
                                    size="mini"
                                    v-model="queryParam.params.appType"
                                    clearable
                                    placeholder="请选择应用分类"
                                >
                                    <el-option
                                        v-for="item in czyyfl"
                                        :key="item.value"
                                        :label="item.name"
                                        :value="item.value"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="行政区划">
                                <el-cascader
                                    clearable
                                    filterable
                                    size="mini"
                                    :options="basAdNames"
                                    v-model="queryParam.params.addvcd"
                                    :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-row>
                </div>
            </el-form>
        </div>
        <div class="bbsl-table-content" ref="contentPanel">
            <div class="bbsl-btn-content" ref="btnPanel"></div>
            <el-table
                stripe
                size="mini"
                :height="tableMaxHeight"
                :style="{width: '100%'}"
                ref="multipleSelection"
                v-loading="loading"
                border
                :data="tableData"
                :header-cell-style="{'text-align': 'center'}"
                :cell-style="{'text-align': 'center'}"
                :default-sort="{prop: 'sum', order: 'descending'}"
            >
                <el-table-column
                    fixed
                    type="index"
                    width="55"
                    label="序号"
                ></el-table-column>
                <el-table-column
                    fixed
                    min-width="110"
                    sortable
                    prop="stcd"
                    label="测站代码"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                    min-width="130"
                    fixed
                    sortable
                    prop="stnm"
                    label="测站名称"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                    fixed
                    min-width="80"
                    sortable
                    prop="sum"
                    label="合计"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                    v-for="(item, index) in tableHearder"
                    :key="item.key"
                    :label="item.name"
                    align="center"
                    show-overflow-tooltip
                >
                    <template slot-scope="scope">
                        {{
                            scope.row.groupData[index]
                                ? scope.row.groupData[index].drp
                                : ''
                        }}
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                ref="paginationPanel"
                align="right"
                class="bbsl-pagination"
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryParam.pageBean.page"
                :page-sizes="[20, 30, 40, 50, 100, 200]"
                :page-size="queryParam.pageBean.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            ></el-pagination>
        </div>
    </div>
</template>
<script>
import dayYlQuery from '@/api/monitor/resMonitor/dayYlQuery.js'
import dictUtils from '@/components/dict/DictSelectUtils.js'
import moment from 'moment'
import {TableMixin} from '@/mixins/tableMixin'
import req from '@/request.js'
export default {
    name: 'displacement',
    components: {},
    mixins: [TableMixin],
    data() {
        return {
            dates: null,
            total: 0,
            tableData: [],
            loading: false,
            basAdNames: [], //行政区
            yjdjs: [],
            statuss: [
                {
                    name: '在线',
                    value: '1',
                },
                {
                    name: '不在线',
                    value: '0',
                },
            ],
            multipleSelection: [], // 复选框
            stnms: [], //测站下拉
            setKesLabel: {
                value: 'code',
                label: 'name',
                children: 'children',
            },
            czyyfl: [],
            queryParam: {
                pageBean: {
                    pageSize: 100,
                    page: 1,
                },
                params: {
                    day: null,
                    stcd: null,
                    addvcd: null,
                    pattern: 'Y',
                },
            },
            tableHearder: [],
            timeValue: '',
        }
    },
    created() {
        this.czyyfl = dictUtils.getDictItemsFromCache('czyyfl')
        this.queryParam.params.day = moment().format('YYYY-MM-DD')
        this.timeValue = moment().format('YYYY')
        this.getSysDict()
    },
    methods: {
        onhouChange(val) {
            if (val) {
                this.queryParam.params.addvcd = val[val.length - 1]
            } else {
                this.queryParam.params.addvcd = null
            }
        },
        openMore() {
            this.showMore = !this.showMore
        },
        getDateList() {
            this.loading = true
            this.tableData = []
            this.tableHearder = []
            dayYlQuery.ListGet(this.queryParam, (res) => {
                this.total = res.value.total
                this.tableData = JSON.parse(JSON.stringify(res.value.rows))
                if (this.tableData[0]) {
                    this.tableData[0].groupData.forEach((e) => {
                        let name = e.time.split('-')[1] + '月'
                        let data = {
                            name,
                            key: Math.random(),
                        }
                        this.tableHearder.push(data)
                    })
                }
                this.$set(this.tableData)
                this.$nextTick(() => {
                    this.$refs.multipleSelection.doLayout()
                })
                this.loading = false
            })
        },
        handleSizeChange(val) {
            this.queryParam.pageBean.pageSize = val
            this.getDateList()
        },
        handleCurrentChange(val) {
            this.queryParam.pageBean.page = val
            this.getDateList()
        },
        handleSelectionChange(val) {
            this.multipleSelection = val.map((item) => {
                return item.id
            })
        },
        //获取字典数据
        getSysDict() {
            let portal = window.context.portal
            return new Promise((resolve, reject) => {
                req.post(
                    portal + '/sys/sysDictionary/v1/queryAllDictItems'
                ).then(
                    (response) => {
                        resolve(response.data)
                        this.yjdjs = response.data.yjdj
                        response.data.yjdj.forEach((e) => {
                            this.yjdjs.value = Number(e.value)
                        })
                        dayYlQuery.getbasAdName({}, (res) => {
                            this.basAdNames = res.value
                        })
                        dayYlQuery.getStnms({}, (res) => {
                            this.stnms = res.value
                        })
                        this.getDateList()
                    },
                    (error) => {
                        reject(error)
                    }
                )
            })
        },
        // // 点击查询
        onClickSearch() {
            this.queryParam.params.day = this.timeValue + '-12-31'
            this.queryParam.pageBean.page = 1
            this.getDateList()
        },
        // 重置
        resetQuery() {
            this.timeValue = moment().format('YYYY')
            this.queryParam.params = {
                day: moment().format('YYYY-MM-DD'),
                stcd: null,
                addvcd: null,
                pattern: 'Y',
            }
            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;
	}
</style>
