<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="projectName" ></el-input>
			        <template v-if="projectName">
			            <span v-for=" (item,k)  in enameQueryTypeList" :key="k" style="margin-right: 24px;">
			                <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  ref="inp"
			        			v-model="projectEntity" 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">
			        					{{chargeDepartment.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 specialBondProjectType">
							<span class="projecttype" :class="item.status?'activetype':''" @click="projecttypebtn(i)">
									{{item.value}}	   
							</span>
						</template>
					</div> -->
					<div class="select-popper">
					  <span :class="{ color_text: projectType.length }">
					    项目类型{{projectType.length? projectType.length + "项": ""}}
					    <i class="el-icon-caret-bottom"></i>
					  </span>
					  <el-select v-model="projectType" class="select-multiple"  multipleplaceholder="请选择">
					    <el-option v-for="(item, i) in specialBondProjectType" :key="i":label="item" :value="item">
					    </el-option>
					  </el-select>
					</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" v-if="tableData.length>0">
			<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" v-for="item in tableData">
					<p class="list-titel">
						 <router-link :to="'/radar/debtProject/details/'+item.uuid " tag="a" class="list-titel-a" v-html="item.projectName"></router-link>
					</p>
					
					<div class="content-label">
						<span class="list-label">{{item.domicile}}</span>
					</div>
					
					<div  class="list-content">
						<p class="list-content-text">
							<span>项目类型：</span>
							<span>{{item.projectType}}</span>
						</p>
						<p class="list-content-text">
							<span>项目总投资(亿)：</span>
							<span>{{item.projectTotalInvestment}}</span>
						</p>
						<p class="list-content-text">
							<span>项目资本金(亿)：</span>
							<span>{{item.projectCapital}}</span>
						</p>
						<p class="list-content-text">
							<span>专项债金额(亿)：</span>
							<span>{{item.specialCapital}}</span>
						</p>
					</div>
					<div  class="list-content">
						<p class="list-content-text">
							<span>项目主体：</span>
							<span class="blue">{{item.projectEntity}}</span>
						</p>
						<p class="list-content-text">
							<span>主管部门：</span>
							<span class="blue">{{item.chargeDepartment}}</span>
						</p>
						<p class="list-content-text">
							<span>实施单位：</span>
							<span class="blue">{{item.piu}}</span>
						</p>
					</div>
				</li>
			</ul>
			<template v-if="pageFlag">
				<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>
			</template>
			
			
		</div>
		
	</div>
	
</template>

<script>
	import {encodeStr} from "@/assets/js/common.js"
	import api from '@/api/radar/radar.js';
	import jsk_data from '../../../../../public/jsk.json';
	export default {
		name: 'debtProject',
		data() {
			return {
				encodeStr,
				projectName:'',
				enameQueryTypeList: [{
				        key: 'and',
				        status: false,
				        value: '模糊搜索',
				        keyid: 'businessScope'
				    },
				    {
				        key: 'or',
				        status: true,
				        value: '精准匹配',
				        keyid: 'businessScope'
				    },
				],
				enameQueryType: 'or',
				projectEntity:'',
				countTypelist: [{
						key: '1',
						value: '项目主体'
					},
					{
						key: '2',
						value: '主管部门'
					},
					{
						key: '3',
						value: '实施单位'
					}
				],
				chargeDepartment: {
					key: '3',
					value: '实施单位'
				},
				addressList: [],
				addressType: [],
				props: {
					multiple: true,
					expandTrigger: "hover",
					value: 'id'
				},
				specialBondProjectType: [
				],
				projectTypeText: ['不限'],
				projectType:['不限'],
				arrList:[],
				
				pageFlag:true,
				tableData:[],
				total:0,
				page:1,
				pageSize:20
				
				
			}
		},
		created() {
			this.addressListfn();
			this.searchDic();
			this.search();
		},
		methods: {
		     searchDic(){
				 api.searchDic().then(res=>{
				this.specialBondProjectType=res.specialBondProjectType;
				 }).catch(error=>{
				 	
				 });
				 
			 },
			changeCommand(str) {
				this.chargeDepartment=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 = [],
					areaCode = [];
				let province = [],
					city = [],
					area = [];
			
				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 && areaCode.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 (areaCode.length > 0) {
						for (let i = 0; i < areaCode.length; i++) {
							if (areaCode[i] == jsk_data[j].id) {
								area.push({
									value: jsk_data[j].regionName,
									key: areaCode[i]
								})
							}
			
						}
					}
			
				}
				if (province.length > 0 || city.length > 0 || area.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 (area.length > 0) {
						for (let i in area) {
							arrlist.push(area[i].value)
						}
					}
					console.log(this.addressType);
					this.arrList.push({
						value: arrlist,
						keyid: 'address',
						provinceCode: provinceCode,
						cityCode: cityCode,
						areaCode: areaCode,
						title: '项目属地：',
						key: '',
						addressType:this.addressType
					})
				}
				// this.landMarketDto = obj
			},
			projecttypebtn(){
					for(let i=0;i<this.projectType.length;i++){
						if(this.projectType[i]=='不限'){
							this.projectType=[];
						}
					}
			},
			reloadPage() {
				this.pageFlag = false;
				this.$nextTick(() => {
					this.pageFlag = true;
				});
			},
			handleCurrentChange(page) {
			  this.page = page;
			  this.search(page, this.limit);
			},
			search(page, limit,exportFlag) {
			  if (!page) {
				this.page = 1;
			  }
			  if (!limit) {
				this.limit = 20;
			  }
			  if (!page && !limit) {
				this.reloadPage();
			  }
			  let params = {
				  page:{
					 "page":this.page,
					  "limit":this.limit,
					  "field":"",
					  "order":"desc" 
				  },
				  specialBondProjectDto:{}
			  };
			  
			  if(this.projectName){
				  params.specialBondProjectDto['projectName']=this.projectName;
				  params.specialBondProjectDto['enameQueryType']=this.enameQueryType;
			  }
			  if(this.projectEntity){
				  
				  if(this.chargeDepartment.value=='项目主体'){
					  	params.specialBondProjectDto['projectEntity']=this.projectEntity;
				  }
				  if(this.chargeDepartment.value=='主管部门'){
				  		params.specialBondProjectDto['chargeDepartment']=this.projectEntity;			  
				  }
				  if(this.chargeDepartment.value=='实施单位'){
				  		params.specialBondProjectDto['piu']=this.projectEntity;			  
				  }
			  
				
			  }
			  if(this.arrList.length>0){
				  for (let i = 0; i < this.arrList.length; i++) {
				    if (this.arrList[i].keyid == "address") {
				      params.specialBondProjectDto['province'] = this.arrList[i].provinceCode.join(',');
				      params.specialBondProjectDto['city'] = this.arrList[i].cityCode.join(',');
				      params.specialBondProjectDto['area'] = this.arrList[i].areaCode.join(',');
				    }
				}
			  }
			  if(this.projectType.length>0&&this.projectType[0]!='不限'){
				  params.specialBondProjectDto['projectType'] = this.projectType.join(',');
			  }
			  
			  api.bondProjectPage(params).then(res=>{
				  if (res.code==200) {
				  	this.tableData=res.data.list;
				  	this.total=res.data.total;
				  }
			   }).catch(error=>{
			   	
			   });
			  
			},
			ckhasValue(param){
				 var ckhasValue;
				 if(param){
					ckhasValue=this.hasValueThroughObj(0,param);
				 }else{
					ckhasValue=false;
				 }
				 return ckhasValue;
			 },
			 hasValueThroughObj(times,param,excludeKeys,excludeValues){
			
				   if(times==0){
				            this.hasValue=false;
				        }
				        var excludeKeys=['domicile','yitihuaSource'];
				        var excludeValues=['and','or','{}','[]','','null','undefined'];
				      　if(Array.isArray(param)){
				            for(let i=0;i<param.length;i++){
				                var objParam = param[i];
				                Object.keys(objParam).map(key => {
				                    if(Array.isArray(objParam[key])||objParam[key] instanceof Object){
				                        this.hasValueThroughObj(1,objParam[key],excludeKeys,excludeValues);
				                    }else{
				                        if(objParam instanceof Object) {
				                            if (!excludeKeys.includes(key)&&!excludeValues.includes(objParam[key])) {
			
				                                this.hasValue =true;
				                                // return hasValue;
				                            }
				                        }
				                    }
				              })
				            }
				      　}else{
				      　    if(param instanceof Object) {
				               Object.keys(param).map(key => {
				                    if(Array.isArray(param[key])||param[key] instanceof Object){
				                        this.hasValueThroughObj(1,param[key],excludeKeys,excludeValues);
				                    }else{
				                        if (!excludeKeys.includes(key)&&!excludeValues.includes(param[key])) {
			
				                           this.hasValue =true;
				                            // return hasValue;
				                        }
				                    }
				                })
				            }
				        }
				        return this.hasValue;
			},
			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>