<template>
  <div class="box-center">
      <div id="app">
	<div class="biaoti">
		客户画像关键词配置
	</div>
	<div style="width: 100%;margin-top: 30px;">

		<el-tree ref="tree" :default-expand-all="true" :data="treeList">
			  <span class="custom-tree-node" slot-scope="{ node, data }">
				  <span v-if="data.level==1" style="font-size: 18px;color: #32363D">
					  <img class="levelimg1" src="/img/level1.png" alt="">
					  {{ data.name }}
				  </span>
				  <span v-if="data.level==2 && data.isInterval==1" style="font-size: 16px;color: #32363D">
					  <img class="levelimg2" src="/img/level2.png" alt="">
					  {{data.name}}
				  </span>
				  <span v-if="data.level==2 && data.isInterval==0">
					   <img class="levelimg2" src="/img/level2.png" alt="">
					  {{data.name}}~{{data.endName}}
				  </span>
				  <span v-if="data.level==3" style="font-size: 14px;color: #32363D">
					  <img class="levelimg3" src="/img/level3.png" alt="">
					  {{ data.name }}
				  </span>

				  <span v-if="data.level==1" style="display: flex;align-items: center;">
					  <span class="editor"  @click="() => append(node, data)" style="display: flex;align-items: center;">
						   <img class="levelimg3" src="/img/add1.png" alt="">
						  <span>添加二级</span>
					  </span>
				  </span>

				  <span v-if="data.level==2" style="display: flex;align-items: center;">
					  <span v-if="data.isInterval==1" class="editor2"  @click="() => append(node, data)" style="display: flex;align-items: center;">
						   <img class="levelimg3" src="/img/add2.png" alt="">
						  <span>添加三级</span>
					  </span>
					   <span  style="margin-left: 10px">
						  <el-button class="editor" type="text" size="mini" @click="() => ddeditor(node, data)">编辑</el-button>
					  </span>
					  <span  style="margin-left: 10px">
						   <el-button class="remove" type="text" size="mini" @click="() => remove(node, data)">删除</el-button>
					  </span>
				  </span>
				  <span v-if="data.level==3" style="display: flex;align-items: center;">
					  <span style="margin-left: 10px">
						  <el-button class="editor" type="text" size="mini" @click="() => ddeditor(node, data)">编辑</el-button>
					  </span>
					  <span style="margin-left: 10px">
						   <el-button class="remove" type="text" size="mini" @click="() => remove(node, data)">删除</el-button>
					  </span>
				  </span>
			  </span>
		</el-tree>
	</div>
	<el-dialog title="新增" :visible.sync="dialogFormVisible">
        <div  v-if="amountintervalname=='意向面积'" style="display:flex;height: 40px;line-height: 40px;">
            <span>面积区间：</span>
            <span style="width: 100px;"><el-input type="number" v-model="addForm.name"></el-input></span>
            <span style="margin-left: 6px;">平方</span>
            <span style="margin-left: 12px;margin-right: 12px;">~</span>
            <span style="width: 100px;"><el-input type="number" v-model="addForm.endName"></el-input></span>
            <span style="margin-left: 6px;">平方</span>
        </div>
        <div  v-else-if="amountintervalname=='购房预算'" style="display:flex;height: 40px;line-height: 40px;">
            <span>预算区间：</span>
            <span style="width: 100px;"><el-input type="number" v-model="addForm.name"></el-input></span>
            <span style="margin-left: 6px;">万元</span>
            <span style="margin-left: 12px;margin-right: 12px;">~</span>
            <span style="width: 100px;"><el-input type="number" v-model="addForm.endName"></el-input></span>
            <span style="margin-left: 6px;">万元</span>
        </div>
		<el-form :model="addForm" v-else>
			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="一级大类名称:" v-if="level==0" :label-width="formLabelWidth">
						<el-input v-model="addForm.name" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="二级名称:" v-if="level==2" :label-width="formLabelWidth">
						<el-input v-model="addForm.name" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="三级名称:" v-if="level==3" :label-width="formLabelWidth">
						<el-input v-model="addForm.name" autocomplete="off"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="dialogFormVisible = false">取 消</el-button>
			<el-button type="primary" @click="addSubmit">确 定</el-button>
		</div>
	</el-dialog>
	<!-- 删除确认弹框 -->
	<el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
		<span>确定删除该条内容吗</span>
		<span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="checkDelete">确 定</el-button>
        </span>
	</el-dialog>
	<!--?编辑弹框?-->
	<el-dialog title="编辑" :visible.sync="isshowage">
		<div  v-if="amountintervalname=='意向面积'" style="display:flex;height: 40px;line-height: 40px;">
			<span>面积区间：</span>
			<span style="width: 100px;"><el-input type="number" v-model="frosasd.name"></el-input></span>
			<span style="margin-left: 6px;">平方</span>
			<span style="margin-left: 12px;margin-right: 12px;">~</span>
			<span style="width: 100px;"><el-input type="number" v-model="frosasd.endName"></el-input></span>
			<span style="margin-left: 6px;">平方</span>
		</div>
		<div  v-else-if="amountintervalname=='购房预算'" style="display:flex;height: 40px;line-height: 40px;">
			<span>预算区间：</span>
			<span style="width: 100px;"><el-input type="number" v-model="frosasd.name"></el-input></span>
			<span style="margin-left: 6px;">万元</span>
			<span style="margin-left: 12px;margin-right: 12px;">~</span>
			<span style="width: 100px;"><el-input type="number" v-model="frosasd.endName"></el-input></span>
			<span style="margin-left: 6px;">万元</span>
		</div>
		<div v-else style="display: flex;align-items: center;height: 40px;">
			<div style="margin-left: 160px;height: 30px;line-height: 30px;">类名：</div>
			<div>
				<input v-model="frosasd.name" style="width: 280px;height: 30px;line-height: 30px;border-radius: 4px;
				border: 1px solid #DCDFE6;text-indent: 15px;color: #606266;" type="text">
			</div>
		</div>



		<div style="display: flex;justify-content: center;margin-top: 40px;">
			<button style="width: 100px;height: 40px;border-radius: 4px;background: #ffffff;
			font-size: 14px;border: 1px solid #DCDFE6;"  @click="submicll()">取消</button>
			<button style="width: 100px;height: 40px;border-radius: 4px;background: #409EFF;
			font-size: 14px;margin-left: 60px; color: #ffffff;border: none;"   @click="submiadd()">提交</button>
		</div>
	</el-dialog>
</div>
  </div>
</template>

<script>
export default {
  data() {
			return {
				formLabelWidth: '120px',
				dialogFormVisible:false,
				dialogVisible:false,
				isshowage:false,
				treeList: [], //树形数据
                orgCode: '',//公司id
				addForm:{
					name:'',
					endName:''
				},
				level:0,
				pid:'',
				deleteId:'',
				frosasd:{
					name:'',
					endName:'',
					isInterval:'',
					id:'',
					pid:'',
					orgCode:'',
					sort:'',
					level:'',
				},
        amountintervalname:"",
				isInterval:''
			}
		},
		mounted() {
          // this.orgCode=localStorage.getItem("AitemId");
          // this.getHouse()

          var data={"obj":[{"children":[{"children":[{"children":null,"endName":"","id":113,"isInterval":1,"keywordsId":null,"level":3,"matchKeywords":null,"name":"理财","orgCode":"031","pid":45,"sort":1,"total":null,"unit":""},{"children":null,"endName":"","id":114,"isInterval":1,"keywordsId":null,"level":3,"matchKeywords":null,"name":"管家","orgCode":"031","pid":45,"sort":2,"total":null,"unit":""}],"endName":"","id":45,"isInterval":1,"keywordsId":null,"level":2,"matchKeywords":null,"name":"投资","orgCode":"031","pid":1,"sort":1,"total":null,"unit":""},{"children":[{"children":null,"endName":"","id":115,"isInterval":1,"keywordsId":null,"level":3,"matchKeywords":null,"name":"ABC","orgCode":"031","pid":59,"sort":1,"total":null,"unit":""}],"endName":"","id":59,"isInterval":1,"keywordsId":null,"level":2,"matchKeywords":null,"name":"自住","orgCode":"031","pid":1,"sort":2,"total":null,"unit":""},{"children":[{"children":null,"endName":"","id":116,"isInterval":1,"keywordsId":null,"level":3,"matchKeywords":null,"name":"价格","orgCode":"031","pid":60,"sort":1,"total":null,"unit":""}],"endName":"","id":60,"isInterval":1,"keywordsId":null,"level":2,"matchKeywords":null,"name":"婚房","orgCode":"031","pid":1,"sort":3,"total":null,"unit":""}],"endName":"","id":1,"isInterval":1,"keywordsId":null,"level":1,"matchKeywords":null,"name":"置业需求","orgCode":"031","pid":0,"sort":1,"total":null,"unit":""},{"children":[{"children":[{"children":null,"endName":"","id":135,"isInterval":1,"keywordsId":null,"level":3,"matchKeywords":null,"name":"电梯","orgCode":"031","pid":118,"sort":2,"total":null,"unit":""},{"children":null,"endName":"","id":136,"isInterval":1,"keywordsId":null,"level":3,"matchKeywords":null,"name":"层高五米","orgCode":"031","pid":118,"sort":1,"total":null,"unit":""}],"endName":"","id":118,"isInterval":1,"keywordsId":null,"level":2,"matchKeywords":null,"name":"通风透气","orgCode":"031","pid":2,"sort":1,"total":null,"unit":""},{"children":[],"endName":"","id":120,"isInterval":1,"keywordsId":null,"level":2,"matchKeywords":null,"name":"按摩洗脚","orgCode":"031","pid":2,"sort":2,"total":null,"unit":""}],"endName":"","id":2,"isInterval":1,"keywordsId":null,"level":1,"matchKeywords":null,"name":"关注点","orgCode":"031","pid":0,"sort":2,"total":null,"unit":""},{"children":[{"children":[],"endName":"90","id":95,"isInterval":0,"keywordsId":null,"level":2,"matchKeywords":null,"name":"20","orgCode":"031","pid":3,"sort":2,"total":null,"unit":""},{"children":[],"endName":"99","id":107,"isInterval":0,"keywordsId":null,"level":2,"matchKeywords":null,"name":"90","orgCode":"031","pid":3,"sort":3,"total":null,"unit":""},{"children":[],"endName":"150","id":121,"isInterval":0,"keywordsId":null,"level":2,"matchKeywords":null,"name":"100","orgCode":"031","pid":3,"sort":4,"total":null,"unit":""}],"endName":"","id":3,"isInterval":0,"keywordsId":null,"level":1,"matchKeywords":null,"name":"意向面积","orgCode":"031","pid":0,"sort":3,"total":null,"unit":""},{"children":[{"children":[],"endName":"100","id":108,"isInterval":0,"keywordsId":null,"level":2,"matchKeywords":null,"name":"96","orgCode":"031","pid":4,"sort":null,"total":null,"unit":""},{"children":[],"endName":"95","id":109,"isInterval":0,"keywordsId":null,"level":2,"matchKeywords":null,"name":"82","orgCode":"031","pid":4,"sort":1,"total":null,"unit":""},{"children":[],"endName":"150","id":137,"isInterval":0,"keywordsId":null,"level":2,"matchKeywords":null,"name":"100","orgCode":"031","pid":4,"sort":2,"total":null,"unit":""}],"endName":"","id":4,"isInterval":0,"keywordsId":null,"level":1,"matchKeywords":null,"name":"购房预算","orgCode":"031","pid":0,"sort":4,"total":null,"unit":""},{"children":[{"children":[{"children":null,"endName":"","id":123,"isInterval":1,"keywordsId":null,"level":3,"matchKeywords":null,"name":"周末","orgCode":"031","pid":122,"sort":1,"total":null,"unit":""},{"children":null,"endName":"","id":139,"isInterval":1,"keywordsId":null,"level":3,"matchKeywords":null,"name":"假期","orgCode":"031","pid":122,"sort":2,"total":null,"unit":""}],"endName":"","id":122,"isInterval":1,"keywordsId":null,"level":2,"matchKeywords":null,"name":"放假","orgCode":"031","pid":5,"sort":1,"total":null,"unit":""},{"children":[{"children":null,"endName":"","id":138,"isInterval":1,"keywordsId":null,"level":3,"matchKeywords":null,"name":"工作","orgCode":"031","pid":132,"sort":1,"total":null,"unit":""}],"endName":"","id":132,"isInterval":1,"keywordsId":null,"level":2,"matchKeywords":null,"name":" 旅游","orgCode":"031","pid":5,"sort":2,"total":null,"unit":""}],"endName":"","id":5,"isInterval":1,"keywordsId":null,"level":1,"matchKeywords":null,"name":"认知途径","orgCode":"031","pid":0,"sort":5,"total":null,"unit":""}],"res":1,"resMsg":""}
          	this.treeList=data.obj
        },
		methods: {
			// 获取模板数据
			getHouse() {
				axios({
					url: `${jypath}/zk/keywords/findKeywordsTemplate`,
					method: 'get',
					params: {
						houseId:this.orgCode
					}
				}).then(res => {
					if(res.data.res===1){
						console.log(res.data)
						this.treeList = res.data.obj
					}
				});
			},
			// 添加二三级节点入口
			append(node, data) {
                this.amountintervalname=data.name;
				this.addForm.name = '';
				this.addForm.endName='';
				this.pid = data.id;
				this.level = data.level+1;
				this.orgCode=data.orgCode;
				if(this.amountintervalname=='意向面积' || this.amountintervalname=='购房预算'){
				    this.isInterval=0;
                }else {
                    this.isInterval=1;
                }
				this.dialogFormVisible = true;
			},
			// 添加节点确认按钮
			addSubmit() {
				if (this.addForm.name != "") {
					if (this.amountintervalname=='意向面积' || this.amountintervalname=='购房预算'){
						if(Number(this.addForm.name)>Number(this.addForm.endName)){
							this.$message({
								message: '第一个值必须小于第二个值，请检查！',
								type: 'warning'
							});
							return;
						}else {
							this.dialogFormVisible = false
							this.addNode()
						}
					}else {
						this.dialogFormVisible = false
						this.addNode()
					}
				} else {
					this.$message({
						message: '内容不能为空',
						type: 'warning'
					});
					return;
				}
			},
			// 新增的节点保存
			addNode() {
				axios({
					url: `${jypath}/zk/keywords/add`,
					method: 'post',
					data: {
						pid: this.pid,
						name: this.addForm.name,
						endName: this.addForm.endName,
						level:this.level,
						orgCode:this.orgCode,
						isInterval:this.isInterval
					},
				}).then(res => {
					if (res.data.res === 1) {
					 if(this.level == 2) {
							// 二级
							let newChild = {
								id: res.data.obj,
								pid:this.pid,
								name: this.addForm.name,
								endName: this.addForm.endName,
								orgCode:this.orgCode,
								level:this.level,
								isInterval:this.isInterval,
								children: []
							};
							this.treeList.forEach((item,index)=>{
								if(item.id==this.pid){
									item.children.push(newChild)
								}
							})
						}else{
							let newChilds = {
								id: res.data.obj,
								pid:this.pid,
								name: this.addForm.name,
								orgCode:this.orgCode,
								level:this.level,
								isInterval:1,
								endName: '',
							};
							this.treeList.forEach((item,index)=>{
								item.children.forEach((ite,inde)=>{
									if(ite.id==this.pid){
										ite.children.push(newChilds)
									}
								})
							})
						}
					}
				})
			},
			//删除节点
			remove(node, data) {
				if(data.level==3){
					this.deleteId = data.id
					this.dialogVisible = true;
				}else {
					if(data.children.length==0){
						this.deleteId = data.id
						this.dialogVisible = true;
					}else {
						this.$message({
							message: '请先清空子级',
							type: 'warning'
						});
					}
				}
			},
			// 确认删除自定义的节点
			checkDelete() {
				axios({
					url: `${jypath}/zk/keywords/delete`,
					method: 'get',
					params: {
						id: this.deleteId
					}
				}).then(res => {
					if(res.data.res===1){
						this.treeList.forEach((item,index)=>{
							item.children.forEach((ite,inde)=>{
								if(ite.id==this.deleteId){
									this.treeList[index].children.splice(inde,1)
								}else{
									ite.children.forEach((it,ine)=>{
										if(it.id==this.deleteId){
											this.treeList[index].children[inde].children.splice(ine,1)
										}
									})
								}
							})
						})
						this.dialogVisible = false;
					}
				});
			},
			//编辑
			ddeditor(node,data){
				this.frosasd={
					name:'',
					endName:'',
					isInterval:'',
					id:'',
					pid:'',
					orgCode:'',
					sort:'',
					level:'',
				};
				if(data.isInterval==0){
					this.frosasd.isInterval=0;
					this.frosasd.endName=data.endName;
					this.treeList.forEach((item,index)=> {
						if(data.pid==item.id){
							this.amountintervalname=item.name
						}
					})
				}else {
					this.amountintervalname='';
					this.frosasd.endName='';
					this.frosasd.isInterval=1;
				}
				this.frosasd.id=data.id;
				this.frosasd.name=data.name;
				this.frosasd.pid=data.pid;
				this.frosasd.orgCode=data.orgCode;
				this.frosasd.sort=data.sort;
				this.frosasd.level=data.level;
				this.isshowage=true;
			},
			//取消编辑
			submicll(){
				this.isshowage=false;
			},
			//编辑提交
			submiadd(){
            	if(this.frosasd.isInterval==0){
					if(Number(this.frosasd.name)>Number(this.frosasd.endName)){
						this.$message({
							message: '第一个值必须小于第二个值，请检查！',
							type: 'warning'
						});
						return;
					}else {
						this.infosubmiadd()
					}
				}else {
            		this.infosubmiadd()
				}
			},
			infosubmiadd(){
				var that=this;
				axios({
					url: `${jypath}/zk/keywords/update`,
					method: 'post',
					data: this.frosasd
				}).then(res => {
					if(res.data.res==1){
						that.treeList.forEach((item,index)=>{
							item.children.forEach((asd,indexesd)=>{
								if(asd.id==that.frosasd.id){
									that.treeList[index].children[indexesd].name=that.frosasd.name;
									that.treeList[index].children[indexesd].endName=that.frosasd.endName;
									that.treeList[index].children[indexesd].id=res.data.obj;
									that.isshowage=false;
									that.$message({
										message: '修改成功',
										type: 'success'
									});
									return
								}else{
									asd.children.forEach((zxc,indexzxc)=>{
										if(zxc.id==that.frosasd.id){
											that.treeList[index].children[indexesd].children[indexzxc].name=that.frosasd.name;
											that.treeList[index].children[indexesd].children[indexzxc].id=res.data.obj;
											that.isshowage=false;
											that.$message({
												message: '修改成功',
												type: 'success'
											});
											return
										}
									})
								}
							})
						})
					}else{
						this.$message({
							message: '修改失败',
							type: 'error'
						});
					}
				})
			}

		}
};
</script>

<style scoped="scoped" lang="scss" >
.box-center {
  width: 100%;
  padding: 15px;
  min-width: 1200px;
  padding-bottom: 100px;
}
#app{
			width: 100%;
      min-height: 100vh;
			background: #FFFFFF;
			box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1);
			border-radius: 4px;
			padding-left: 15px;
			padding-bottom: 60px;
		}
		.biaoti{
			font-size: 20px;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #32363D;
			line-height: 20px;
			padding-top: 25px;
		}
		.primary{
			width: 108px;
			height: 42px;
			background: #2671E2;
		}
		.custom-tree-node {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 14px;
			padding-right: 183px;
		}
		.remove{
			color: red;
		}
		.editor{
			color:#2671E2;
		}
		.editor2{
			color:#E6A12F;
		}
		.levelimg1{
			width:18px;
			height: 18px;
		}
		.levelimg2{
			width:16px;
			height: 16px;
		}
		.levelimg3{
			width:14px;
			height: 14px;
		}

</style>
