<template>
	<div class="main" style="padding: 18px!important;">
		<div class="panel content_box">
			<el-card class="panel_left">
				<div slot="header" class="clearfix">
					<span><i class="iconfont icongongzuoxiang"></i>工作箱</span>
				</div>
				<div class="enter_box">
					<div
						class="box"
						v-for="(item, index) in workList"
						:key="index"
						@click="handleSelect(item)"
					>
						<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><i class="iconfont iconkuaijierukou"></i>快捷入口</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(item)"
					>
						<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 class="news">
				<div slot="header" class="clearfix">
					<span><i class="iconfont icontongzhigonggao"></i>通知公告</span>
					<span class="edit">查看全部 <i class="fa fa-angle-right " aria-hidden="true"></i></span>
				</div>
				<el-table
					:data="tableData"
					height="240"
					:row-class-name="tableRowClassName"
				>
					<el-table-column prop="title" width="500" align="left" class="tr-title" 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><i class="iconfont iconxiazai1"></i>相关下载</span>
					<span class="edit">查看全部 <i class="fa fa-angle-right " aria-hidden="true"></i></span>
				</div>
				<el-table
					:data="downloadData"
					height="240"
					border
					@row-click="download"
					:row-class-name="tableRowClassName"
				>
					<el-table-column
							type="index" align="center"
							width="70" label="序号">
					</el-table-column>
					<el-table-column prop="name" align="center" label="下载文件">
					</el-table-column>
				</el-table>
			</el-card>
		</div>
		<div class="tj">
			<el-card class="panel_right">
				<div slot="header" class="clearfix">
					<span><i class="iconfont iconbingtu"></i>成果类别占比</span>
				</div>
				<div class="enter_box" ref="enterBox">
					<img src="../../assets/images/cglbzb.png" :style="{'height':imgHeight + 'px'}" alt="">
				</div>
			</el-card>
			<el-card class="cghj">
				<div slot="header" class="clearfix">
					<span><i class="iconfont icontizhuangshuju"></i>成果汇交数量</span>
					<img src="../../assets/images/cghjsllegend.png" style="float: right;" alt="">
				</div>
				<div class="enter_box">
					<img src="../../assets/images/cghjsl.png" :style="{'height':imgHeight + 'px'}"  alt="">
				</div>
			</el-card>
			<el-card class="cghj-pie">
				<div slot="header" class="clearfix">
					<span><i class="iconfont iconhuijiaochengguo"></i>成果汇交数量</span>
				</div>
				<div class="enter_box">
					<img src="../../assets/images/cghjsl-pie.png" :style="{'height':imgHeight + 'px'}"  alt="">
				</div>
			</el-card>
		</div>
	</div>
</template>

<script>
import {getDbxList} from "@api/dbx";
export default {
	components:{},
	data() {
		return {
			workList: [
				{ name: "待办箱", img: require("@assets/images/dbx.png"),count:0,path:'/dbx' },
				{ name: "退件箱", img: require("@assets/images/tjx.png"),count:0 },
			],
			list: [
				{ name: "宗地分割", img: require("@assets/images/zdfg.png"),path:'change',oLevel:'fg',tLevel:'zd'},
				{
					name: "宗地合并",
					img: require("@assets/images/drlpbmb.png"),
					path:'change',oLevel:'hb',tLevel:'zd'
				},
				{ name: "范围属性变更", img: require("@assets/images/xbfw.png"),path:'change',oLevel:'fwsxbg',tLevel:'' },
				{ name: "重新落宗", img: require("@assets/images/cxlz.png"),path:'change',oLevel:'cxlz',tLevel:''},
				{ name: "添加", img: require("@assets/images/tj.png") },
			],
			tableData: [
				{
					title:"明起部分不动产登记业务实行“网上不见面”办理",
					date:"2020-12-30"
				},
				{
					title:"【通知】关于暂停不动产交易缴税业务的通知",
					date:"2020-12-30"
				},
				{
					title:"我市不动产登记改革跨入新领域",
					date:"2020-12-30"
				},
				// {
				// 	title:"住建委发布白皮书 持续推进房地产市场平稳健康发展",
				// 	date:"2020-12-30"
				// },
				// {
				// 	title:"不动产登记与公证业务全面联办 中心城区下月起实行",
				// 	date:"2020-12-30"
				// },
				// {
				// 	title:"坚持以人民为中心发展思想 推进解决房地产历史遗留问题",
				// 	date:"2020-12-30"
				// }
			],
            downloadData:[
                {
                    name:"宗地导入模板",
                    url:"api/tx/excelGeo/template?type=zd"
                },{
                    name:"自然幢导入模板",
                    url:"api/tx/excelGeo/template?type=zrz"
                }
			],
			tableHeight: 0,
			total: 0,
			isEdit:false,
			imgHeight:200
		};
	},
	mounted() {
		this.$nextTick(() => {
			// this.tableHeight = this.$refs.notice.offsetHeight - 54;
			this.imgHeight = this.$refs.enterBox.offsetHeight - 10
		});
		this.getDbxCount();
	},
	methods: {
        download(row,column,event){
			window.open(row.url)
		},
		handleSelect(item) {
        	console.log(JSON.stringify(item)+":item")
			//非编辑状态才可以点击
			if (!this.isEdit) {
				if(item.path){
					let params = {};
					if(item.oLevel!==''){
						params.oLevel = item.oLevel;
					}
					if(item.tLevel!==''){
						params.tLevel = item.tLevel;
					}
					this.$router.push({
						path:item.path,
						query:params
					})
				}
			}
		},
		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(() => {

			});
		},
		getDbxCount(){
			let data = {
				pageSize:15,
				pageNo:1
			}
			getDbxList(data).then((res)=>{
				if(res.code === 200){
					this.workList.forEach((item,index)=>{
						if(item.name === '待办箱'){
							item.count = res.result.total;
						}
					})
				}
			})
		}
	},
};
</script>
<style rel="stylesheet/less" scoped lang="less">
.main {
	display: flex;
	flex-direction: column;
	// overflow: scroll;
	height: 100%;
	.clearfix {
		span {
			color: #6d7278;
			float: left;
			i{
				padding-right: 6px;
				position: relative;
				top: 1px;
			}
		}
		.edit {
			color: #9b9b9b;
			float: right;
			cursor: pointer;
			.fa-angle-right{
				font-size: 26px;
				line-height: 7px;
				position: relative;
				top: 2px;
			}
		}
	}
	.panel {
		@flex();
		width: 100%;
		padding: 0 0 18px!important;
		.panel_left {
			width: 33.333%;
			margin-right: 20px;
			flex: 1;
		}
		.panel_right {
			width: 66.666%;
		}
		.enter_box {
			@flex();
			div {
				cursor: pointer;
				flex: 1;
				img {
					width: 84px;
					height: 84px;
					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: 3px;
					right: -2px;
					background: #fff;
					border-radius: 10px;
					box-sizing: border-box;
					padding: 1px;
				}
				.el-badge{
					width: 84px;
					height: 84px;
					display: block;
					margin: 0 auto;
					/deep/.el-badge__content{
						top: 18px;
						right: 22px;
						background-color: #fa6400;
					}
				}
			}
			.psr {
				width: 84px;
				height: 84px;
				display: block;
				margin: 0 auto;
				img {
					width: 84px;
					height: 84px;
				}
			}
		}
		/deep/ .el-card__body {
			padding: 14px 20px 22px 20px;
		}
	}
	.notice {
		padding: 0;
		height: 295px;
		padding-bottom: 18px;
		@flex();
		.news {
			float: left;
			float: left;
			margin-right: 20px;
			flex: 1;
			/deep/ .el-card__body{
				padding: 0;
			}
		}
		.download {
			width: 50%;
			/deep/ .el-card__body{
				padding: 0;
			}
		}
		.el-card__body {
			padding: 0;
		}
		th.is-left {
			text-align: center;
		}
		tr{
			background-color: #FBFBFB;
		}
	}
	.tj{
		flex: 1;
		width: 100%;
		display: flex;
		>div{
			flex: 1;
			// flex-grow:1;
			height: 100%;
			margin-right: 20px;
			background: #fff;
			box-shadow: 0 0 8px 0 rgba(232, 237, 250, 0.6), 0 2px 4px 0 rgba(232, 237, 250, 0.5);
			/deep/ .el-card__body{
				height: calc(100% - 93px);
				overflow: hidden;
				.enter_box{
					height: 100%;
					overflow: hidden;
					img{
						height: 200px;
						display: block;
						margin: 0 auto;
					}
				}
			}
		}
		.cghj-pie{
			margin-right: 0;
		}
	}
	.pagination {
		padding: 18px;
	}
	.el-table{
		border: 0!important;
	}
	/deep/ .el-table .cell{
		padding-left: 20px;
	}
}
</style>