<template>
	<!-- 用户配置 -->
	<div class="pageBody">
		<el-row>
			<el-col :span="24">
				<div class="tableHead">
					<el-row>
						<el-col :span="6">
							<div class="userTitle">
								<el-button type="primary" icon="el-icon-plus" size="small" @click="add" v-if="auth.includes('save')">新增园区</el-button>
								<!-- <el-button type="primary" icon="el-icon-upload" size="small" @click="importData">导入数据</el-button> -->
							</div>
						</el-col>
						<el-col :span="18">
							<div class="grid-content bg-purple-dark fr">
								<el-form :inline="true" :model="searchParams" ref="form" class="demo-form-inline" >
									<el-select v-model="searchParams.induType" placeholder="涉及农业">
									    <el-option
									      v-for="item in agriTypeList"
									      :key="item.id"
									      :label="item.name"
									      :value="item.id">
									    </el-option>
									</el-select>
									<el-select v-model="searchParams.productName" placeholder="产出物">
									    <el-option
									      v-for="item in protypeList"
									      :key="item.id"
									      :label="item.name"
									      :value="item.name">
									    </el-option>
									</el-select>
									<el-form-item>
										<el-input 
											v-model="searchParams.queryParam" 
											placeholder="请输入园区编码/园区名称"></el-input>
									</el-form-item>
									<el-form-item>
										<el-button type="primary" @click="searchHandle">搜索</el-button>
										<el-button type="warning" @click="resetSearch">重置</el-button>
									</el-form-item>
								</el-form>
							</div>
						</el-col>
					</el-row>
				</div>  
				<el-divider></el-divider>
				<el-table :data="listData" border style="width: 100%" v-loading="loading">
					<el-table-column type="index" width="50" label="序号" align="center"></el-table-column>
					<el-table-column prop="orchardCode" label="园区编码" ></el-table-column> 
					<el-table-column prop="orchardName" label="园区名称" ></el-table-column>
					<el-table-column prop="induTypeName" label="涉及行业" ></el-table-column>
					<el-table-column prop="productName" label="产出物" ></el-table-column>
					<el-table-column prop="orchardArea" label="园区规模（平方米）" ></el-table-column>
					<el-table-column prop="workerCount" label="人员数" ></el-table-column>
					<!-- <el-table-column prop="longitude" label="经度" align="center"></el-table-column> -->
					<!-- <el-table-column prop="latitude" label="纬度" align="center"></el-table-column> -->
					<el-table-column label="地址" align="center">
						<template slot-scope="scope">
							{{scope.row.provinceName}}{{scope.row.cityName}}{{scope.row.countyName}}{{scope.row.townName}}{{scope.row.villageName}}{{scope.row.address}}
						</template>
					</el-table-column>
					<el-table-column fixed="right" label="操作"  width="220" align="center">
						<template slot-scope="scope">
							<el-button type="primary" size="mini" @click="detail(scope.row)">查看</el-button>
						    <el-button type="success" size="mini" @click="edit(scope.row)" v-if="auth.includes('update')">编辑</el-button>
							<el-button type="warning" size="mini" @click="del(scope.row)" v-if="auth.includes('delete')">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-col>
		</el-row>
		<div class="page-right">
			<Pagination :total="listTotal" @change="paginationChange"></Pagination>
		</div>
		<aev-mobiel
			v-if="modal.adv.visibleModal"
			:title="modal.adv.title"
			:action="modal.adv.action"
			:visible="modal.adv.visibleModal"
			:selectRow="modal.adv.selectRow"
			@closeModal="closeModal">
		</aev-mobiel>
		<import-mobiel
			v-if="modal.import.visibleModal"
			:title="modal.import.title"
			:visible="modal.import.visibleModal"
			@closeModal="closeModal"
		></import-mobiel>
	</div>
</template>

<script>
import Pagination from '@/components/Pagination'
import aevMobiel from './modal/aevMobiel'
import importMobiel from './modal/ImportMobiel'
import { paginationConfig } from '@/api/CONST'
export default {
	name: 'user',
	components:{
		Pagination,
		aevMobiel,
		importMobiel
	},
	created(){
		let params = Object.assign({},this.searchParams,this.pagination)
		this.getList(params)	
		this.getProtype()
		this.getAgriType(); 
	},
	mounted(){
		
	},
	data() {
		return {
			loading:true,
			visibleDel:false,
			modal:{
				adv:{
					action:'',
					title:'',
					visibleModal:false,
					selectRow:null
				},
				import:{
					title: '',
					visibleModal: false,
					selectRow: null
				}
			},
			searchParams:{
				queryParam:'',
				productName:'',
				induType:''
			},
			pagination:Object.assign({},paginationConfig),
			listTotal:0,
			listData:[],
			protypeList:[], //产出物
			agriTypeList:[], //涉及农业
		};
	},
	methods: {
		getProtype(){
			this.$port.getProtypeList()
				.then(res =>{
					console.log(res)
					this.protypeList = res.list
				})
		},
		searchHandle() {
			let params = Object.assign({},this.searchParams,this.pagination)
			this.getList(params)
		},
		resetSearch(){
			this.searchParams = {}
			let params = Object.assign({},this.searchParams,this.pagination)
			this.getList(params)
		},
		importData(){
			this.modal.import.visibleModal = true;
			this.modal.import.title = '园区数据导入';
		},
		add(){
			this.modal.adv.visibleModal = true
			this.modal.adv.title = '园区信息添加'
			this.modal.adv.action = 'add'
		},
		detail(item){
			this.modal.adv.visibleModal = true
			this.modal.adv.title = '园区信息查看'
			this.modal.adv.action = 'view'
			this.modal.adv.selectRow = item
		},
		edit(item){
			this.modal.adv.visibleModal = true
			this.modal.adv.title = '园区信息编辑'
			this.modal.adv.action = 'edit'
			this.modal.adv.selectRow = item
		},
		getAgriType(){
			this.$port.getAgriTypeList()
				.then(res =>{
					this.agriTypeList = res.list
				})
		},
		del(item){
			this.$confirm('此操作将永久删除此条数据, 是否继续?', '提示', {
			  confirmButtonText: '确定',
			  cancelButtonText: '取消',
			  type: 'warning'
			}).then(() => {
				let params = {
					id:item.id
				}
				this.$port.delExpert(params).then(res =>{
					if(!res.code){
						this.$message({
							type: 'success',
							message: '删除成功!',
							duration:800
						});
						this.getList()
					}
				})
			}).catch(() => {
			            
			});
		},
		getList(params){
			this.loading = true
			this.$port.getExpertList(params)
				.then(res =>{
					console.log(res)
					this.loading = false
					this.listData = res.list || []
					this.listTotal = res.total
				})
		},
		paginationChange(json){
			let params = Object.assign({},this.searchParams,json)
			this.getList(params)
		},
		closeModal(flag = false){
			this.modal.adv.visibleModal = false
			flag && this.getList()
		}
	},
	computed: {
		//当前页权限
		auth() {
			const activePage = this.$route.path;
			return (
				this.$store.state.userTree
					.filter(x => {
						return x.url == activePage;
					})
					.map(x => {
						return x.auth;
					})[0] || []
			);
		}
	}
};
</script>

<style lang="less" scoped>
.fr{
	float:right;
}
.userTitle{
	margin-top:8px;
}
.el-form-item {
	margin-bottom: 0;
}
.tableHead{
	vertical-align:middle;
	.el-button{
		margin-left:15px;
	}
}
.page-right{
	margin-top:15px;
	float:right;
}
</style>
