<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item><i class="el-icon-lx-punch"></i> 数据库</el-breadcrumb-item>
				<el-breadcrumb-item>数据库讨论区</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container">
			<div class="title_header">
				<span>{{title_header}}</span>
			</div>
			<div class="handle-box">
				<el-button type="primary" icon="el-icon-plus" class="handle-del" @click="add_Selection">添加</el-button>
			</div>
			<ul class="up_list">
				<!-- <li v-for="item in listData">
					<h4>{{ item.title }}</h4>
					<p>{{ item.ctime }}</p>
					<div></div>
					<span v-if="role_pd == '0'"><i @click="deletfile(item, $event)" class="el-icon-lx-delete red"></i></span>
				</li> -->
				<li>
					<router-link :to="{path:'/datalkcon',query: {talk_num: '1'}}">
						<h4>1111111111111111111</h4>
					</router-link>
					<p>2012-02-03</p>
					<div class="nei_r">22222222222222</div>
					<div class="nei_p"><i class="el-icon-lx-messagefill"></i>5条评论</div>
					<span v-if="role_pd == '0'"><i @click="deletfile(item, $event)" class="el-icon-lx-delete red"></i></span>
				</li>
				<li>
					<router-link :to="{path:'/datalkcon',query: {talk_num: '1'}}">
						<h4>1111111111111111111</h4>
					</router-link>
					<p>2012-02-03</p>
					<div class="nei_g">
						<img src="../../assets/img/img.jpg" alt="" width="200px">
						<p>7. 掉头一去是风吹黑发，回首再来已雪满白头。 ——余光中 8. 但屈指西风几时来，又不道流年暗中偷换。 ——苏轼《洞仙歌·冰肌玉骨》 9. 林下漏月光，疏疏如残雪。 ——张岱《陶庵梦忆·卷一·金山夜戏》10.
							疏影横斜，远映西湖清浅；暗香浮动，长陪夜月黄昏。 ——张岱《补孤山种梅叙》 张岱真是好会写景一男的。11. 两水夹明镜，双桥落彩虹。人烟寒橘柚，秋色老梧桐。 ——李白《秋登宣城谢朓北楼》

							作者：纸条
							链接：https://www.zhihu.com/question/334538177/answer/790721430
							来源：知乎
							著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。</p>
					</div>
					<div class="nei_p"><i class="el-icon-lx-messagefill"></i>5条评论</div>
					<span v-if="role_pd == '0'"><i @click="deletfile(item, $event)" class="el-icon-lx-delete red"></i></span>
				</li>
			</ul>
			<div class="pagination">
				<el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex" :page-size="query.pageSize"
				 :total="link_Total" @current-change="handlePageChange"></el-pagination>
			</div>
		</div>

		<!-- 添加弹出框 -->
		<el-dialog title="添加" :visible.sync="addVisible" width="40%">
			<el-form ref="add_Form" :model="addForm" :rules="rules" label-width="85px">
				<el-form-item label="标题" prop="name">
					<el-input v-model="addForm.name"></el-input>
				</el-form-item>
				<el-form-item label="内容" prop="content">
					<el-input v-model="addForm.name" type="textarea" rows="3"></el-input>
				</el-form-item>
				<el-form-item label="图片">
					<el-upload class="upload-demo" :action="IMGup_Url+'master/Datebase/up_file'" :on-preview="handlePreview"
					 :on-remove="handleRemove" :before-remove="beforeRemove" :on-exceed="handleExceed" :file-list="fileList" :limit="3"
					 :before-upload="beforeAvatarUpload" accept=".png,.jpg" list-type="picture">
						<el-button size="small" type="primary">点击上传</el-button>
						<div slot="tip" class="el-upload__tip">只能上传图片格式，且不超过500kb</div>
					</el-upload>
				</el-form-item>

			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addVisible = false">取 消</el-button>
				<el-button type="primary" @click="saveAdd(addForm)">确 定</el-button>
			</span>
		</el-dialog>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				query: {
					db_id: this.$route.query.db_num,
					pageIndex: 1,
					pageSize: 20
				},
				addForm: {
					db_id: this.$route.query.db_num,
				},
				role_pd: localStorage.getItem('admin_role'), //身份判断
				IMGup_Url: this.IMGupURL,
				fileList: [],
				listData: [],
				multipleSelection: [],
				delList: [],
				addVisible: false,
				link_Total: 0,
				aid: -1,
				title_header: "",
				id: -1,
				rules: {
					name: [{
						required: true,
						message: '请输入标题',
						trigger: 'blur'
					}],
					content: [{
						required: true,
						message: '请输入内容',
						trigger: 'blur'
					}]
				}
			};
		},
		created() {
			this.getData();
		},
		methods: {
			// 获取资料库列表数据
			getData() {
				this.$api
					.post('master/Datebase/getDatas', this.query)
					.then(res => {
						if (res.code == 0) {
							// this.title_header = res.data.journal.title;
							for (let i = 0; i < res.data.dataList.length; i++) {
								let date = new Date(parseInt(res.data.dataList[i].ctime) * 1000);
								let Y = date.getFullYear() + '-';
								let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date.getMonth() + 1 + '-';
								let D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
								res.data.dataList[i].ctime = Y + M + D;
							}
							this.listData = res.data.dataList;
							this.link_Total = res.data.dataList.length || 0;

						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},
			// 下载
			loadfile(item, event) {
				window.open(this.IMGdo_Url + 'dbdata/' + item.url);
			},
			// 删除
			deletfile(item, event) {
				this.$confirm('确定要删除吗？', '提示', {
						type: 'warning'
					})
					.then(() => {
						this.$api
							.post('master/Datebase/delData', item)
							.then(res => {
								if (res.code == 0) {
									this.$message.success('删除成功');
									this.getData();
								} else {
									this.$message.error(res.msg);
								}
							})
							.catch(err => {
								this.$message.error(err);
							});
					})
					.catch(() => {});
			},
			// 添加操作
			add_Selection(index, row) {
				this.aid = index;
				this.addVisible = true;
			},
			// 保存添加
			saveAdd(addForm) {
				this.$refs.add_Form.validate((valid) => {
					if (valid) {
						this.$api
							.post('master/Datebase/addData', this.addForm)
							.then(res => {
								if (res.code == 0) {
									this.addVisible = false;
									this.$refs.add_Form.resetFields();
									this.$message.success(`添加成功`);
									this.getData();
								} else {
									this.$message.error(res.msg);
								}
							})
							.catch(err => {
								this.$message.error(err);
							});

					} else {
						this.$message.error('error submit!!');
						return false;
					}
				});
			},

			// 删除操作
			handleDelete(index, row) {
				// 二次确认删除
				this.$confirm('确定要删除吗？', '提示', {
						type: 'warning'
					})
					.then(() => {
						this.$api
							.post('master/Journal/delJournalAbs', row)
							.then(res => {
								if (res.code == 0) {
									this.$message.success('删除成功');
									this.getData();
								} else {
									this.$message.error(res.msg);
								}
							})
							.catch(err => {
								this.$message.error(err);
							});
					})
					.catch(() => {});
			},

			// 图片上传
			handleRemove(file, fileList) {
				console.log(file, fileList);
			},
			handlePreview(file) {
				console.log(file);
			},
			handleExceed(files, fileList) {
				this.$message.warning(`当前限制选择只能上传 3 个图片，请先删除`);
			},
			beforeRemove(file, fileList) {
				return this.$confirm(`确定移除 ${ file.name }？`);
			},
			beforeAvatarUpload(file) {
				const isLt2M = file.size / 1024 / 1024 < 1;
				if (!isLt2M) {
					this.$message.error('图片大小不能超过 1M!');
				}
				return isLt2M;
			},



			// 分页导航
			handlePageChange(val) {
				this.$set(this.query, 'pageIndex', val);
				this.getData();
			}
		}
	};
</script>

<style>
	.handle-box {
		margin-bottom: 20px;
	}

	.upload-demo .el-upload {
		text-align: left;
		width: 200px;
		height: 35px;
	}

	.el-upload-list__item:first-child {
		margin-top: 0;
	}

	.el-upload--text {
		border: 0;
	}

	ul.up_list li {
		list-style: none;
		color: #606266;
		font-size: 14px;
		border-bottom: 1px solid #dcdfe6;
		padding-bottom: 20px;
		margin-bottom: 20px;
	}

	ul.up_list li .red {
		color: #ff0000;
		font-weight: bolder;
	}

	ul.up_list li {
		position: relative;
	}

	ul.up_list li span {
		position: absolute;
		top: -8px;
		right: 8px;
		cursor: pointer;

	}

	ul.up_list li h4 {
		padding: 0 40px 0 10px;
		cursor: pointer;
		color: #606266;
	}

	ul.up_list li h4:hover {
		text-decoration: underline;
	}

	ul.up_list li>p {
		padding: 0 10px;
		text-align: right;
	}

	ul.up_list li div.nei_r {
		padding: 10px 10px 0 10px;
	}

	ul.up_list li div.nei_g {
		padding: 10px 10px 0 10px;
		overflow: auto;
	}

	ul.up_list li div.nei_g img {
		float: left;
		padding-right: 22px;
		vertical-align: top;
		width: 18%;
		/* width: 200px; */
	}

	ul.up_list li div.nei_g p {
		float: left;
		width: 76%;
		margin-top: 5px;
	}

	ul.up_list li div.nei_p {
		padding: 12px 10px 0 10px;
		color: #8590a6;
	}

	ul.up_list li div.nei_p i {
		margin-right: 5px;
	}
</style>
