<template>
	<!-- 取水站 -->
	<div class="bbsl-common-page">
		<div class="bbsl-table-search">
			<el-page-header class="page-header" @back="goBack" content="取水站">
			</el-page-header>
			<el-form v-model="queryParam" :inline="true" class="el-form-paddingLeft">
				<el-row :gutter="10">
					<el-col :span="8">
						<el-form-item label="纸质证编号">
							<el-select style="width: 100%" size="mini" v-model="queryParam.params.paperId" clearable
								placeholder="请选择纸质证编号" @change="selectChange">
								<el-option v-for="item in waterCards" :key="item.id" :label="item.wpcSn"
									:value="item.id"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<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="5">
						<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: 250px" v-if="showMore">
          <el-row>
            <el-col :span="24">
						<el-form-item label="行政区划">
							<el-cascader size="mini" :show-all-levels="false" :options="basAdNames"
								v-model="queryParam.params.addvcd"
								:props="{value: 'code', label: 'name', children: 'children'}" @change="onhouChange"
								placeholder="请选择所属行政区划" clearable>
								<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">
				<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" :max-height="tableMaxHeight" @row-dblclick="handleDbClick"
				ref="multipleSelection" v-loading="loading" border :data="tableData" :row-style="{height: '61px'}"
				style="width:100%" :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 min-width="200" sortable prop="stcd" label="测站编号" show-overflow-tooltip>
				</el-table-column>
				<el-table-column min-width="200" sortable prop="stnm" label="测站名称" show-overflow-tooltip>
				</el-table-column>
				<el-table-column min-width="200" sortable prop="addvcd" label="行政区划" show-overflow-tooltip>
				</el-table-column>
				<el-table-column min-width="200" sortable prop="stlc" label="详细地址" show-overflow-tooltip>
				</el-table-column>
				<el-table-column min-width="200" sortable prop="usflName" label="运行状态" 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>
	<form-dialog v-if="showFormDia" @closeFormDiao="closeFormDiao" @refList="getDateList" :showFormDia="showFormDia"
		:title="title" :plId="plId" :id="id"></form-dialog>
	</div>
</template>

<script>
	import waterPaper from '@/api/waterPaper.js'
	import req from '@/request.js'
	import {
		TableMixin
	} from '@/mixins/tableMixin'
	import dictUtils from '@/components/dict/DictSelectUtils.js'
	import FormDialog from './wsForm-dialog.vue'
	export default {
		name: 'waterStation',
		mixins: [TableMixin],
		components: {
			FormDialog
		},
		data() {
			return {
				loading: false,
				queryParam: {
					pageBean: {
						pageSize: 20,
						page: 1,
					},
					params: {
						paperId:null,
						wpcSn:null,
						// year:null
					},
				},
				title: '',
				total: 0,
				showFormDia: false,
				tableData: [],
				multipleSelection: [], //选中的表格数据
				basAdNames: [], //行政区
				waterCards: [], //取水证
				plId:null,
				id:null,
				czyxztList:[],
				
			}
		},
		created() {
			waterPaper.getbasAdName({}, (res) => {
				this.basAdNames = res.value
			})
			
			this.getwaterCard()
			this.queryParam.params.paperId=this.$route.query.plId
			this.czyxztList=dictUtils.getDictItemsFromCache('czyxzt')
			this.plId=this.$route.query.plId
			this.getDateList()
		},
		methods: {
			openMore() {
      			this.showMore = !this.showMore
   			 },
			goBack() {
				this.$router.go(-1)
			},
			// 获取取水证
			getwaterCard() {
				waterPaper.getwaterCard({}, (res) => {
					this.waterCards = res.value
					this.waterCards.forEach((ee)=>{
						if(this.plId==ee.id){
							this.queryParam.params.paperId = ee.id
						}
					})
				})
			},
			//搜索
			onClickSearch() {
				this.queryParam.pageBean.page = 1
				this.getDateList()
			},
			//重置
			resetQuery() {
				this.queryParam.params = {
					paperId:this.$route.query.plId,
				}
				// this.queryParam.params.paperId=this.$route.query.plId,
				this.getDateList()
			},
			onhouChange(val) {
				if (val.length > 0) {
					this.queryParam.params.addvcd = val.pop().toString()
				} else {
					this.queryParam.params.addvcd = null;
				}
			},
			selectChange() {
				this.$forceUpdate()
			},
			//获取数据
			getDateList() {
				this.loading = true
				this.tableData = []
				waterPaper.ListGetStation(this.queryParam, (res) => {
					if (res.state) {
						this.total = res.value.total
						this.tableData = res.value.rows
						this.tableData.forEach(e=>{
							this.czyxztList.forEach(s=>{
								if(e.usfl==s.value){
									e.usflName=s.name
								}
							})
						})
						this.loading = false
					}
				})
			},
			//新增
			openFormDiao() {
				this.title = '新增'
				this.plId=this.queryParam.params.paperId
				this.showFormDia = true
			},
			//删除
			deleteSelect() {
				this.$confirm('确定删除选中数据？', '提示', {
						confirmButtonText: '确 定',
						cancelButtonText: '取 消',
						type: 'warning',
					})
					.then(() => {
						waterPaper.removeStation(this.multipleSelection, (res) => {
								if (res.state) {
									this.$notify({
										type: 'success',
										message: '删除成功',
										duration: 2000,
										// offset: 80
									})
									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()
							})
					})
			},
			// 指定一个key标识这一行的数据
			getRowKey(row) {
				return row.id
			},
			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
				})
			},
			closeFormDiao() {
				this.showFormDia = false
				this.getDateList()
			},
			handleUpdate(row) {
				this.title = '修改';
				this.id=row.id
				this.showFormDia = true;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page-header {
		padding-bottom: 10px;
		box-sizing: border-box;
	}

	/deep/.el-page-header__content {
		font-size: 16px;
	}

	.bbsl-table-content {
		height: calc(100% - 130PX);
	}
	.el-form-paddingLeft{
		flex: 1;
	  padding-left: 50px;
	  padding-top: 5px;
	}
	.bbsl-table-search{
	  display: flex;
	  align-items: center;
	}
</style>
