<template>
	<div class="pb_content">
		<div class="pb_head">
			<span>通知公告</span>
		</div>
		<div class="pb_content_body">
			<div class="student_table">
				<el-table
					ref="table"
					:data="tableData"
					border
					:height="tableHeight"
					:fit="true"
					style="width: 100%"
					:header-cell-style="{ background: '#f1f1f1' }"
					:row-class-name="tableRowClassName"
					v-loading="loading"
				>
					<el-table-column
						prop="content"
						label="通知内容"
						min-width="35"
						align="center"
						:show-overflow-tooltip="true"
					>
					</el-table-column>
					<el-table-column
						prop="creater"
						label="创建者"
						min-width="15"
						align="center"
					>
						{{ this.tableData[0].creater ? this.tableData[0].creater : "未知" }}
					</el-table-column>
					<el-table-column
						prop="creatTime"
						label="创建时间"
						min-width="25"
						align="center"
					>
					</el-table-column>
					<el-table-column label="操作" min-width="20">
						<template slot-scope="scope">
							<el-button
								type="primary"
								size="small"
								@click="getNewDetail(scope.row.newsid)"
								>查看通知</el-button
							>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="student_page">
				<el-pagination
					background
					layout="prev, pager, next"
					:page-size="10"
					:total="total"
					@current-change="handleCurrentChange"
				>
				</el-pagination>
			</div>
		</div>
		<el-dialog
			title="查看通知"
			:visible.sync="dialogVisible"
			:append-to-body="true"
			width="50%"
			:before-close="handleClose"
			class="look_notice"
		>
			<div slot="title" class="header-title">
				<div class="logoImg">
					<img src="../../assets/logo.png" alt="" />
				</div>
				<div class="title_add_student">查看作业</div>
			</div>
			<div>
				<div class="pb_head">
					<span style="font-size: 20px">{{ res.title }}</span>
					<span style="font-size: 15px; line-height: 35px">{{
						this.tableData[0].creater
					}}</span>
				</div>
				<div class="notice_content" v-html="res.newscontent"></div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button class="close" @click="dialogVisible = false" type="primary"
					>关闭</el-button
				>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				tableHeight: "500px",
				page: 1,
				total: 0,
				isLoading: false,
				formLabelWidth: "100px",
				dialogVisible: false,
				title: "国学经典之《汉书》",
				newscontent:
					"《汉书》，又称《前汉书》，由我国东汉时期的历史学家班固编撰，是中国第一部纪传体断代史，“二十四史之一”。" +
					"《汉书》是继《史记》之后我国古代又一部重要史书，与《史记》、《后汉书》、《三国志》并称为“前四史”。《汉书》全书主要记述了上起西汉的汉高祖元年（公元前206年），下至新朝的王莽地皇四年，共230年的史事。" +
					"《汉书》包括纪十二篇，表八篇，志十篇，传七十篇，共一百篇，后人划分一百二十卷，共八十万字。",
				tableData: [],
				res: [],
			};
		},
		methods: {
			snippet(value) {
				return value.replace(/<[^>]*>/g, "");
			},
			tableRowClassName({ row, rowIndex }) {
				if ((rowIndex + 1) % 2 === 0) {
					return "even_row";
				} else {
					return "";
				}
			},
			handleCurrentChange(val) {
				this.page = val;
			},
			handleClose(done) {
				done();
			},
			getNewDetail(id) {
				this.dialogVisible = true;
				let params = { nid: id };
				this.ajax
					.get(this.$store.state.api + "selectNewDetail", params)
					.then((res) => {
						this.dialogVisible = true;
						this.res = res.data[0][0];
					})
					.catch((err) => {
						this.loading = false;
					});
			},

			getNews() {
				this.loading = true;
				let params = { uid: this.$store.state.userInfo.userid, page: this.page };
				this.ajax
					.get(this.$store.state.api + "getNewsTeacher", params)
					.then((res) => {
						this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
						this.loading = false;
						this.tableData = res.data[0];
					})
					.catch((err) => {
						this.loading = false;
					});
			},
		},
		created() {
			this.getNews();
		},
	};
</script>

<style scoped>
	.pb_head {
		display: flex;
		justify-content: space-between;
	}
	.student_head {
		margin-bottom: 20px;
	}
	.student_search {
		display: flex;
	}
	.student_search > div:nth-child(1) {
		line-height: 35px;
		font-size: 14px;
	}
	.student_search >>> .el-input__inner {
		width: 190px;
		height: 35px;
		margin-left: 10px;
	}
	.student_table >>> .el-table--border td {
		border-right: 0px !important;
	}
	.header-title {
		display: flex;
	}
	.logoImg {
		width: 30px;
	}
	.logoImg > img {
		width: 100%;
		height: 100%;
	}
	.title_add_student {
		margin: 0 auto;
		color: #fff;
	}
	.look_notice >>> .el-dialog__header {
		padding: 20px 20px 10px;
		text-align: center;
		background: #32455b;
	}
	.look_notice >>> .el-dialog__title {
		font-size: 14px !important;
		color: #fff !important;
	}
	.look_notice >>> .el-dialog__headerbtn {
		font-size: 20px !important;
	}
	.look_notice >>> .el-form-item__label {
		margin-left: 65px;
	}
	.look_notice >>> .el-form-item {
		display: flex;
	}
	.look_notice >>> .el-form-item__content {
		margin: 0 !important;
	}
	.look_notice >>> .el-dialog__footer {
		text-align: center !important;
	}
	.notice_content {
		margin: 20px 0 0 20px;
		width: 850px;
		word-wrap: break-word;
		word-break: break-all;
		overflow: hidden;
		font-size: 18px;
		line-height: 35px;
		text-indent: 35px;
	}
	.close {
		width: 320px;
		height: 30px;
		line-height: 30px;
		font-size: 14px;
		background: #0e72e6;
		padding: 0 !important;
	}
</style>
