<template>
	<div class="bbsl-common-page">
		<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-cascader filterable size="mini" :show-all-levels="false" :options="basAdNames"
								v-model="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-col :span="6">
						<el-form-item label="防治区名称：">
							<el-select style="width: 100%" size="mini" v-model="params.buildType" clearable
								placeholder="请选择住房建筑类型">
								<el-option v-for="item in buildTypes" :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 label="防治区名称：">
							<el-input maxlength="15" size="mini" placeholder="请输入防治区名称" v-model="params.name">
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="户主名称：">
							<el-input maxlength="15" size="mini" placeholder="请输入户主名称" v-model="params.householder">
							</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>
			</el-form>
		</div>
		<div class="bbsl-table-content" ref="contentPanel">
			<div class="bbsl-btn-content" ref="btnPanel">
				<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>
				<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" :style="{width: '100%'}"
				ref="multipleSelection" v-loading="loading" border :data="tableData" :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 sortable prop="name" label="防治区名称" min-width="150" show-overflow-tooltip>
				</el-table-column>
				<!-- <el-table-column sortable prop="addvcdName" label="行政区划" min-width="150" show-overflow-tooltip>
				</el-table-column> -->
				<el-table-column sortable prop="basinName" label="所属小流域名称" min-width="150" show-overflow-tooltip>
				</el-table-column>
				<el-table-column sortable prop="householder" label="户主名称" min-width="150" show-overflow-tooltip>
				</el-table-column>
				<el-table-column sortable prop="peopleNum" label="总人数(人)" min-width="150" show-overflow-tooltip>
				</el-table-column>
				<el-table-column sortable prop="buildArea" label="住房建筑面积(㎡)" min-width="150" show-overflow-tooltip>
				</el-table-column>
				<el-table-column sortable prop="buildTypeName" label="住房建筑类型" min-width="150" show-overflow-tooltip>
				</el-table-column>
				<el-table-column sortable prop="buildStructureName" label="住房结构形式" min-width="150" show-overflow-tooltip>
				</el-table-column>
				<el-table-column sortable prop="altitude" label="宅基高程(m)" min-width="150" show-overflow-tooltip>
				</el-table-column>
				<el-table-column sortable prop="isNearWater" label="是否临水" min-width="150" show-overflow-tooltip>
					<template  slot-scope="scope">
						{{scope.row.isNearWater==0?'否':scope.row.isNearWater==1?'是':''}}
					</template>
				</el-table-column>
				<el-table-column sortable prop="isNearSlope" label="切坡" min-width="150" show-overflow-tooltip>
					<template  slot-scope="scope">
						{{scope.row.isNearSlope==0?'否':scope.row.isNearSlope==1?'是':''}}
					</template>
				</el-table-column>
				<el-table-column sortable prop="tel" label="联系电话" min-width="150" show-overflow-tooltip>
				</el-table-column>
				<!-- <el-table-column sortable prop="memo" label="备注" min-width="150" 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" :pId="pId"></form-dialog>
	</div>
</template>

<script>
	import req from '@/request.js'
	import {
		TableMixin
	} from '@/mixins/tableMixin'
	import FormDialog from './components/falshForm-dialog.vue'
	import flashFloods from '@/api/flashFloods.js'
	import dictUtils from '@/components/dict/DictSelectUtils.js'
	export default {
		components: {
			FormDialog,
		},
		mixins: [TableMixin],
		data() {
			return {
				loading: false,
				params: {
					name: null,
					buildType: null,
					householder: null
				},
				queryParam: {
					pageBean: {
						pageSize: 20,
						page: 1,
					},
					params: {},
					querys: []
				},
				showFormDia: false,
				tableData: [],
				total: 0,
				pId: null,
				multipleSelection: [], // 复选框
				basAdNames: [], //行政区
				fileList: [],
			}
		},
		created() {
			this.buildTypes = dictUtils.getDictItemsFromCache('shzhfz-zfjzlx')
			this.buildStructures = dictUtils.getDictItemsFromCache('shzhfz-zfjgxs')
			this.getDateList()
			this.getbasAdNames()
		},
		methods: {
			onhouChange(val) {
				if (val) {
					this.params.addvcd = val.pop().toString()
					console.log(this.params.addvcd);

				} else {
					this.params.addvcd = null;
				}
			},
			getbasAdNames() {
				flashFloods.getbasAdName({}, res => {
					this.basAdNames = res.value
				})
			},
			getDateList() {
				this.loading = true
				this.tableData = []
				flashFloods.ListGet(this.queryParam, res => {
					if (res.state) {
						this.total = res.value.total
						this.tableData = res.value.rows
						this.tableData.forEach(e=>{
							this.buildTypes.forEach(b=>{
								if(e.buildType==b.value){
									e.buildTypeName=b.name
								}
							})
							this.buildStructures.forEach(s=>{
								if(e.buildStructure==s.value){
									e.buildStructureName=s.name
								}
							})
						})
					
						this.loading = false
					}
				})
			},
			onClickSearch() {
				this.queryParam.querys = [{
						group: "main",
						operation: "LIKE",
						parentGroup: "",
						property: "p.name_",
						relation: "AND",
						value: this.params.name
					},
					{
						group: "main",
						operation: "LIKE",
						parentGroup: "",
						property: "p.build_type_",
						relation: "AND",
						value: this.params.buildType
					}, {
						group: "main",
						operation: "LIKE",
						parentGroup: "",
						property: "p.householder_",
						relation: "AND",
						value: this.params.householder
					}
				]
				this.queryParam.pageBean.page = 1
				this.getDateList()
			},
			resetQuery() {
				this.params = []
				this.queryParam.querys = []
				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)
			  flashFloods.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()
				  }
			  })
			},
			openFormDiao() {
				this.title = '新增'
				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(() => {
						flashFloods
						  .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(() => {})
			},
			handleSizeChange(val) {
				this.queryParam.pageBean.pageSize = val;
				this.getDateList()
			},
			handleCurrentChange(val) {
				this.queryParam.pageBean.page = val;
				this.getDateList()
			},
			// 指定一个key标识这一行的数据
			getRowKey(row) {
				return row.id
			},
			handleSelectionChange(val) {
				this.multipleSelection = val.map((item) => {
					return item.id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.upload{
		display: inline-block;
		margin-right: 10PX;
	}
</style>
