<template>
	<!-- 用户配置 -->
	<div class="pageBody">
		<div class="wrap1200" v-cloak>
			<div class="specialHead">
				<!-- <h2 class="title">专题列表</h2> -->
				<div class="tools">
					<!-- <el-row>
						<el-col :span="10">
							<el-form :inline="true" :model="searchParams" ref="form" class="demo-form-inline">
								<el-form-item>
									<el-input v-model="searchParams.topicName" 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>
						</el-col>
						<el-col :span="14">
							<div class="switchDsiplay fr">
								<el-button type="primary" icon="el-icon-menu" v-bind:class="{ active: layout == 'grid' }" v-on:click="layout = 'grid'"></el-button>
								<el-button type="primary" icon="el-icon-s-fold" v-bind:class="{ active: layout == 'list' }" v-on:click="layout = 'list'" ></el-button>
							</div>
						</el-col>
					</el-row> -->
					<el-row>
						<el-col :span="24">
							<div class="fr">
								<el-form :inline="true" :model="searchParams" ref="form" class="demo-form-inline">
									<el-form-item>
										<el-input v-model="searchParams.topicName" 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>
			</div>
			<div class="specalBody" v-loading="loading">
				<ul class="specal-data" :class="[layout === 'grid' ? 'specal-grid' : 'specal-list']">
					<li class="add" @click="add" v-if="auth.includes('save')">
						<i class="el-icon-plus"></i>新增专题
					</li>
					<li v-for="(item,index) in listData" :key="index">
						<div class="wrap">
							<div class="icon">
								<i class="el-icon-platform-eleme"></i>
							</div>
							<div class="content">
								<h3 class="title">{{item.topicName}}</h3>
								<p class="desc">{{item.topicDesc}}</p>
							</div>
						</div>
						<div class="tools">
							<a @click="view(item)">预览</a>
							<a @click="edit(item)" v-if="auth.includes('update')">编辑</a>
							<a @click="del(item)" v-if="auth.includes('delete')">删除</a>
						</div>
					</li>
				</ul>
				<div class="specal-nodata" v-if="listData.length == 0">
					<i class="el-icon-c-scale-to-original"></i>
					<p>您搜索的数据是空的。</p>
				</div>
			</div>
			<div class="page-right">
				<Pagination :total="listTotal" @change="paginationChange"></Pagination>
			</div>
		</div>
		<add-mobiel
			v-if="modal.add.visibleModal"
			:title="modal.add.title"
			:visible="modal.add.visibleModal"
			@closeModal="closeModal"
		></add-mobiel>
		<ve-mobiel
			v-if="modal.editView.visibleModal"
			:title="modal.editView.title"
			:visible="modal.editView.visibleModal"
			:selectRow="modal.editView.selectRow"
			:action="modal.editView.action"
			@closeModal="closeModal"
		></ve-mobiel>
	</div>
</template>

<script>
import { paginationConfig } from '@/api/CONST'
import Pagination from '@/components/Pagination'
import addMobiel from './modal/addMobiel';
import veMobiel from './modal/veMobiel'
export default {
	name: 'damManage',
	components:{
		addMobiel,
		veMobiel,
		Pagination,
	},
	created(){
		let params = Object.assign({}, this.searchParams, this.pagination);
		this.getList(params);
	},
	mounted(){},
	data() {
		return {
			layout: 'grid', //grid
			loading:true,
			modal:{
				add:{
					title:'',
					visibleModal:false,
					selectRow:null
				},
				editView:{
					action: 'view',
					title: '',
					visibleModal: false,
					selectRow: null
				}
			},
			searchParams:{
				topicName:'',
			},
			pagination:Object.assign({},paginationConfig),
			listTotal:0,
			listData:[],
			areaList:[]
		};
	},
	methods: {
		add() {
			this.modal.add.visibleModal = true
			this.modal.add.title = '新增专题'
		},
		view(item){
			this.modal.editView.visibleModal = true
			this.modal.editView.title = '专题查看'
			this.modal.editView.action = 'view'
			this.modal.editView.selectRow = item
		},
		edit(item){
			this.modal.editView.visibleModal = true
			this.modal.editView.title = '专题编辑'
			this.modal.editView.action = 'edit'
			this.modal.editView.selectRow = item
		},
		del(item) {
			this.$confirm('此操作将永久删除此条数据, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					let params = {
						id: item.id
					};
					this.$port.delTopic(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.getTopIcList(params).then(res => {
				this.loading = false;
				this.listData = res.list || [];
				this.listTotal = res.total;
			});
		},
		paginationChange(json) {
			let params = Object.assign({}, this.searchParams, json);
			this.getList(params);
		},
		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);
		},
		closeModal(flag = false) {
			this.modal.editView.visibleModal = false
			this.modal.add.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;
}
[v-cloak] {
	display: none;
}
.wrap1200{
	// width:1200px;
	margin:0 4.2%;
	.specialHead{
		padding:15px 0 0px 0;
		border-bottom:1px solid #ddd;
		.title{
			margin-bottom:15px;
		}
		.tools{
			.switchDsiplay .el-button{
				margin:0 !important
			}
			.switchDsiplay .active{
				background: #66b1ff;
				border-color: #66b1ff;
				color: #FFF;
			}
		}
	}
	.specalBody{
		height:640px;
		overflow-y:auto;
		padding:25px 0 15px 0;
		.specal-grid{
			list-style:none;
			margin:0;
			padding:0;
			display:flex;
			flex-wrap:wrap;
			justify-content:flex-start;
			li{
				flex: 0 0 32%;
				height:190px;
				margin:7px;
				border: 1px solid #ebeef5;
				box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
				border-radius:6px;
				background-color: #fff;
				.wrap{
					height:145px;
					padding-top:10px;
					overflow:hidden;
					.icon{
						text-align:center;
						width:85px;
						height:100%;
						float:left;
						i{
							margin-top:10px;
							color:#3399ff;
							font-size:54px;
						}
					}
					.content{
						padding:10px 10px 0 0;
						overflow:hidden;
						.title{
							margin:3px 0 5px 0;
							font-size:18px;
							color:#272727;
						}
						.desc{
							font-size:14px;
							color:#8d8d8d;
						}
					}
				}
				.tools{
					border-top:1px solid #e9e9e9;
					height:43px;
					background:#f7f9fa;
					a{
						display:block;
						position:relative;
						width:33.333%;
						height:100%;
						line-height:43px;
						float:left;
						cursor:pointer;
						font-size:12px;
						text-align:center;
						color:#8d8f8f;
						&:before{
							content:'';
							display:block;
							position:absolute;
							height:28px;
							width:1px;
							top:6px;
							right:0;
							background:#e9e9e9;
						}
						&:last-child:before{
							display:none;
						}
						&:hover{
							color:#333;
						}
					}
				}
			}
			li.add{
				border:1px dashed #3399ff;
				box-shadow:none;
				text-align:center;
				line-height:190px;
				color:#3399ff;
				cursor:pointer;
				&:hover{
					border-color:#0066cc;
					color:#0066cc;
				}
			}
		}
		.specal-list{
			list-style:none;
			margin:0;
			padding:0;
			li{
				overflow:hidden;
				padding:15px 10px;
				border-bottom:1px solid #E9E9E9;
				.wrap{
					float:left;
					.icon{
						float:left;
						margin-right:13px;
						i{
							color:#3399ff;
							font-size:54px;
						}
					}
					.content{
						overflow:hidden;
						.title{
							margin:3px 0 5px 0;
							font-size:18px;
							color:#272727;
						}
						.desc{
							font-size:14px;
							color:#8d8d8d;
						}
					}
					
				}
				.tools{
					float:right;
					padding-top:14px;
					a{
						position:relative;
						display:block;
						float:left;
						width:60px;
						height:30px;
						line-height:39px;
						text-align:center;
						cursor:pointer;
						&:before{
							content:'';
							display:block;
							position:absolute;
							height:28px;
							width:1px;
							top:6px;
							right:0;
							background:#e9e9e9;
						}
						&:last-child:before{
							display:none;
						}
						&:hover{
							color:#333;
						}
					}
				}
			}
			li.add{
				border:1px dashed #3399ff;
				text-align:center;
				color:#3399ff;
				font-size:14px;
				cursor:pointer;
				&:hover{
					border-color:#0066cc;
					color:#0066cc;
				}
			}
		}
		.specal-nodata{
			width:300px;
			margin:30px auto;
			text-align:center;
			color:#333;
			.el-icon-c-scale-to-original{
				margin-bottom:5px;
				font-size:68px;
			}
			
		}
	}
	.page-right{
		float:right;
	}
}

	


</style>
