<template>
	<div class="bbsl-common-page" @click="commonPageClick">
		<div class="bbsl-table-search">
			<el-form v-model="params" :inline="true">
				<el-row :gutter="10">
					<el-col :span="6">
						<el-form-item label="关联测站">
							<el-select size="mini" style="width: 100%" filterable v-model="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-select size="mini" filterable v-model="params.rscd" clearable 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-select size="mini" v-model="params.gradeCode" clearable placeholder="请选择预警等级">
								<el-option v-for="item in yjdjList" :key="item.id" :label="item.name"
									:value="item.value"></el-option>
							</el-select>
						</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: 300px" v-if="showMore">
					<el-row :gutter="10">

					</el-row>
				</div> -->
			</el-form>
		</div>
		<div class="bbsl-table-content" ref="contentPanel">
			<div class="bbsl-btn-content" ref="btnPanel">
				<el-button size="mini" icon="el-icon-plus" type="primary" @click="openFormDiao">新增</el-button>
				<el-button :disabled="!multipleSelection.length" size="mini" icon="el-icon-delete" type="danger"
					@click="deleteSelect">删除</el-button>
			</div>
			<el-table stripe size="mini" :height="tableMaxHeight-50" @row-dblclick="handleDbClick"
				:style="{width: '100%'}" ref="multipleSelection" v-loading="loading" border :data="tableData"
				:row-key="getRowKey" @selection-change="handleSelectionChange"
				:header-cell-style="{'text-align': 'center'}" :cell-style="{'text-align': 'center'}">
				<el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column>
				<el-table-column type="index" width="55" label="序号"></el-table-column>
				<el-table-column min-width="130" sortable prop="stnm" label="测站名称" show-overflow-tooltip>
				</el-table-column>
				<!-- <el-table-column min-width="130" sortable prop="rsnm" label="水库名称" show-overflow-tooltip>
				</el-table-column> -->
				<el-table-column min-width="130" sortable prop="gradeName" label="预警等级" show-overflow-tooltip>
				</el-table-column>
				<el-table-column min-width="180" sortable prop="fsltdz" label="生态流量核定值（m³/s）" show-overflow-tooltip>
				</el-table-column>
				<!-- <el-table-column min-width="130" sortable prop="sstpName" label="生态站类型" show-overflow-tooltip>
				</el-table-column> -->
				<el-table-column min-width="150" sortable prop="isNoteMsg" label="是否短信预警" show-overflow-tooltip>
					<template
						slot-scope="scope">{{scope.row.isNoteMsg==='0' ||scope.row.isNoteMsg===0 ? '否' :'是'}}</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]"
				:page-size="queryParam.pageBean.pageSize" layout="total, sizes, prev, pager, next, jumper"
				:total="total"></el-pagination>
		</div>
		<form-dialog v-if="showFormDia" @closeFormDiao="closeFormDiao" @refList="getDateList" :showFormDia="showFormDia"
			:title="title" :pId="pId"></form-dialog>
	</div>
</template>
<script>
	import FormDialog from './alertComponents/ecoForm-dialog.vue'
	import ecologicalFlow from '@/api/stManager/ecologicalFlow.js'
	import dictUtils from '@/components/dict/DictSelectUtils.js'
	import portal from '@/api/portal.js'
	import req from '@/request.js'
	import {
		TableMixin
	} from '@/mixins/tableMixin'
	export default {
		name: 'disPlacement',
		components: {
			FormDialog
		},
		mixins: [TableMixin],
		data() {
			return {
				loading: false,
				multipleSelection: [], // 复选框
				queryParam: {
					pageBean: {
						pageSize: 20,
						page: 1
					},
					params: {

					},
					querys: [

					]
				},
				rsnms: [],
				stnms: [],
				stzlxList: [],
				yjdjList: [],
				params: {},
				sttp: null,
				total: 0,
				title: '',
				showFormDia: false,
				tableData: [],
				pId: '',
			}
		},
		created() {

			this.stzlxList = dictUtils.getDictItemsFromCache('czlb-stzlx')
			this.yjdjList = dictUtils.getDictItemsFromCache('yjdj')
			this.getDateList()
			this.getStation()
			this.getFindAll()
		},
		methods: {
			getStation() {
				ecologicalFlow.staion({
					sttp: "SS"
				}, res => {
					if (res.state) {
						this.stnms = res.value
					}
				})
			},
			getFindAll() {
				ecologicalFlow.findAll({}, res => {
					if (res.state) {
						this.rsnms = res.value
					}
				})
			},
			getDateList() {
				this.loading = true
				this.tableData = []
				ecologicalFlow.ListGet(this.queryParam, res => {
					this.total = res.value.total
					this.tableData = res.value.rows
					this.tableData.forEach(e => {
						this.stzlxList.forEach(s => {
							if (e.sstp == s.value) {
								e.sstpName = s.name
							}
						})
					})
					this.loading = false
				})
			},

			openFormDiao() {
				this.title = '新增'
				this.showFormDia = true
			},
			closeFormDiao() {
				this.showFormDia = false
				this.getDateList()
			},
			handleSizeChange(val) {
				this.queryParam.pageBean.pageSize = val
				this.getDateList()
			},
			handleCurrentChange(val) {
				this.queryParam.pageBean.page = val
				this.getDateList()
			},
			// // 修改
			handleUpdate(row) {
				this.title = '修改'
				this.pId = row.id
				this.showFormDia = true
			},
			handleSelectionChange(val) {
				this.multipleSelection = val.map(item => {
					return item.id
				})
			},
			// // 指定一个key标识这一行的数据
			getRowKey(row) {
				return row.id
			},
			// // 批量删除
			deleteSelect() {
				this.$confirm('确定删除选中数据？', '提示', {
						confirmButtonText: '确 定',
						cancelButtonText: '取 消',
						type: 'warning'
					})
					.then(() => {
						ecologicalFlow
							.remove(this.multipleSelection, res => {
								if (res.state) {
									this.$notify({
										type: 'success',
										message: '删除成功',
										duration: 2000
										// offset: 80
									})
									// this.multipleSelection = [];
									this.$refs.multipleSelection.clearSelection()
									this.queryParam.pageBean.page = 1
									this.getDateList()
								}
							})
							.catch(res => {
								this.$notify({
									type: 'error',
									message: res.message,
									duration: 2000,
									offset: 80
								})
								this.getDateList()
							})
					})
					.catch(() => {})
			},
			openMore() {
				this.showMore = !this.showMore
			},
			// 点击查询
			onClickSearch() {
				this.queryParam.pageBean.page = 1
				this.queryParam.querys=[]
				if (this.params.gradeCode) {
					this.queryParam.querys.push({
						property: "s.grade_code",
						value: Number(this.params.gradeCode),
						group: "advance",
						relation: "AND",
					})
				} else if (this.params.stcd) {
					this.queryParam.querys.push({
						property: "s.stcd",
						value: this.params.stcd,
						group: "advance",
						relation: "AND",
					})
				}
				this.getDateList()
			},
			// 重置
			resetQuery() {
				this.params = {}
				this.onClickSearch()
			},
		}
	}
</script>
<style lang="scss" scoped>
	.bbsl-pagination {
		position: absolute !important;
		right: 10px !important;
		bottom: 3.6875vw !important;
	}

	.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;
	}
</style>
