<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>
							</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.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="title" label="文章标题" ></el-table-column> 
					<!-- <el-table-column label="文章类型" >
						<template slot-scope="scope">
							{{scope.row.noticeType | noticeType}}
						</template>
					</el-table-column> -->
					<!-- <el-table-column label="状态">
						<template slot-scope="scope">
							{{scope.row.state | articleType}}
						</template>
					</el-table-column> -->
					<el-table-column prop="createDate" label="发布时间" ></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>
	</div>
</template>

<script>
import Pagination from '@/components/Pagination'
import aevMobiel from './modal/aevMobiel'
import { paginationConfig } from '@/api/CONST'
export default {
	name: 'helpManage',
	components:{
		Pagination,
		aevMobiel
	},
	created(){
		let params = Object.assign({},this.searchParams,this.pagination)
		this.getList(params)	
	},
	mounted(){
		
	},
	data() {
		return {
			loading:true,
			visibleDel:false,
			modal:{
				adv:{
					action:'',
					title:'',
					visibleModal:false,
					selectRow:null
				}
			},
			searchParams:{
				queryParam:'',
				productName:'',
			},
			pagination:Object.assign({},paginationConfig),
			listTotal:0,
			listData:[],
		};
	},
	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.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
		},
		del(item){
			this.$confirm('此操作将永久删除此条数据, 是否继续?', '提示', {
			  confirmButtonText: '确定',
			  cancelButtonText: '取消',
			  type: 'warning'
			}).then(() => {
				let params = {
					id:item.id
				}
				this.$port.delNotice(params).then(res =>{
					if(!res.code){
						this.$message({
							type: 'success',
							message: '删除成功!',
							duration:800
						});
						this.getList()
					}
				})
			}).catch(() => {
			            
			});
		},
		getList(params){
			this.loading = true
			this.$port.getNoticeList(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()
		}
	},
	filters:{
		articleType:function(val){
			let status
			if(val == 0){
				status = '未发布';
			}else if(val == 1){
				status = '已发布';
			}else if(val == 2){
				status = '撤回';
			}
			return status;
		},
		noticeType:function(val){
			let status
			if(val == 1){
				status = '新闻';
			}else if(val == 2){
				status = '通知公告';
			}else if(val == 9){
				status = '产业扶贫';
			}
			return status;
		}
	},
	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>
