<template>
	<div class="main">
		<div class="panel content_box">
			<el-card class="panel_left">
				<div slot="header" class="clearfix">
					<span>工作箱</span>
				</div>
				<div class="enter_box">
					<div
						class="box"
						v-for="(item, index) in workList"
						:key="index"
						@click="handleSelect"
					>
						<el-badge :value="item.count" :max="99" class="item">
							<img :src="item.img" alt="" />
						</el-badge>
						<span>{{ item.name }}</span>
					</div>
				</div>
			</el-card>
			<el-card class="panel_right">
				<div slot="header" class="clearfix">
					<span>快捷入口</span>
					<span class="edit" @click="isEdit = true" v-show="!isEdit">编辑</span>
					<span class="edit" @click="isEdit = false" v-show="isEdit">完成</span>
				</div>
				<div class="enter_box">
					<div
						class="box"
						v-for="(item, index) in list"
						:key="index"
						@click="handleSelect"
					>
						<div class="psr">
							<img :src="item.img" alt="" />
							<i class="fa fa-times-circle fa-2x" v-show="isEdit && index!=list.length-1" @click="edit(index)" aria-hidden="true"></i>
						</div>
						<span>{{ item.name }}</span>
					</div>
				</div>
			</el-card>
		</div>
		<div class="notice" ref="notice">
			<el-card>
				<div slot="header" class="clearfix">
					<span>通知公告</span>
					<span class="edit">查看全部 <i class="fa fa-angle-right " aria-hidden="true"></i></span>
				</div>
				<el-table
					:data="tableData"
					:height="tableHeight"
					:row-class-name="tableRowClassName"
				>
					<el-table-column prop="title" width="500" align="center" label="标题">
					</el-table-column>
					<el-table-column
						prop="date"
						align="center"
						label="发布时间"
					>
					</el-table-column>
				</el-table>
			</el-card>
			<el-card class="download">
				<div slot="header" class="clearfix">
					<span>相关下载</span>
					<span class="edit">查看全部 <i class="fa fa-angle-right " aria-hidden="true"></i></span>
				</div>
				<el-table
					:data="tableData"
					:height="tableHeight"
					:row-class-name="tableRowClassName"
				>
					<el-table-column prop="title" align="center" label="内容名称">
					</el-table-column>
				</el-table>
			</el-card>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			workList: [
				{ name: "待办箱", img: require("../../assets/images/dbx.png"),count:10 },
				{ name: "退件箱", img: require("../../assets/images/tjx.png"),count:3 },
			],
			list: [
				{ name: "宗地分割", img: require("../../assets/images/zdfg.png") },
				{
					name: "导入楼盘表模板",
					img: require("../../assets/images/drlpbmb.png"),
				},
				{ name: "新办房屋", img: require("../../assets/images/xbfw.png") },
				{ name: "重新落宗", img: require("../../assets/images/cxlz.png") },
				{ name: "添加", img: require("../../assets/images/tj.png") },
			],
			tableData: [],
			tableHeight: 0,
			total: 0,
			isEdit:false
		};
	},
	mounted() {
		this.$nextTick(() => {
			this.tableHeight = this.$refs.notice.offsetHeight - 54;
		});
	},
	methods: {
		handleSelect() {
			//非编辑状态才可以点击
			if (!isEdit) {

			}
		},
		tableRowClassName({ row, rowIndex }) {
			if (rowIndex % 2 !== 0) {
				return "even-row";
			} else {
				return "";
			}
		},
		//快捷入口管理
		edit(index){
			this.$confirm('此操作删除该快捷入口, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
				}).then(() => {
					this.list.splice(index,1);
					//调用删除接口 TO DO
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
				}).catch(() => {

			});
		}
	},
};
</script>
<style rel="stylesheet/less" scoped lang="less">
.main {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	height: 100%;
	.clearfix {
		span {
			color: #6d7278;
			float: left;
		}
		.edit {
			color: #9b9b9b;
			float: right;
			cursor: pointer;
			.fa-angle-right{
				font-size: 26px;
				line-height: 7px;
				position: relative;
				top: 2px;
			}
		}
	}
	.panel {
		@flex();
		width: 100%;
		.panel_left {
			width: 35%;
			margin-right: 20px;
			flex: 1;
		}
		.panel_right {
			width: 65%;
		}
		.enter_box {
			@flex();
			div {
				cursor: pointer;
				flex: 1;
				img {
					width: 68px;
					height: 68px;
					display: block;
					margin: 0 auto;
				}
				span {
					color: #6d7278;
					display: block;
					text-align: center;
					margin-top: 10px;
				}
				.fa-times-circle {
					color: #fa6400;
					font-size: 24px;
					position: absolute;
					top: -4px;
					right: -10px;
					background: #fff;
					border-radius: 10px;
					box-sizing: border-box;
					padding: 1px;
				}
			}
			.psr {
				width: 68px;
				height: 68px;
				display: block;
				margin: 0 auto;
				img {
					width: 68px;
					height: 68px;
				}
			}
		}
		/deep/ .el-card__body {
			padding: 50px 20px;
		}
	}
	.notice {
		padding: 0;
		height: calc(100% - 285px);
		@flex();
		.news {
			float: left;
			float: left;
			margin-right: 20px;
			flex: 1;
			border: 1px solid #E6E6E6;
			/deep/ .el-card__body{
				padding: 0;
			}
		}
		.download {
			width: 50%;
			border: 1px solid #E6E6E6;
			/deep/ .el-card__body{
				padding: 0;
			}
		}
		.el-card__body {
			padding: 0;
		}
		th.is-left {
			text-align: center;
		}
		tr{
			background-color: #FBFBFB;
		}
	}
	.pagination {
		padding: 18px;
	}
}
</style>