<template>
	<div
		class="content column-start-center reTree_box"
		:style="{ fontSize: (size || 14) + 'px', lineHeight: (size || 14) + 'px', width: (islpb ? '200':'374') + 'px' }"
	>
		<div
			class="column-start-center basic_layer"
			:class="islpb ? 'white_layer':''"
			v-for="(item, index) in formatData"
			:key="index"
		>
			<div
				class="row-flex-start basic_banner"
				:class="{
					active_color: item.expand && item.children.length > 0,
				}"
				@click="itemClick(item)"
			>
				<div
					class="reTree_icon"
					:style="{
						height: (size || 14 * 1.2) + 'px',
						width: (size || 14 * 1.2) + 'px',
					}"
					:class="{
						reTree_default_icon: item.children.length === 0,
						reTree_collapse_icon: item.expand && item.children.length > 0,
						reTree_expand_icon: !item.expand && item.children.length > 0,
					}"
				></div>
				<div class="layer_text nowrap" @contextmenu.prevent="openMenu($event, item)">{{ item.mc }}</div>
			</div>

			<lineItem
				v-if="item.expand && item.children.length > 0"
				v-on="$listeners"
				@ownerMethod="ownerMethod(arguments)"
				@changeTop="changeTop"
				@changeZdData="changeZdData"
				@changeLeft="changeLeft"
				@changeVisible="changeVisible"
				@changeLpbVisible="changeLpbVisible"
				@changeIsZD="changeIsZD"
				@changeCreateVisible="changeCreateVisible"
				@changeDzVisible="changeDzVisible"
				:list="item.children"
				:visible="visible"
				:size="size"
				:islpb="islpb"
				:formatData="formatData"
			></lineItem>
		</div>

		<ul
			v-show="visible"
			:style="{ left: left + 'px', top: top + 'px' }"
			class="contextmenu"
		>
			<li @click="postionToMap">定位</li>
			<li @click="importGeo">导入图形</li>
			<li>
				导出图形
				<ul class="contextmenu childUl">
					<li @click="exportText">文本</li>
					<li @click="exportCad">CAD</li>
					<li @click="exportExcel">Excel</li>
					<li @click="exportToShp">ESRI Shape</li>
				</ul>
			</li>
			<li v-show="isZD">导入属性</li>
			<li v-show="!isZD">导入楼盘</li>
			<li>重叠分析</li>
			<li v-show="isZD && (zdQszt == '1' || zdQszt == '2')" @click="openCreateDialog">添加定着物</li>
			<li v-show="isZD && (zdQszt != '1' && zdQszt != '2')" class="noEdit">添加定着物</li>
			<li @click="deleteByBsm()">删除</li>
		</ul>
		<ul
			v-show="dzVisible"
			:style="{ left: left + 'px', top: top + 'px' }"
			class="contextmenu"
		>
			<li @click="openCreateDialog">新建自然幢</li>
			<li @click="deleteByBsm()">删除</li>
		</ul>
		<ul
			v-show="createVisible"
			:style="{ left: left + 'px', top: top + 'px' }"
			class="contextmenu"
		>
			<li @click="openCreateDialog">新建宗地</li>
		</ul>
		<ul
			v-show="lpbvisible"
			:style="{ left: lpbleft + 'px', top: lpbtop + 'px' }"
			class="contextmenu"
		>
			<li v-show="zdData.type == 'zrz'" @click="openLpbDialog('ljz')">添加逻辑幢</li>
			<li v-show="zdData.type == 'zrz' || zdData.type == 'ljz'" @click="openLpbDialog('zdy')">添加幢单元</li>
			<li v-show="zdData.type == 'zrz' || zdData.type == 'ljz' || zdData.type == 'zdy'" @click="openLpbDialog('ch')">添加层户</li>
			<li v-show="zdData.type == 'ljz'" @click="deleteLjz">删除</li>
			<li v-show="zdData.type == 'zdy'" @click="deleteZdy">删除</li>
		</ul>

		<!--@close="closeImportDialog"-->
    <el-dialog title="导入图形" :modal="false" :close-on-click-modal="false" custom-class="importDialog" :visible.sync="improtDialog" width="30%" @close="closeImportDialog">
      <import-geo  :property-info="zdData" :timeLine="new Date().getTime()" :geo-info="currentClickZdGeo" @closeImportDialog="closeImportDialog"></import-geo>
    </el-dialog>
		<!-- 添加定着物弹框 -->
		<el-dialog title="新建" :visible.sync="dialogVisible" width="48%">
			<Create @closeDialog="closeDialog" :auth="true"></Create>
		</el-dialog>
	</div>
</template>
<script>
import lineItem from "./lineItem.vue";
import {deleteZdInfoByBsm,exportShp,exportExcel} from "../../api/zd";
import Create from "../../views/panel/create/index";
import ImportGeo from './tx/importGeo'
import geoUtils from "@components/lineTree/tx/js/geoUtils";
import featureUpdate from "@libs/map/featureUpdate";
import {deleteLjz,deleteZdy} from "./../../api/lpb"
import exportTemJson from '@/assets/json/exportTemplate.json'
export default {
	inheritAttrs: false,
	props: {
		pd: {},
		size: {
			type: Number,
			default: 14,
		},
		islpb:{
			type: Boolean,
			default: false,
		}
	},
	components: { lineItem,Create,ImportGeo },
  mixins:[geoUtils,featureUpdate],
	data() {
		return {
			selectedDetail: {},
			timer: {},
			formatData: [],
			visible: false,
			top: 0,
			left: 0,
			isZD: true,
			zdData:{},
      currentClickZdGeo:"",
      improtDialog:false,
			dialogVisible:false,
			//控制楼盘表
			lpbvisible: false,
			lpbtop: 0,
			lpbleft: 0,
			//控制新建宗地菜单
			createVisible:false,
			//多幢
			dzVisible:false,
			//宗地权属状态
			zdQszt:null,
		};
	},
	watch: {
		pd(n, o) {
			this.formatData = this.preDealData(n);
			console.log(this.formatData);
		},

		lpbvisible(value) {
			if (value) {
				document.body.addEventListener("click", this.closeMenu);
			} else {
				document.body.removeEventListener("click", this.closeMenu);
			}
		},
		dzVisible(value) {
			if (value) {
				document.body.addEventListener("click", this.closeMenu);
			} else {
				document.body.removeEventListener("click", this.closeMenu);
			}
		},

		// createVisible(value) {
		// 	if (value) {
		// 		document.body.addEventListener("click", this.closeMenu);
		// 	} else {
		// 		document.body.removeEventListener("click", this.closeMenu);
		// 	}
		// }
	},
	created() {
		console.log("lineTree create");
		this.preDealData(this.pd);
		// this.expandTreeItemById(["6b5af49d803f97baf06afb897de257f5"]);
	},

	methods: {
	    loading(){
	      this.$emit("loading")
		},
        deleteLjz(){
          console.log("删除逻辑幢")
		  console.log(this.zdData,"zdData")
			deleteLjz(this.zdData.bsm).then(res=>{
                if (res.success) {
					this.loading()
                }else {

				}
			})
		},
		deleteZdy(){
            console.log("删除幢单元")
            console.log(this.zdData,"zdData")
			deleteZdy(this.zdData.bsm).then(res=>{
                if (res.success) {
                    this.loading()
                }
			})
		},
		// 改变菜单数据
		changeVisible(data) {
			this.visible = data;
		},
		changeZdData(data) {
			this.zdData = data;
			this.zdQszt = data.qszt;
		},
		changeTop(data) {
			this.top = data;
			this.lpbtop = data;
		},
		changeLeft(data) {
			this.left = data;
			this.lpbleft = data;
		},
		changeIsZD(data) {
			this.isZD = data;
		},
		changeLpbVisible(data) {
			this.lpbvisible = data;
		},
		changeCreateVisible(data){
			this.createVisible = true;
		},
		//多幢
		changeDzVisible(data){
			this.dzVisible =  data
		},
		//添加定着物
		openCreateDialog(){
			console.log(this.zdData,'this.zdData');
			this.dialogVisible = true;
			this.$store.state.zdbsm = this.zdData.zdbsm;
			if(this.zdData.type == 'dz'){
				this.$store.state.dzbsm = this.zdData.bsm;
			}else{
				this.$store.state.dzbsm = '';
			}
		},
		//关闭添加定着物弹框
		closeDialog() {
			this.dialogVisible = false;
		},
		preDealData(list) {
			//楼盘表目录树没有expand属性
			list.forEach((x) => {
				if (x.expand == undefined) this.$set(x, "expand", true);
				if (x.children && x.children.length > 0) {
					this.preDealData(x.children);
				}
			});
			return list;
		},
		// 根据id展开树的具体项
		expandTreeItemById(idList) {
			let _this = this;
			function loopTree(list) {
				list.forEach((x) => {
					if (idList.includes(x.zdbsm)) {
						_this.$set(x, "expand", true);
					} else {
						_this.$set(x, "expand", false);
					}
					if (x.children && x.children.length > 0) loopTree(x.children);
				});
				return list;
			}
			this.formatData = loopTree(this.pd);
			console.log(this.formatData, "this.formatData");
		},
		itemClick(item) {
			// item.expand = item.expand == undefined? true:!item.expand;
			console.log(item,'item');
			console.log(this.formatData,'this.formatData');
			this.formatData.forEach(i=>{
				if(i.bsm != item.bsm){
					i.expand = false
				}else{
					// i.expand = !item.expand
				}
			})
			item.expand = !item.expand;
			// this.$emit("itemClick", item);
		},
		//给所有权类型添加子节点
		ownerMethod(arr){
			let item = arr[0];
			let list = arr[1]
			this.formatData.forEach(i=>{
				if (i.bsm == item.xzq){
					i.children.forEach(j=>{
						if (j.bsm == item.djq) {
							j.children.forEach(k=>{
								if(k.bsm == item.djzq){
									k.children.forEach(n=>{
										if(n.dm == item.dm){
											this.$nextTick(()=>{
												n.children = list;
											})
										}
									})
								}
							})
						}
					})
				}
			})
			console.log(this.formatData,'formatData');
		},
		//自然幢右键点击事件
		openMenu(e,item){
			console.log(item,'右键item');
			this.lpbleft = e.pageX;
			this.lpbtop = e.pageY;
			this.zdData = item;
			this.changeLpbVisible(true);
		},
		//关闭右键菜单
		closeMenu(){
			this.lpbvisible = false;
			this.dzVisible = false;
			// this.createVisible = false;
		},
		//楼盘表右键菜单项打开父组件弹框
		openLpbDialog(type){
			this.$parent.openLpbDialog(this.zdData,type);
		},
		detailDoubleClick(data) {
			clearTimeout(this.timer);
			this.selectedDetail = data;
			this.$emit("detailDoubleClick", data);
		},
		//右键菜单的删除
		deleteByBsm(){
			let name='';
			switch (this.zdData.type) {
				case 'zd':
					name = '宗地'
					break;
				case 'dz':
					name = '多幢'
					break;
				case 'zrz':
					name = '自然幢'
					break;

				default:
					break;
			}
			 this.$confirm('是否确定删除该'+name+'?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				let params={"bsm":this.zdData.bsm,"type":this.zdData.type};
				deleteZdInfoByBsm(params)
					.then((res) => {
						console.log(res);
						if(res.success){
							this.$message({
								type: 'success',
								message: '删除成功!'
							});
							this.$router.push("/panel");
						} else {
							this.$message({
								message: res.message,
								type: "warning",
							});
						}
					})
					.catch((error) => {});
			}).catch(() => {

			});
            var self = this;
            var BSM = "";
            var type = this.zdData.type;
            if(type == "zd"){
                BSM = this.zdData.zdbsm;
            }else {
                BSM = this.zdData.bsm;
            }
            //删除图形相关信息
            var type = this.zdData.type;
            this.queryGeoByBsm(BSM,type,function (features){
                if(features && features.length > 0){
                    var layer = null;
                    if(type == 'zd'){
                        layer = self.getLayerByName("ZDJBXX");
                    }else{
                        layer = self.getLayerByName("ZRZ");

                    }
                    var featureUrl = layer.layerUrl.replace("MapServer","FeatureServer");
                    featureUrl += "/"+layer.id;
                    self.delGraphic(featureUrl,features[0],null);
                }
            });
		},
        /*
	   * 导入图形
	   * */
        importGeo(){
            var self = this;
            var BSM = "";
            //先这么写着  后面返回类型 根据类型判断
            var type = this.zdData.type;
            if(type == "zd"){
                BSM = this.zdData.zdbsm;
            }else {
                BSM = this.zdData.bsm;
            }
            //当确定导入图形是 跳转到图形界面
            this.queryGeoByBsm(BSM,type,function (features){
                if(features && features.length > 0){
                    if(features[0].geometry){
                        self.$confirm('该条数据有地块信息，是否继续导入?', '提示', {
                            confirmButtonText: '继续',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
							self.postionToMap();
                            self.improtDialog = true;
                            self.currentClickZdGeo = features[0];
                        }).catch(() => {
                            self.$message({
                                type: 'info',
                                message: '已取消'
                            });
                        });
                    }else {
						self.postionToMap();
                        self.currentClickZdGeo = features[0];
                        self.improtDialog = true;
                    }

                }else{
					self.postionToMap();
                    self.currentClickZdGeo = null;
                    self.improtDialog = true;
                }
            });
        },
		//导出文本文件
		exportText(){
			var self = this;
			var type = this.zdData.type;
            var BSM = type == 'zdt'? this.zdData.zdbsm : this.zdData.bsm;
			this.queryGeoByBsm(BSM,type,function (features){
				if(features && features.length > 0){
					var data = features[0];
					var jzdInfo = self.craetJZPoint(data);
					var textCotent = "";
					textCotent += exportTemJson.exprotTextAttr;
					textCotent += "[地块坐标]\n";
					var dkMc = "",dkYt = "";
					if(type == 'zd'){
						dkMc = data.attributes.ZL;
						dkYt = data.attributes.YT;
					}else {
						dkMc = data.attributes.XMMC + data.attributes.JZWMC ;
						dkYt = "建设用地";
					}
					textCotent += ",,,"+dkMc+",面,,"+dkYt+",,@\n";
					for(var i = 0;i < jzdInfo.length;i++){
						textCotent += jzdInfo[i].jzdh +","+jzdInfo[i].sxh+"," +
								jzdInfo[i].x+","+jzdInfo[i].y+"\n"
					}
					self.downloadTxt(textCotent,"outPut.txt");
				}
			});
		},
        //导出shp文件
        exportToShp(){
            var self = this;
            var type = this.zdData.type;
            var BSM = type == 'zdt'? this.zdData.zdbsm : this.zdData.bsm;
            this.queryGeoByBsm(BSM,type,function (features){
                if(features && features.length > 0){
					var data = JSON.stringify(features[0]);
                    window.location.href = "/api/tx/shpUtils/writeShp?strObj="+encodeURI(data)
                   /* exportShp({
                        "strObj":encodeURI(data)
                    }).then(res => {
                        debugger
                    });*/
                }else{
                    self.$message.warning("暂无空间信息!!!!");
                }
            });
        },
		//导出excel
		exportExcel(){
			var self = this;
			var type = this.zdData.type;
            var BSM = type == 'zdt'? this.zdData.zdbsm : this.zdData.bsm;
			this.queryGeoByBsm(BSM,type,function (features) {
                if (features && features.length > 0) {
                    var data = features[0];
                    var jzdInfo = self.craetJZPoint(data);
                    var submitData = [];
                    for (var i = 0; i < jzdInfo.length; i++) {
                        var obj = {
                            jzdHao: jzdInfo[i].jzdh,
                            x: jzdInfo[i].x,
                            y: jzdInfo[i].y,
                            diKuaiQuanHao: jzdInfo.sxh
                        }
                        submitData.push(obj);
                    }
					exportExcel(submitData).then((res) => {
                            if (res.status == 200) {
                                var path = res.data.result;
                                window.location.href = "/api/tx/excelGeo/download?filePath=" + encodeURI(path);
                            }
                        });
                }else {
                    self.$message.warning("还没有空间信息!!!!")
                }
            })
		},
		//导出CAD
		exportCad(){
			//TODO
		},
		downloadTxt(text, fileName){
			let element = document.createElement('a')
			element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text))
			element.setAttribute('download', fileName)
			element.style.display = 'none'
			element.click()
		},
        //图形定位
        postionToMap(){
            var type = this.zdData.type;
            var BSM = type == 'zdt'? this.zdData.zdbsm : this.zdData.bsm;
            if(this.$route.path == "/viewMap"){
                //定位到当前空间位置
                // TODO 这个方法只是为了支撑功能
                this.postionToThisGeo(BSM,type);
                return;
            }
            var curretRouterInfo = {
                path:this.$route.path,
                query:this.$route.query
            }
            sessionStorage.setItem("curretRouterInfo",JSON.stringify(curretRouterInfo));
            this.$router.push({
                path: "/viewMap",
                query: {
                    bsm: BSM,
                    type: type
                }
            });
        },

        //关闭图形弹框
    closeImportDialog(){
      this.improtDialog = false;
      this.clearOverLayer();
    }

	},
};
</script>
<style lang="less" scoped>

.content {
	height: 100%;
	width: 100%;
	overflow-y: scroll;
	overflow-x: hidden;
}
.column-start-center {
	display: flex;
	display: -webkit-flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;

}
.row-flex-start {
	display: flex;
	display: -webkit-flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
}
.nowrap {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.reTree_icon {
	width: 17px;
	height: 17px;
	margin-right: 10px;
}

.basic_layer {
	width: 100%;
	position: relative;
	color: #ffffff;
	cursor: pointer;
	-moz-user-select: none;
	-o-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	.layer_text {
		flex: 1;
	}
}
.white_layer {
	color: black!important;
}
.first_vertical_line {
	content: "";
	position: absolute;
	width: 1px;
	left: 6px;
	top: 17px;
	background: #c3c5c8;
}
.basic_banner {
	position: relative;
	width: 100%;
	padding-bottom: 13px;
}
.second_layer {
	position: relative;
	width: 100%;
	cursor: pointer;
	padding-left: 25px;
}

.second_layer::before {
	content: "";
	position: absolute;
	height: 1px;
	width: 16px;
	left: 9px;
	top: 9px;
	background: #c3c5c8;
}

.linkLine_default::after {
	content: "";
	position: absolute;
	height: 100%;
	width: 1px;
	left: 9px;
	top: 0px;
	background: #c3c5c8;
}
.linkLine_first::after {
	content: "";
	position: absolute;
	/* 为了触顶 */
	top: -14px;
	height: calc(100% + 14px);
	width: 1px;
	left: 9px;
	background: #c3c5c8;
}
// 上半截
.linkLine_half_top::after {
	content: "";
	position: absolute;
	height: 23px;
	top: -14px;
	width: 1px;
	left: 9px;
	background: #c3c5c8;
}
.linkLine_last::after {
	content: "";
	position: absolute;
	height: 9px;
	width: 1px;
	left: 9px;
	top: 0px;
	background: #c3c5c8;
}
.reTree_collapse_icon {
	background: url("../../assets/images/reTree_collapse_.svg") no-repeat center
		center;
	background-size: contain;
}

.reTree_default_icon {
	background: url("../../assets/images/reTree_default_.svg") no-repeat center
		center;
	background-size: contain;
}

.reTree_expand_icon {
	background: url("../../assets/images/reTree_expand_.svg") no-repeat center
		center;
	background-size: contain;
}

.reTree_focus_icon {
	background: url("../../assets/images/reTree_focus_.svg") no-repeat center
		center;
	background-size: contain;
}
	/deep/ .importDialog{
		margin-top: 120px!important;
		margin-left: 291px;
	}
</style>