<template>
	<div class="box boxMinHeight">
		<header class="header flex-box-ce">
			<div class="header-title flex-1" >
				<div class="flex-box-ce" style="cursor: pointer;width: 200px;"  @click="$router.go(-1)">
					<i class="el-icon-arrow-left fontColorC"></i>
					<div class="text fontColorB font-flex-word">公告列表</div>
				</div>
			</div>
			<el-button type="primary" size="small" @click="app()" v-if="$supremeAuthority()!='dept_manager'&&$supremeAuthority()!='employee'">添加</el-button>
		</header>
		<div class="main flex-box">
			<div class="main-left scroll-bar">
				<div
					v-for="(item, index) in announcement"
					:key="index"
					class="font-flex-word"
					:class="item.id == articleOne.id ? 'active' : ''"
					@click="dept_click(item)"
					style="height: 56px;line-height: 56px;padding: 0 10px;border-bottom: 1px solid #f1f1f1;"
				>
					{{ item.name }}
				</div>
				<NoData v-show="announcement.length == 0" content="暂无数据" imgW="60%" imgH="auto" isSolt>
					<el-button type="primary" size="small" style="margin-right: 20px;" @click="app()" v-if="$supremeAuthority()!='dept_manager'&&$supremeAuthority()!='employee'">添加</el-button>
				</NoData>
			</div>
			<div class="main-right flex-1" v-loading="noticeLoad">
				<div class="title" style="position: relative;" v-if="announcement.length>0">
					<span class="fontColorC" style="position: absolute;"> {{ articleOne.create_time ? articleOne.create_time : '' }} {{articleOne.employee_name}}发布</span>
					<div style="font-size: 18px;padding-right: 10px;text-align: center;">{{ articleOne.name ? articleOne.name : '' }}</div>
					<div style="position: absolute;right:20px;top:0px" v-if="$supremeAuthority()!='dept_manager'&&$supremeAuthority()!='employee'">
						<el-button type="danger" plain size="small" @click="deteleItem">删除</el-button>
						<el-button type="primary" plain size="small" @click="compile">编辑</el-button>
					</div>
				</div>
				<div class="RuleRight scroll-bar">
					<template v-if="aAtripOfDetails">
						<div v-html="aAtripOfDetails"></div>
						<el-image  :src="detaliData.file_list" style="margin-top: 20px;" :preview-src-list="[detaliData.file_list]" v-if="detaliData.file_list"/>
					</template>
					<NoData v-else></NoData>
				</div>
			</div>
		</div>
		<Suggest :visible.sync="isShowJy"  :detaliData="detaliData" :isAdd="isAdd"></Suggest>
	</div>
</template>

<script>
import { setCache } from '@/api/auth';
import Suggest from '@/components/Suggest';
export default {
	components: { Suggest },
	name: 'update_notice',
	data() {
		return {
			articleOne: {},
			announcement: [],
			noticeLoad: false,
			defaultProps: {
				label: 'name'
			},
			aAtripOfDetails: '',
			isShowJy: false,
			detaliData:{},
			isAdd:true,
		};
	},
	created() {
		setCache('inform', true);
		this.noticeList();
	},
	methods: {
		deteleItem() {
			this.$confirm('此操作将永久删除该公告, 是否删除?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$axios('POST', '/api/information/delete', {id:this.articleOne.id}).then(res => {
					if (res.data.code == 1) {
						this.$message.success("已删除")
						this.noticeList();
					}
				});
			}).catch(() => {});
		},
		compile() {
			this.isAdd=false
			this.isShowJy = true;
		},
		app() {
			this.isAdd=true
			this.isShowJy = true;
		},
		noticeList() {
			this.articleOne={};
			let params = {
				page: 1,
				page_size: 2000
			};
			this.$axios('get', '/api/information/index', params).then(res => {
				if (res.data.code == 1) {
					let list = res.data.data;
					this.$nextTick(() => {
						if (list[0]) {
							this.articleOne = list[0];
							this.announcement = list;
						}else{
							this.announcement = [];
						}
						this.noticeDetails();
					});
				}
			});
		},
		noticeDetails() {
			if (!this.articleOne.id) {
				return false;
			}
			this.noticeLoad = true;
			this.aAtripOfDetails='';
			this.$axios('get', '/api/information/info', { id: this.articleOne.id })
				.then(res => {
					if (res.data.code == 1) {
						this.aAtripOfDetails = res.data.data.content.html;
						this.detaliData=res.data.data;
					}
				})
				.finally(() => {
					this.noticeLoad = false;
				});
		},
		dept_click(item) {
			this.articleOne = item;
			this.noticeDetails();
		}
	}
};
</script>

<style scoped lang="scss">
.active {
	color: #26a2ff;
	background-color: #ecf5ff;
}

/* 表格 */
table {
	border-collapse: collapse;
}
table th,
table td {
	border: 1px solid #ccc;
	min-width: 50px;
	height: 20px;
	text-align: left;
}
table th {
	background-color: #f1f1f1;
	text-align: center;
}

/* 代码块 */
pre > code {
	display: block;
	border: 1px solid hsl(0, 0%, 91%);
	border-radius: 4px 4px;
	text-indent: 0;
	background-color: #fafafa;
	padding: 10px;
	font-size: 14px;
}

/* 引用 */
blockquote {
	display: block;
	border-left: 8px solid #d0e5f2;
	padding: 10px 10px;
	margin: 10px 0;
	background-color: #f1f1f1;
}

/* 列表 */
ul,
ol {
	margin: 10px 0 10px 20px;
}
::v-deep p{
	    margin-block-start: 1em;
	    margin-block-end: 1em;
}

/* 分割线 */
hr {
	display: block;
	width: 90%;
	margin: 20px auto;
	border: 0;
	height: 1px;
	background-color: #ccc;
}
.header {
	border-bottom: 1px solid #f1f1f1;
	padding-bottom: 10px;
	padding-right: 20px;
}
.header-title {
	box-sizing: border-box;
	position: relative;
	width: 200px;
}
.el-icon-arrow-left {
	font-size: 20px;
}
.header-title:hover .el-icon-arrow-left {
	background-color: #f5f7fa;
	color: #222;
}
.text {
	font-size: 16px;
	padding-left: 30px;
}
.text::before {
	position: absolute;
	content: '';
	width: 1px;
	height: 60px;
	background-color: #ebebeb;
	left: 34px;
	top: 50%;
	margin-top: -18px;
}
.title {
	background-color: #fff;
	height: 56px;
	line-height: 56px;
	border-bottom: 1px solid #f1f1f1;
}
.RuleRight {
	height: 690px;
	overflow-y: auto;
	position: relative;
}
::v-deep .el-tree--highlight-current {
	.el-tree-node {
		border-bottom: 1px #f0f0f0 solid;
	}
	.el-tree-node__content {
		background-color: #fff;
		height: 56px;
		line-height: 56px;
	}
	.is-current {
		.el-tree-node__content {
			.el-icon-caret-right {
				// color:#409EFF !important;
			}
			.el-tree-node__label {
				color: #409eff !important;
			}
		}
		.el-tree-node__children {
			.el-icon-caret-right {
				color: #c0c4cc !important;
			}
			.el-tree-node__label {
				color: #606266 !important;
			}
		}
	}
}
.tabs ::v-deep.el-badge__content.is-fixed {
	position: absolute;
	top: 50%;
	right: -2px;
}
.box {
	padding: 20px;
	font-size: 14px;
	position: relative;
	background-color: #fff;
}
.main {
	margin-top: 30px;
}
/* bug： 我在flex布局的元素中使用了elementui的table组件，饿了么的table上会被加一个动态的宽度， 当第一次改变flex元素宽度的时候。table的动态宽度会变化，第二次和以后就不会变化了。*/
/* 给使用flex的元素加上 overflow-x：hidden */
.main-right {
	margin-left: 20px;
	overflow-x: hidden;
}
.main-left {
	width: 200px;
	border-radius: 3px;
	box-sizing: border-box;
	// padding-right: 20px;
	max-height: 700px;
	overflow: auto;
}
.main-left::after {
	position: absolute;
	content: '';
	width: 1px;
	height: auto;
	left: 220px;
	top: 0;
	bottom: 0;
	background-color: #f1f1f1;
}
::v-deep .has-gutter {
	display: none;
}
.li {
	height: 53px;
	line-height: 53px;
	padding: 0 20px;
	border-bottom: 1px solid #f1f1f1;
	color: #777777;
	width: 100%;
}
.li:hover {
	background-color: #f5f7fa;
}
.li:hover .el-icon-more {
	display: block;
}
.index-name {
	width: 170px;
}
.ul {
	max-height: calc(100vh - 230px);
	overflow: auto;
	width: 200px;
}
.isActiveLi {
	background-color: #f5f7fa;
	color: #409eff !important;
	position: relative;
}
.isActiveLi::after {
	width: 3px;
	content: ' ';
	background-color: #409eff;
	left: 0;
	bottom: 0;
	top: 0;
	position: absolute;
}
.item {
	font-size: 14px;
	cursor: pointer;
	padding: 8px;
	border-bottom: 1px solid #e8e8e8;
}
.item:hover {
	background-color: #f5f7fa;
}
.content {
	padding: 0 10px;
}
</style>
