<template>
	<div>
		<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 @click="search()">查询</span>
					<span @click="reset">重置</span>
				</div>
			</div>
		   
		</div>
		
		<div class="bottomlist">
			<div class="bottomlist-title">
				  <p>共有{{total}}条</p>
				  <p>
					  <img src="@/assets/images/EXCEL.png" alt="">
					  <span>导出EXCEL</span>
				  </p>
			</div>
			<ul class="bottomlist-content">
				<li class="bottomlist-list">
					<p class="list-titel">
						 <router-link :to="'/radar/debtProject/details/'+ 1" tag="a" class="list-titel-a">轨道交通13号线扩能提升工程</router-link>
					</p>
					
					<div class="content-label">
						<span class="list-label">江西省-南昌市</span>
					</div>
					
					<div  class="list-content">
						<p class="list-content-text">
							<span>项目类型：</span>
							<span>轨道交通</span>
						</p>
						<p class="list-content-text">
							<span>项目总投资(亿)：</span>
							<span>26</span>
						</p>
						<p class="list-content-text">
							<span>项目资本金(亿)：</span>
							<span>96</span>
						</p>
						<p class="list-content-text">
							<span>专项债金额(亿)：</span>
							<span>200</span>
						</p>
					</div>
					<div  class="list-content">
						<p class="list-content-text">
							<span>项目主体：</span>
							<span class="blue">江西合胜合招标咨询有限公司</span>
						</p>
						<p class="list-content-text">
							<span>主管部门：</span>
							<span class="blue">江西胜合招标咨询有限公司</span>
						</p>
						<p class="list-content-text">
							<span>实施单位：</span>
							<span class="blue">江西合胜合招标咨询有限公司</span>
						</p>
					</div>
				</li>
			</ul>
			<div class="pagination clearfix"  v-show="total>0">
				  <el-pagination
				    background
				    :page-size="pageSize"
				    :current-page="page"
				    @current-change="handleCurrentChange"
				    layout="prev, pager, next"
				    :total="total">
				  </el-pagination>
			</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:[],
				total:6000,
				page:1,
				pageSize:20
				
				
			}
		},
		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
			},
			handleCurrentChange(val){
				
			},
			search(){
				
			},
			reset(){
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
	  padding: 0px 16px;
      border-radius: 4px 4px 4px 4px;
	   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;
	   }
		
	}
	.bottomlist{
		width: 100%;
		background-color: #FFFFFF;
		
         border-radius: 4px 4px 4px 4px;
		.bottomlist-title{
			display: flex;
			justify-content: end;
			align-items: center;
			margin-top: 12px;
			padding: 24px ;
			border-bottom: 1px solid #EFEFEF;
			p:first-child{
				font-size: 12px;
				font-weight: 400;
				color: #3D3D3D;
				margin-right: 10px;
			}
			p:last-child{
				font-size: 14px;
				font-weight: 400;
				color: rgba(35,35,35,0.8);
			}
			img{
				width: 18px;
				height: 18px;
			}
		}
		.bottomlist-content{
			
			padding-bottom: 0px;
		}
		.bottomlist-list{
			padding: 14px;
			font-size: 14px;
			border-bottom: 1px solid #EFEFEF;
			padding-bottom: 14px;
			.list-titel{
				font-size: 16px;
				font-weight: 700;
				color: #3D3D3D;
				line-height: 19px;
				.list-titel-a{
					text-decoration: none;
					color:#3D3D3D;
				}
				a:hover, a:visited, a:link, a:active{
					color:#3D3D3D;
				}
			}
			.content-label{
				margin-top: 7px;
				.list-label{
					background: #F3F3FF;
					color: #8491E8;
					border-radius: 1px 1px 1px 1px;
				
					padding: 3px 7px;
					font-size: 12px;
					
				}
			}
			
			
			.list-content{
				margin-top: 3px;
				display: flex;
				justify-content: start;
				align-items: center;
				
				.list-content-text{
					margin-top: 7px;
					display: flex;
					justify-content: start;
					align-items: center;
					margin-right: 27px;
					font-size: 14px;
					
					span:first-child{
						font-weight: 400;
						color: rgba(35,35,35,0.4);
						line-height: 15px
					}
					span:last-child{
						font-weight: 400;
						color: rgba(35,35,35,0.8);
						line-height: 15px
					}
					.blue{
						color: #0081FF !important;
						cursor: pointer;
						
					}
					
				}
				
				
			}
			
			
		}
		.bottomlist-list:hover{
			background: #F6F9FC;
			cursor: pointer;
		}
		.pagination{
			padding: 14px ;
		   .el-pagination{
			   float: right;
		   }
		}
	}
</style>