<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.stnm">
							</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.wpcSn">
							</el-input>
						</el-form-item>

					</el-col>
					<el-col :span="6">
						<el-form-item label="上报时间" prop="time">
							<el-date-picker size="mini" style="width: 100%" value-format="yyyy-MM-dd"
								v-model="queryParam.params.time" type="date" 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: 340px" v-if="showMore">
					<el-row>
						<el-col :span="24">
							<el-form-item label="运行状态">
								<el-select size="mini" v-model="queryParam.params.usfl" clearable placeholder="请选择运行状态">
									<el-option v-for="item in statuss" :key="item.id" :label="item.value"
										:value="item.id"></el-option>
								</el-select>
							</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%'}" 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="110" sortable fixed prop="stcd" label="取水点编号" show-overflow-tooltip>
				</el-table-column>
				<!-- <el-table-column
            width="140"
            porp="xx"
            label="行政区划"
            sortable
            show-overflow-tooltip
          ></el-table-column> -->
				<el-table-column min-width="180" sortable fixed prop="stnm" label="取水点名称" show-overflow-tooltip>
				</el-table-column>
				<el-table-column min-width="160" sortable fixed prop="tm" label="上报时间" show-overflow-tooltip>
				</el-table-column>
				<el-table-column min-width="160" sortable prop="wpcSn" label="纸质证编号" show-overflow-tooltip>
				</el-table-column>

				<el-table-column min-width="150" sortable prop="dayIntake" label="当天取水量(m³)" show-overflow-tooltip>
				</el-table-column>
				<el-table-column min-width="150" sortable prop="monthIntake" label="当月取水量(m³)" show-overflow-tooltip>
				</el-table-column>
				<el-table-column min-width="150" sortable prop="waterIntake" label="年取水量(万m³)" show-overflow-tooltip>
				</el-table-column>
				<el-table-column min-width="150" 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-column min-width="100" sortable prop="usfl" label="运行状态" show-overflow-tooltip>
					<template slot-scope="scope">
						<span :style="{color:scope.row.usfl === 1 || scope.row.usfl === '1'?'#09ef09':'red'}"
							v-if="scope.row.usfl === 1 || scope.row.usfl === '1'">正常</span>
						<span :style="{color:scope.row.usfl === 0 || scope.row.usfl === '0'?'red':'#09ef09'}"
							v-if="scope.row.usfl === 0 || scope.row.usfl === '0'">异常</span>
					</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>
	</div>
</template>
<script>
	import sdzQuery from '@/api/monitor/otherMonitor/waterStation.js'
	import req from '@/request.js'
	import {
		TableMixin
	} from '@/mixins/tableMixin'
	export default {
		name: 'sdzQuery',
		components: {
			// FormDialog,
			// hysRelation
		},
		mixins: [TableMixin],
		data() {
			return {
				time: '',
				setKesLabel: {
					value: 'code',
					label: 'name',
					children: 'children',
				},
				basAdNames: [], //行政区
				loading: false,
				statuss: [{
						id: "1",
						value: "正常"
					},
					{
						id: "2",
						value: "异常"
					}
				],
				queryParam: {
					pageBean: {
						pageSize: 20,
						page: 1,
					},
					params: {
						stnm: null,
						wpcSn: null,
						usfl: null,
						time: null
					},
				},
				total: 0,
				tableData: [],
			}
		},
		created() {
			this.getSysDict()

		},
		methods: {

			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)
						}
					)
				})
			},
			getDateList() {
				this.loading = true
				this.tableData = []
				sdzQuery.ListGet(this.queryParam, (res) => {
					this.total = res.value.total
					// for (let index = 0; index < res.value.rows.length; index++) {
					//       if (res.value.rows[index].usfl==1) {
					//           res.value.rows[index].usfl = "正常"
					//       }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.time = ''
				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>
