<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-upload" size="small" @click="add" v-if="auth.includes('import')">数据导入</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-form-item>
										<el-input v-model="searchParams.dataName" 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="dataName" label="数据名称"></el-table-column>
					<el-table-column prop="createDate" label="上次修改时间"></el-table-column>
					<el-table-column prop="createUser" label="修改人"></el-table-column>
					<el-table-column fixed="right" label="操作" width="360" 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="apply(scope.row)" v-if="auth.includes('apply')" :disabled="scope.row.isShow === 1">应用</el-button> -->
							<el-button type="warning" size="mini" @click="exportFile(scope.row)" v-if="auth.includes('export')">导出</el-button>
							<el-button type="danger" 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.view.visibleModal"
			:title="modal.view.title"
			:visible="modal.view.visibleModal"
			:selectRow="modal.view.selectRow"
			@closeModal="closeModal"
		></aev-mobiel>
		<import-mobiel
			v-if="modal.add.visibleModal"
			:title="modal.add.title"
			:visible="modal.add.visibleModal"
			@closeModal="closeModal"
		></import-mobiel>
	</div>
</template>

<script>
import axios from 'axios';
import Pagination from '@/components/Pagination';
import aevMobiel from './modal/aevMobiel';
import importMobiel from './modal/ImportMobiel';
import { paginationConfig } from '@/api/CONST';
export default {
	name: 'areaData',
	components: {
		Pagination,
		aevMobiel,
		importMobiel
	},
	created() {
		let params = Object.assign({}, this.searchParams, this.pagination);
		this.getList(params);
	},
	mounted() {},
	data() {
		return {
			loading: true,
			visibleDel: false,
			modal: {
				view:{
					title: '',
					visibleModal: false,
					selectRow: null
				},
				add:{
					title: '',
					visibleModal: false,
					selectRow: null
				}
			},
			searchParams: {
				dataName:''
			},
			pagination: Object.assign({}, paginationConfig),
			listTotal: 0,
			listData: [],
			activePages:{}
		};
	},
	methods: {
		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);
		},
		add() {
			this.modal.add.visibleModal = true;
			this.modal.add.title = '区域数据导入';
		},
		detail(item) {
			this.modal.view.visibleModal = true;
			this.modal.view.title = '元数据查看';
			this.modal.view.selectRow = item
		},
		apply(item) {
			let notice = item.isShow === 1 ? '“' + item.dataName + '”' + '此条数据当前已应用大屏，是否取消?' : '确认后数据将会填充大屏上的数据进行展示，而之前大屏上的数据将会被替换，请确认。';
			this.$confirm(notice, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					let params = {
						id: item.id,
						state: item.isShow === 1 ? 0 : 1
					};
					this.$port.areaDataUpdate(params).then(res => {
						if (!res.code) {
							this.$message({
								type: 'success',
								message: '操作成功!'
							});
							this.getList();
						}
					});
				})
				.catch(() => {});
		},
		exportFile(item) {
			window.open("/htdata/areaData/downloadXls?id=" + item.id)
		},
		stateSwitch(value, row) {
			let params = {
				id: row.id,
				state: value
			};
			this.$port.damUpdateState(params).then(res => {
				if (!res.code) {
					if (value == 1) {
						this.$message({
							message: '启用成功！',
							type: 'success'
						});
					} else {
						this.$message({
							message: '已关闭！',
							type: 'success'
						});
					}
				} else {
					row.state = value === 1 ? 0 : 1;
					this.$message.error('启用失败！');
				}
			});
		},
		del(item) {
			this.$confirm('此操作将永久删除此条数据, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					let params = {
						id: item.id
					};
					this.$port.delareaData(params).then(res => {
						if (!res.code) {
							this.$message({
								type: 'success',
								message: '删除成功!'
							});
							let params = Object.assign({}, this.searchParams,this.pagination);
							this.getList(params);
						}
					});
				})
				.catch(() => {});
		},
		getList(params) {
			this.loading = true;
			this.$port.getAreaListx(params).then(res => {
				this.loading = false;
				this.listData = res.list || [];
				this.listTotal = res.total;
			});
		},
		paginationChange(json) {
			console.log(json)
			this.activePages = Object.assign({},json)			
			let params = Object.assign({}, this.searchParams, json);
			this.getList(params);
		},
		closeModal(flag = false) {
			this.modal.add.visibleModal = false;
			this.modal.view.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>
