<template>
	<div class="content">
		<div class="content_item">
		    <div class="label">项目名称</div>
		    <div class="content_right">
		        <el-input class="ename_input" 
				placeholder="请输入项目名称关键字" v-model="ename" @input="enamebtn('ename',ename)"></el-input>
		        <template v-if="ename">
		            <span v-for=" (item,k)  in enameQueryTypeList" :key="k">
		                <el-radio v-model="enameQueryType" :label="item.key">{{item.value}}</el-radio>
		            </span>
		        </template>
		    </div>
		</div>
		<div class="content_item">
		    <div class="label">项目主体</div>
		    <div class="content_right">
		        <div class="item_ckquery_list" >
		        	<div class="ckquery_list_right">
		        		<el-input  @input="registerIpt(registerCount)" ref="inp"
		        			v-model="registerCount" autocomplete="off" type="text"
		        			class="register_count_ipt" placeholder="请输入企业名称">
		        			<el-dropdown trigger="click" slot="prepend" style="cursor:pointer;"
		        				@command="changeCommand">
		        				<span class="el-dropdown-link">
		        					{{countType.value}}<i class="el-icon-caret-bottom"></i>
		        				</span>
		        				<el-dropdown-menu class="default_header_dropdown" slot="dropdown">
		        					<el-dropdown-item v-for="(item,k) in countTypelist" :key="k" :command="item">{{item.value}}</el-dropdown-item>
		        				</el-dropdown-menu>
		        			</el-dropdown>
		        		</el-input>
		        	</div>
		        </div>
		    </div>
		</div>
		<div class="content_item">
		    <div class="label">项目地区</div>
		    <div class="content_right">
		       <div class="select-popper">
		       	<div class=" select-caret" :class="addressType.length>0?'select-active':''">
				    <span>
						项目地区{{addressType.length>0?(addressType.length+'项'):''}}
					</span>
					
		       		<i class="el-icon-caret-bottom"></i>
		       	</div>
		       	<el-cascader ref="address"   class="cascader-region select-location" @input="addressListbtn" v-model="addressType"
		       		:options="addressList" :props="props" collapse-tags></el-cascader>
		       </div>
		    </div>
		</div>
		<div class="content_item">
		    <div class="label">项目类型</div>
		    <div class="content_right">
				<div class="content-projecttype">
					<template  v-for="(item,i) in projectTypeList">
						<span class="projecttype" :class="item.status?'activetype':''">
								{{item.value}}	   
						</span>
					</template>
				</div>
		       
		    </div>
		</div>
		<div class="content_item content_item_padding0">
		    <div class="geduan">
		       
		    </div>
		</div>
		<div class="content_item content_item_padding0">
			
			<div class="search-new">
				<span>查询</span>
				<span>重置</span>
			</div>
		</div>
       
	</div>
</template>

<script>
	import jsk_data from '../../../../../public/jsk.json';
	export default {
		name: 'debtProject',
		data() {
			return {
				ename:'',
				enameQueryTypeList: [{
				        key: 'and',
				        status: false,
				        value: '模糊搜索',
				        keyid: 'businessScope'
				    },
				    {
				        key: 'or',
				        status: true,
				        value: '精准匹配',
				        keyid: 'businessScope'
				    },
				],
				enameQueryType: 'or',
				registerCount:'',
				countTypelist: [{
						key: '1',
						value: '项目主体'
					},
					{
						key: '2',
						value: '主管部门'
					},
					{
						key: '3',
						value: '实施单位'
					}
				],
				countType: {
					key: '3',
					value: '实施单位'
				},
				addressList: [],
				addressType: [],
				props: {
					multiple: true,
					expandTrigger: "hover",
					value: 'id'
				},
				projectTypeList: [
				  {
						status: true,
						value: '不限',
						keyid: 'projectType',
						key: '不限'
					},
					{
						value: '房屋建筑工程',
						status: false,
						keyid: 'projectType',
						key: '房屋建筑工程'
					},
					{
						value: '市政基础设施工程',
						status: false,
						keyid: 'projectType',
						key: '市政基础设施工程'
					},
					{
						value: '其他',
						status: false,
						keyid: 'projectType',
						key: '其他'
					},
					{
						value: '空白',
						status: false,
						keyid: 'projectType',
						key: '空白'
					},
				],
				projectTypeText: ['不限'],
				arrList:[]
				
			}
		},
		created() {
			this.addressListfn();
		},
		methods: {
			// 经营范围
			enamebtn(key, text) {
				var arr = this.ename.trim().split(' ')
				for (var i = 0; i < arr.length; i++) {
					if (!arr[i]) {
						arr.splice(i, 1)
						i--
					}
				}
				var data = {
					title:'项目名称：',
					key: arr,
					value: arr,
					keyid: key
				}
				if (text.trim()) {
					var n = -1;
					for (let x = 0; x < this.arrList.length; x++) {
						if (this.arrList[x].keyid == data.keyid) {
							n = x;
						}
					}
					if (n == -1) {
						this.arrList.push(data)
					} else {
						this.arrList[n] = data;
					}
			
				} else {
					for (let x = 0; x < this.arrList.length; x++) {
						if (this.arrList[x].keyid == data.keyid) {
							this.arrList.splice(x, 1);
							x--;
						}
					}
				}
			},
			registerIpt(registerCount){
				
			},
			changeCommand(str) {
				this.countType=str;
			},
			addressListfn() {
				var searchid;
				if(this.$route.name=='search-combinedYN'){
					searchid='530000'
				}else{
					searchid=''
				}
			
				var str = [];
				for (let x = 0; x < 3; x++) {
					for (let i = 0; i < jsk_data.length; i++) {
						if (jsk_data[i].regionLevel == x + 1 && x + 1 == 1) {
							if(searchid){
								if (jsk_data[i].id == searchid) {
									str.push({
										id: jsk_data[i].id,
										label: jsk_data[i].regionName,
										short: jsk_data[i].short,
										value: jsk_data[i].parentId,
										children: jsk_data[i].id == 900000 ? undefined : [],
									});
								}
							}else{
									str.push({
										id: jsk_data[i].id,
										label: jsk_data[i].regionName,
										short: jsk_data[i].short,
										value: jsk_data[i].parentId,
										children: jsk_data[i].id == 900000 ? undefined : [],
									});
							}
			
			
			
						} else if (jsk_data[i].regionLevel == x + 1 && x + 1 == 2 && str) {
							for (let j = 0; j < str.length; j++) {
								if (str[j].id == jsk_data[i].parentId) {
									str[j].children.push({
										id: jsk_data[i].id,
										label: jsk_data[i].regionName,
										short: jsk_data[i].short,
										value: jsk_data[i].parentId,
										children: [],
									});
								}
							}
						} else if (jsk_data[i].regionLevel == x + 1 && x + 1 == 3) {
							for (let j = 0; j < str.length; j++) {
								if (str[j].children) {
									for (let k = 0; k < str[j].children.length; k++) {
										if (str[j].children[k].id == jsk_data[i].parentId) {
											str[j].children[k].children.push({
												id: jsk_data[i].id,
												label: jsk_data[i].regionName,
												short: jsk_data[i].short,
												value: jsk_data[i].parentId,
											});
										}
									}
								}
							}
						}
					}
				}
			
				this.addressList = str;
			},
			// 项目属地
			addressListbtn() {
				for (let i = 0; i < this.arrList.length; i++) {
					if (this.arrList[i].keyid == 'address') {
						this.arrList.splice(i, 1);
						i--;
					}
				}
				let arr = (this.$refs.address.getCheckedNodes())
				let provinceCode = [],
					cityCode = [],
					countyCode = [];
				let province = [],
					city = [],
					county = [];
			
				for (var i in arr) {
					if (arr[i].parent) {
						if (!arr[i].parent.checked) {
							arr[i].hasChildren && cityCode.push(arr[i].value);
							!arr[i].hasChildren && countyCode.push(arr[i].value);
						}
					} else {
						provinceCode.push(arr[i].value)
					}
				}
			
			
				for (let j = 0; j < jsk_data.length; j++) {
					if (provinceCode.length > 0) {
						for (let i = 0; i < provinceCode.length; i++) {
							if (provinceCode[i] == jsk_data[j].id) {
								province.push({
									value: jsk_data[j].regionName,
									key: provinceCode[i]
								})
							}
			
						}
			
					}
					if (cityCode.length > 0) {
						for (let i = 0; i < cityCode.length; i++) {
							if (cityCode[i] == jsk_data[j].id) {
								city.push({
									value: jsk_data[j].regionName,
									key: cityCode[i]
								})
							}
			
						}
					}
					if (countyCode.length > 0) {
						for (let i = 0; i < countyCode.length; i++) {
							if (countyCode[i] == jsk_data[j].id) {
								county.push({
									value: jsk_data[j].regionName,
									key: countyCode[i]
								})
							}
			
						}
					}
			
				}
				if (province.length > 0 || city.length > 0 || county.length > 0) {
					let arrlist = [];
					if (province.length > 0) {
						for (let i in province) {
							arrlist.push(province[i].value)
						}
					}
					if (city.length > 0) {
						for (let i in city) {
							arrlist.push(city[i].value)
						}
					}
					if (county.length > 0) {
						for (let i in county) {
							arrlist.push(county[i].value)
						}
					}
					console.log(this.addressType);
					this.arrList.push({
						value: arrlist,
						keyid: 'address',
						provinceCode: provinceCode,
						cityCode: cityCode,
						countyCode: countyCode,
						title: '项目属地：',
						key: '',
						addressType:this.addressType
					})
				}
				// this.landMarketDto = obj
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content{
	  padding: 0px 16px;
	   background: #FFFFFF;
	   .content_item{
		   padding-top: 12px;
		   display: flex;
		   align-items: center;
	       .label{
	           width: 84px;
			   font-size: 14px;
			   font-weight: 400;
			   color: rgba(35,35,35,0.8);
	       }
	       .content_right{
	           
	           .ename_input{
	               width: 640px;
	              
	               margin-right: 20px;
	               
	           }
	       }
		   
		 .item_ckquery_list {
			display: flex;
		
		}
		
		 .item_ckquery_list .el-input__icon {
			position: relative;
			top: 1px;
		}
		.ckquery_list_right {
			width: 640px;
		}
		.register_count_ipt{
			margin-left: 0px;
			
		}
		.register_count_ipt .el-input__inner{
			width: 174px;
		}
		::v-deep .el-input-group__prepend{
			padding: 0 8px;
		}
		.content-projecttype{
			display: flex;
			align-items: center;
			justify-content: center;
			.projecttype{
				font-weight: 400;
				color: #232323;
				padding: 1px 5px;
				margin-right: 4px;
				cursor: pointer;
				border-radius: 3px 3px 3px 3px;
				font-size: 14px;
			}
			.projecttype:first-child{
				padding-left: 0px;
			}
			.projecttype:hover{
				background: #F3F4F5;
				padding: 1px 5px;
			}
			.activetype{
				background: #F3F4F5;
				padding: 1px 5px !important;
			}
		}
		
		
	   
	   }
	   .content_item_padding0{
		   padding: 0;
	   }
		
	}
	
</style>