<template>
	<!-- 取水证 -->
	<div class="bbsl-common-page">
		<div class="bbsl-table-search">
			<el-page-header v-if="this.$route.query.id" class="page-header" @back="goBack" content="取水证">
				{{this.$route.query.id}}
			</el-page-header>
			<el-form v-model="queryParam" :inline="true" style="flex: 1;"  :class="this.$route.query.id?'el-form-paddingLeft':''">
				<el-row :gutter="20">
					<el-col :span="8">
						<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="8">
						<el-form-item label="电子证编号">
							<el-input clearable size="mini" placeholder="请输入电子证编号" v-model="queryParam.params.wecSn">
							</el-input>
						</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: 250px" v-if="showMore">
          <el-row>
            <el-col :span="24">
						<el-form-item label="水源类型">
							<el-select style="width: 100%" size="mini" v-model="queryParam.params.waterSource"
								clearable placeholder="请选择水源类型">
								<el-option v-for="item in headwatersTypes" :key="item.id" :label="item.name"
									:value="item.value"></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">
				<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" @row-dblclick="handleDbClick"
				ref="multipleSelection" v-loading="loading" border :data="tableData" 
				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
          		type="index"
          		width="55"
          		label="序号"
          		fixed
       			 ></el-table-column>
				<el-table-column min-width="170" sortable prop="waterName" label="取水户" show-overflow-tooltip>
				</el-table-column>
				<el-table-column min-width="140" sortable prop="wecSn" label="电子证编号" show-overflow-tooltip>
				</el-table-column>
				<el-table-column min-width="150" sortable prop="wpcSn" label="纸质证编号" show-overflow-tooltip>
				</el-table-column>
				<el-table-column min-width="150" sortable prop="wscSn" label="统一社会信用代码" show-overflow-tooltip>
				</el-table-column>
				<el-table-column min-width="95" sortable prop="waterSourceName" label="水源类型" show-overflow-tooltip>
				</el-table-column>
				<el-table-column min-width="100" sortable prop="waterPurposeName" label="取水用途" show-overflow-tooltip>
				</el-table-column>
				<el-table-column min-width="110" sortable prop="waterFetchName" label="取水方式" show-overflow-tooltip>
				</el-table-column>
				<el-table-column min-width="100" sortable prop="statusName" label="证件状态" show-overflow-tooltip>
				</el-table-column>
				<el-table-column min-width="140" prop="" label="操作" fixed="right" show-overflow-tooltip>
					<template #default="scope">
						<el-dropdown split-button  @click="towaterPlan(scope.row)" @command="towaterStation(scope.row)">
						  取水计划
						  <el-dropdown-menu slot="dropdown">
						    <el-dropdown-item command="waterStation">取水站</el-dropdown-item>
						   
						  </el-dropdown-menu>
						</el-dropdown>
						<!-- <el-button @click="towaterPlan(scope.row)">取水计划</el-button> -->
						<!-- <el-button @click="towaterStation(scope.row)">取水站</el-button> -->
					</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" :waterName="waterName"></form-dialog>
	</div>
</template>

<script>
	import waterPaper from '@/api/waterPaper.js'
	import req from '@/request.js'
	import {
		TableMixin
	} from '@/mixins/tableMixin'
	import FormDialog from './wpForm-dialog.vue'
	export default {
		name: "waterPaper",
		components: {
			FormDialog,
		},
		mixins: [TableMixin],
		data() {
			return {
				loading: false,
				queryParam: {
					pageBean: {
						pageSize: 20,
						page: 1,
					},
					params: {

					},
				},
				multipleSelection: [], //选中的表格数据
				tableData: [],
				total: 0,
				waterTypes: [], //取水类型
				monitorLevels: [], //监控级别
				certificates: [], //证件状态
				headwatersTypes: [], //水源类型
				waterPurposes: [], //取水用途
				waterModes: [], //取水方式
				showFormDia: false,
				title: '',
				pId: '',
				waterName: ''
			}
		},
		created() {
			this.queryParam.params.waterId = this.$route.query.id
			this.waterName = this.$route.query.waterName
			this.getDateList()
			this.getSysDict()
		},
		methods: {
			openMore() {
      this.showMore = !this.showMore
    },
			goBack() {
				this.$router.go(-1)
			},
			//搜索
			onClickSearch() {
				this.queryParam.pageBean.page = 1
				this.getDateList()
			},
			//重置
			resetQuery() {
				this.queryParam.params = {}
				this.queryParam.params.waterId = this.$route.query.id
				this.onClickSearch()
			},
			//新增
			openFormDiao() {
				this.title = '新增'
				this.pId = this.$route.query.id;
				this.showFormDia = true
			},
			handleUpdate(row) {
				this.title = '修改';
				this.pId = row.id;
				this.showFormDia = true;
			},
			closeFormDiao() {
				this.showFormDia = false
				this.getDateList()
			},
			//删除
			deleteSelect() {
				this.$confirm('确定删除选中数据？', '提示', {
						confirmButtonText: '确 定',
						cancelButtonText: '取 消',
						type: 'warning',
					})
					.then(() => {
						waterPaper.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(() => {})
			},
			//获取数据
			getDateList() {
				this.loading = true
				this.tableData = []
				waterPaper.ListGet(this.queryParam, (res) => {
					if (res.state) {
						this.total = res.value.total
						res.value.rows.forEach((ii) => {
							this.headwatersTypes.forEach((ee) => {
								if (ee.value == ii.waterSource) {
									ii['waterSourceName'] = ee.name
								}
							})
							this.waterPurposes.forEach((ee) => {
								if (ee.value == ii.waterPurpose) {
									ii['waterPurposeName'] = ee.name
								}
							})
							this.waterModes.forEach((ee) => {
								if (ee.value == ii.waterFetch) {
									ii['waterFetchName'] = ee.name
								}
							})
							this.certificates.forEach((ee) => {
								if (ee.value == ii.status) {
									ii['statusName'] = ee.name
								}
							})
						})
						this.tableData = res.value.rows
						this.loading = false
					}
				})
			},
			// 指定一个key标识这一行的数据
			getRowKey(row) {
				return row.id
			},
			handleSelectionChange(val) {
				this.multipleSelection = val.map((item) => {
					return item.id
				})
			},
			handleSizeChange(val) {
				this.queryParam.pageBean.pageSize = val
				this.getDateList()
			},
			handleCurrentChange(val) {
				this.queryParam.pageBean.page = val
				this.getDateList()
			},
			// 取水计划
			towaterPlan(row) {
				this.$router.push({
					path: 'waterPlan',
					query: {
						plId: row.id
					}
				})
				this.$route.query.id = ""
			},
			towaterStation(row) {
				this.$router.push({
					path: 'waterStation',
					query: {
						plId: row.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.waterTypes = response.data.qslx //取水类型
							this.monitorLevels = response.data.jkjb //监控级别
							this.certificates = response.data.zjzt //证件状态
							this.headwatersTypes = response.data.sylx //水源类型
							this.waterPurposes = response.data.qsyt //取水用途
							this.waterModes = response.data.qsfs //取水方式
							this.getDateList()
						},
						(error) => {
							reject(error)
						}
					)
				})
			},
		}
	}
</script>

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

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

.operation {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}
.el-form-paddingLeft {
  padding-left: 50px;
  padding-top: 5px;
}
.bbsl-table-search {
  display: flex;
  align-items: center;
}
</style>
