<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 clearable size="mini" placeholder="请输入取水户名称"
								v-model="queryParam.params.waterName"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="行业类别">
							<el-input clearable size="mini" placeholder="请输入行业类别"
								v-model="queryParam.params.industryType"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="监控级别">
							<el-select size="mini" filterable v-model="queryParam.params.monitorLevel" clearable
								placeholder="请选择监控级别">
								<el-option v-for="item in jkjb" :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>
			</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%'}" v-loading="loading" border
				:data="tableData" :header-cell-style="{'text-align': 'center'}" :cell-style="{'text-align': 'center'}">
				<el-table-column type="index" width="55" fixed label="序号"></el-table-column>
				<el-table-column min-width="120" sortable prop="waterCode" label="取水户编码" show-overflow-tooltip>
				</el-table-column>
				<el-table-column min-width="180" sortable prop="waterName" label="取水户名称" show-overflow-tooltip>
				</el-table-column>
				<el-table-column min-width="140" sortable prop="industryType" label="行业类别" show-overflow-tooltip>
				</el-table-column>
				<el-table-column min-width="160" sortable  prop="tm" label="上报时间" show-overflow-tooltip>
				</el-table-column>
				<el-table-column min-width="110" sortable prop="monitorLevel" label="监控级别" show-overflow-tooltip>
				</el-table-column>
				<el-table-column min-width="130" sortable prop="dayIntake" label="当天取水量(m³)" show-overflow-tooltip>
				</el-table-column>
				<el-table-column min-width="130" sortable prop="monthIntake" label="当月取水量(m³)" show-overflow-tooltip>
				</el-table-column>
				<el-table-column min-width="140" sortable prop="waterIntake" label="年取水量(万m³)" show-overflow-tooltip>
				</el-table-column>
				<el-table-column min-width="140" sortable prop="yearPlan" label="年计划量(万m³)" show-overflow-tooltip>
				</el-table-column>
				<el-table-column min-width="140" sortable prop="allowedIntake" label="许可证量(m³)" show-overflow-tooltip>
				</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>
	</div>
</template>
<script>
	import sdzQuery from '@/api/monitor/otherMonitor/waterCompanyMonitor.js'
	import dictUtils from '@/components/dict/DictSelectUtils.js'
	import req from '@/request.js'
	import {
		TableMixin
	} from '@/mixins/tableMixin'
	export default {
		name: 'sdzQuery',
		components: {
			// FormDialog,
			// hysRelation
		},
		mixins: [TableMixin],
		data() {
			return {
				setKesLabel: {
					value: 'code',
					label: 'name',
					children: 'children',
				},
				basAdNames: [], //行政区
				loading: false,
				qslx: [],
				jkjb: [],
				timeValue: [],
				showMore: false,
				queryParam: {
					pageBean: {
						pageSize: 20,
						page: 1,
					},
					params: {
						waterName: null,
						addvcd: null,
						industryType: null,
					},
				},
				total: 0,
				tableData: [],

			}
		},
		created() {
			this.qslx = dictUtils.getDictItemsFromCache('qslx')
			this.jkjb = dictUtils.getDictItemsFromCache('jkjb')
			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;
			},
			//获取字典数据
			getSysDict() {
				let portal = window.context.portal
				return new Promise((resolve, reject) => {
					req.post(portal + '/sys/sysDictionary/v1/queryAllDictItems').then(
						(response) => {
							resolve(response.data)
							sdzQuery.getbasAdName({}, (res) => {
								this.basAdNames = res.value;
							})
							this.hystTypes = response.data.sdzlx //水电站类型
							this.engScals = response.data.gcgm //工程规模
							this.getDateList()
						},
						(error) => {
							reject(error)
						}
					)
				})
			},
			changeDate(val) {
				if (val) {
					this.queryParam.params.startTime = val[0]
					this.queryParam.params.endTime = val[1]
				} else {
					this.queryParam.params.startTime = ''
					this.queryParam.params.endTime = ''
				}
			},
			getDateList() {
				this.loading = true
				this.tableData = []
				sdzQuery.ListGet(this.queryParam, (res) => {
					this.total = res.value.total
					console.log(res);
					for (let index = 0; index < res.value.rows.length; index++) {
						if (res.value.rows[index].waterType == 1) {
							res.value.rows[index].waterType = "既取又用"

						}
						if (res.value.rows[index].waterType == 2) {
							res.value.rows[index].waterType = "只取不用"

						} else {
							res.value.rows[index].waterType = "只用不取"
						}
						if (res.value.rows[index].monitorLevel == 1) {
							res.value.rows[index].monitorLevel = "国控级"

						}
						if (res.value.rows[index].monitorLevel == 2) {
							res.value.rows[index].monitorLevel = "省控级"

						}
						if (res.value.rows[index].monitorLevel == 3) {
							res.value.rows[index].monitorLevel = "地市级"

						}
						if (res.value.rows[index].monitorLevel == 4) {
							res.value.rows[index].monitorLevel = "区县级"

						} else {
							res.value.rows[index].usfl = "其他"
						}
					}
					this.tableData = res.value.rows
					this.loading = false
				})
			},
			handleSizeChange(val) {
				this.queryParam.pageBean.pageSize = val
				this.getDateList()
			},
			handleCurrentChange(val) {
				this.queryParam.pageBean.page = val
				this.getDateList()
			},
			// // 点击查询
			onClickSearch() {
				this.queryParam.pageBean.page = 1
				this.getDateList()
			},
			// 重置
			resetQuery() {
				this.queryParam.params = {}
				this.getDateList()
			},
		},
	}
</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;
	}

	// ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
	//   width: 6px;
	//   height: 15px;
	// }
	.sampling {
		::v-deep .el-dialog__body {
			padding: 30px 20px 0 20px;
		}
	}

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

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