<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"  class="el-form-paddingLeft" :inline="true">
				<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-date-picker v-model="queryParam.params.year" size="mini" value-format="yyyy" type="year"
								placeholder="选择年份">
							</el-date-picker>
						</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-form-item>
					</el-col>
				</el-row>
			</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>
				<el-button size="mini" icon="el-icon-download" type="info">
					<a class="down" :href="this.baseUrl+'/att/waterPlan/downModel'" download="xls">下载</a></el-button>
				
				<el-upload class="upload" ref="upload" action="no" :show-file-list="false" :http-request="upLoadFile" :auto-upload="false" :on-change="e => handleChange(e, fileList)" accept="." :file-list="fileList">
				  <el-button size="mini" icon="el-icon-upload" type="warning" >导入</el-button>
				</el-upload>
				
				
			</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="wpcSn" label="纸质证编号" show-overflow-tooltip>
				</el-table-column>
				<el-table-column min-width="200" sortable prop="year" label="年份" show-overflow-tooltip>
				</el-table-column>
				<el-table-column min-width="200" sortable prop="yearPlan" 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"></form-dialog>
	</div>
</template>

<script>
	import waterPaper from '@/api/waterPaper.js'
	import req from '@/request.js'
	import {
		TableMixin
	} from '@/mixins/tableMixin'
	import FormDialog from './plForm-dialog.vue'
	export default {
		name: 'waterPlan',
		mixins: [TableMixin],
		components: {
			FormDialog
		},
		data() {
			return {
				loading: false,
				queryParam: {
					pageBean: {
						pageSize: 20,
						page: 1,
					},
					params: {
						paperId: this.$route.query.plId,
						wpcSn: null,
						year: null
					},
				},
				title: '',
				total: 0,
				showFormDia: false,
				tableData: [],
				multipleSelection: [], //选中的表格数据
				plId: null, //取水证id
				waterCards: [], //取水证
				fileList: [],
				baseUrl:null,
			}
		},
		created() {
			this.baseUrl=window.context.portal;
			this.plId = this.$route.query.plId
			this.queryParam.params.paperId = this.plId
			this.getwaterCard()
			this.getDateList()
		},
		methods: {
			goBack() {
				this.$router.go(-1)
			},
			selectChange() {
				this.$forceUpdate()
			},
			// 获取取水证
			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 = {}
				this.queryParam.params.paperId = this.plId
				this.getDateList()
			},
			//获取数据
			getDateList() {
				this.loading = true
				this.tableData = []
				waterPaper.ListGetPlan(this.queryParam, (res) => {
					if (res.state) {
						this.total = res.value.total
						this.tableData = res.value.rows
						this.loading = false
					}
				})
			},
			//新增
			openFormDiao() {
				this.title = '新增'
				this.showFormDia = true
			},
			//删除
			deleteSelect() {
				this.$confirm('确定删除选中数据？', '提示', {
						confirmButtonText: '确 定',
						cancelButtonText: '取 消',
						type: 'warning',
					})
					.then(() => {
						waterPaper.removePlan(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()
							})
					})
			},
			handleChange(file, fileList) {
			  if (fileList.length > 1) {
			    fileList.splice(0, 1)
			  }
			  if (file.raw.name.split('.')[1] != 'xlsx') {
			    this.$apiMessage.warning('请上传xlsx格式文件！')
			    fileList.splice(0)
			  } else {
			    this.upLoadFile(file.raw)
			  }
			},
			//自定义上传方法（覆盖默认上传行为）
			upLoadFile(file) {
			  let formData = new FormData()
			  formData.append('file', file)
			  formData.append('paperId', this.queryParam.params.paperId)
			  waterPaper.upload(formData,(res)=>{
				  if (res.state) {
				  	this.$notify({
				  		type: 'success',
				  		message: '导入成功',
				  		duration: 2000,
				  	})
				  	this.queryParam.pageBean.page = 1
				  	this.getDateList()
				  }else{
					  this.$notify({
					  	type: 'error',
					  	message: res.message,
					  	duration: 2000,
					  	offset: 80,
					  })
					  this.getDateList()
				  }
			  })
			},
			// 指定一个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()
			},
			closeFormDiao() {
				this.showFormDia = false
				this.getDateList()
			},
			handleUpdate(row) {
				this.title = '修改';
				this.plId = 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);
	}
	.down{
		text-decoration:none;
		color: white;
	}
	.upload{
		display: inline-block;
		margin-left: 10PX;
	}
	.el-form-paddingLeft{
		flex: 1;
	  padding-left: 50px;
	  padding-top: 5px;
	}
	.bbsl-table-search{
	  display: flex;
	  align-items: center;
	}
</style>
