<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" id="qllxzbid">
					<!-- <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" id="tdfwtjid">
					<!-- <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" id="xntjid">
					<!-- <img src="../../assets/images/cghjsl-pie.png" :style="{'height':imgHeight + 'px'}"  alt=""> -->
				</div>
			</el-card>
		</div>
	</div>
</template>

<script>
import { Chart, registerShape } from '@antv/g2';
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();
		this.initG2qllx();
		this.initG2tdfwtj();
		this.initG2xntjid();
	},
	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;
						}
					})
				}
			})
		},
		initG2qllx(){
			const data = [
			{ item: '国有建设用地使用权', count: 40, percent: 0.4 },
			{ item: '集体建设用地使用权', count: 21, percent: 0.21 },
			{ item: '宅基地使用权', count: 17, percent: 0.17 },
			{ item: '土地承包经营权', count: 13, percent: 0.13 },
			{ item: '林地使用权', count: 9, percent: 0.09 },
			];
      		const container = document.getElementById('qllxzbid');

			const chart = new Chart({
			container: 'qllxzbid',
			autoFit: true,
			height: 500,
			});

			chart.coordinate('theta', {
			radius: 0.75,
			innerRadius: 0.7,
			});

			chart.data(data);

			chart.scale('percent', {
			formatter: val => {
				val = val * 100 + '%';
				return val;
			},
			});

			chart.tooltip(false);

			// 声明需要进行自定义图例字段： 'item'
			chart.legend('item', {
			position: 'right',                                  // 配置图例显示位置
			offsetX: -50,
			custom: true,                                       // 关键字段，告诉 G2，要使用自定义的图例
			items: data.map((obj, index) => {
				return {
				name: obj.item,                                 // 对应 itemName
				value: obj.percent,                             // 对应 itemValue
				marker: {
					symbol: 'square',                             // marker 的形状
					style: {
					r: 5,                                       // marker 图形半径
					fill: chart.getTheme().colors10[index],     // marker 颜色，使用默认颜色，同图形对应
					},
				},                                              // marker 配置
				};
			}),
			itemValue: {//百分比的样式
				style: {
				fill: '#999',
				},                                               // 配置 itemValue 样式
				formatter: val => `${val * 100}%`                // 格式化 itemValue 内容
			},
			});

			chart
			.interval()
			.adjust('stack')
			.position('percent')
			.color('item')
			.style({
				fillOpacity: 1,
			})
			.state({
				active: {
				style: element => {
					const shape = element.shape;
					return {
					lineWidth: 10,
					stroke: shape.attr('fill'),
					strokeOpacity: shape.attr('fillOpacity'),
					};
				},
				},
			});

			// 移除图例点击过滤交互
			chart.removeInteraction('legend-filter');
			chart.interaction('element-active');

			chart.render();

			// 监听 element 上状态的变化来动态更新 Annotation 信息
			chart.on('element:statechange', (ev) => {
			const { state, stateStatus, element } = ev.gEvent.originalEvent;

			// 本示例只需要监听 active 的状态变化
			if (state === 'active') {
				const data = element.getData();
				if (stateStatus) {
				// 更新 Annotation
				updateAnnotation(data);
				} else {
				// 隐藏 Annotation
				clearAnnotation();
				}
			}
			});
			// 绘制 annotation
			let lastItem;
			function updateAnnotation(data) {
			if (data.item !== lastItem) {
				chart.annotation().clear(true);
				chart
				.annotation()
				.text({
					position: ['50%', '50%'],
					content: data.item,
					style: {
					fontSize: 18,
					fill: '#8c8c8c',
					textAlign: 'center',
					},
					offsetY: -20,
				})
				.text({
					position: ['50%', '50%'],
					content: data.count,
					style: {
					fontSize: 18,
					fill: '#8c8c8c',
					textAlign: 'center',
					},
					offsetX: -10,
					offsetY: 20,
				})
				.text({
					position: ['50%', '50%'],
					content: '件',
					style: {
					fontSize: 18,
					fill: '#8c8c8c',
					textAlign: 'center',
					},
					offsetY: 20,
					offsetX: 20,
				});
				chart.render(true);
				lastItem = data.item;
			}
			}

			// 清空 annotation
			function clearAnnotation() {
			chart.annotation().clear(true);
			chart.render(true);
			lastItem = null;
			}
		},
		initG2tdfwtj(){
			const data = [
			{ name: '土地', 月份: '1月', 办件数量: 18.9 },
			{ name: '土地', 月份: '2月', 办件数量: 28.8 },
			{ name: '土地', 月份: '3月', 办件数量: 39 },
			{ name: '土地', 月份: '4月', 办件数量: 81 },
			{ name: '土地', 月份: '5月', 办件数量: 47 },
			{ name: '土地', 月份: '6月', 办件数量: 20 },
			{ name: '土地', 月份: '7月', 办件数量: 24 },
			{ name: '土地', 月份: '8月', 办件数量: 35 },
			{ name: '房屋', 月份: '1月', 办件数量: 12 },
			{ name: '房屋', 月份: '2月', 办件数量: 23 },
			{ name: '房屋', 月份: '3月', 办件数量: 34 },
			{ name: '房屋', 月份: '4月', 办件数量: 99 },
			{ name: '房屋', 月份: '5月', 办件数量: 52 },
			{ name: '房屋', 月份: '6月', 办件数量: 35 },
			{ name: '房屋', 月份: '7月', 办件数量: 37 },
			{ name: '房屋', 月份: '8月', 办件数量: 42 },
			];

			const chart = new Chart({
			container: 'tdfwtjid',
			autoFit: true,
			height: 500,
			});

			chart.data(data);
			chart.scale('办件数量', {
			nice: true,
			});
			chart.tooltip({
			shared: true,
			showMarkers: false,
			});

			chart
			.interval()
			.position('月份*办件数量')
			.color('name')
			.adjust('stack');

			chart.interaction('active-region');

			chart.render();
		},
		initG2xntjid(){
			registerShape('point', 'pointer', {
			draw(cfg, container) {
				const group = container.addGroup({});
				// 获取极坐标系下画布中心点
				const center = this.parsePoint({ x: 0, y: 0 });
				// 绘制指针
				group.addShape('line', {
				attrs: {
					x1: center.x,
					y1: center.y,
					x2: cfg.x,
					y2: cfg.y,
					stroke: cfg.color,
					lineWidth: 5,
					lineCap: 'round',
				},
				});
				group.addShape('circle', {
				attrs: {
					x: center.x,
					y: center.y,
					r: 9.75,
					stroke: cfg.color,
					lineWidth: 4.5,
					fill: '#fff',
				},
				});

				return group;
			},
			});

			const data = [{ value: 6 }];
			const chart = new Chart({
			container: 'xntjid',
			autoFit: true,
			height: 500,
			padding: [-15, 0, 0, 0],
			});
			chart.data(data);

			chart.coordinate('polar', {
			startAngle: (-9 / 8) * Math.PI,
			endAngle: (1 / 8) * Math.PI,
			radius: 0.75,
			});
			chart.scale('value', {
			min: 0,
			max: 9,
			ticks: [2.25, 3.75, 5.25, 6.75],
			});

			chart.axis('1', false);
			chart.axis('value', {
			line: null,
			label: {
				offset: -30,
				formatter: (val) => {
				if (val === '2.25') {
					return '差';
				} else if (val === '3.75') {
					return '中';
				} else if (val === '5.25') {
					return '良';
				}

				return '优';
				},
				style: {
				fontSize: 18,
				textAlign: 'center',
				},
			},
			tickLine: null,
			grid: null,
			});
			chart.legend(false);
			chart
			.point()
			.position('value*1')
			.shape('pointer')
			.color('#1890FF');

			// 绘制仪表盘刻度线
			chart.annotation().line({
			start: [3, 0.905],
			end: [3.0035, 0.85],
			style: {
				stroke: '#19AFFA', // 线的颜色
				lineDash: null, // 虚线的设置
				lineWidth: 3,
			},
			});
			chart.annotation().line({
			start: [4.5, 0.905],
			end: [4.5, 0.85],
			style: {
				stroke: '#19AFFA', // 线的颜色
				lineDash: null, // 虚线的设置
				lineWidth: 3,
			},
			});

			chart.annotation().line({
			start: [6, 0.905],
			end: [6.0035, 0.85],
			style: {
				stroke: '#19AFFA', // 线的颜色
				lineDash: null, // 虚线的设置
				lineWidth: 3,
			},
			});

			// 绘制仪表盘背景
			chart.annotation().arc({
			top: false,
			start: [0, 1],
			end: [9, 1],
			style: {
				stroke: '#CBCBCB',
				lineWidth: 18,
				lineDash: null,
			},
			});

			// 绘制指标
			chart.annotation().arc({
			start: [0, 1],
			end: [data[0].value, 1],
			style: {
				stroke: '#1890FF',
				lineWidth: 20,
				lineDash: null,
			},
			});
			// 绘制指标数字
			chart.annotation().text({
			position: ['50%', '85%'],
			content: '合格率',
			style: {
				fontSize: 20,
				fill: '#545454',
				textAlign: 'center',
			},
			});
			chart.annotation().text({
			position: ['50%', '90%'],
			content: `${data[0].value * 10} %`,
			style: {
				fontSize: 36,
				fill: '#545454',
				textAlign: 'center',
			},
			offsetY: 15,
			});

			chart.render();
		}
	},
};
</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;
		.cghj{
			/deep/.el-card__header{
				padding: 13px 20px;
				span{
					position: relative;
    				top: 5px;
				}
				img{
					width: 200px;
				}
			}
		}
		>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>