<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="jskBidQueryDto.projectName" ></el-input>
	  	    </div>
	  	</div>
		<div class="content_item">
		    <div class="label">招标单位</div>
		    <div class="content_right">
		        <el-input class="ename_input" 
				placeholder="请输入项目名称关键字" v-model="jskBidQueryDto.tenderee" ></el-input>
		    </div>
		</div>
		<div class="content_item">
		    <div class="label">工程规模</div>
		    <div class="content_right">
		        <el-input class="ename_input" 
				placeholder="请输入项目名称关键字" v-model="jskBidQueryDto.projectScale" ></el-input>
		    </div>
		</div>
		<div class="content_item">
		    <div class="label">更多筛选</div>
		    <div class="content_right">
		       <div class="select-popper" >
		         <span :class="{color_text:jskBidQueryDto.province.length ||jskBidQueryDto.city.length ||jskBidQueryDto.county.length,}">
					 项目属地{{jskBidQueryDto.province.length ||jskBidQueryDto.city.length ||jskBidQueryDto.county.length? jskBidQueryDto.province.length + jskBidQueryDto.city.length +jskBidQueryDto.county.length +"项": ""}}
		           <i class="el-icon-caret-bottom"></i>
		         </span>
		         <el-cascader
		           ref="address"
		           class="cascader-region"
		           v-model="addressType"
		           :options="addressList"
		           :props="props"
		           @change="domicileChange"
		           collapse-tags
		           clearable
		         ></el-cascader>
		       </div>
			   <div class="select-popper">
			     <span :class="{ color_text: jskBidQueryDto.objectType.length }">
			       标的物类型{{jskBidQueryDto.objectType.length? jskBidQueryDto.objectType.length + "项": ""}}
			       <i class="el-icon-caret-bottom"></i>
			     </span>
			     <el-select v-model="jskBidQueryDto.objectType" class="select-multiple" multipleplaceholder="请选择">
			       <el-option v-for="(item, i) in objectTypeList" :key="i":label="item" :value="item">
			       </el-option>
			     </el-select>
			   </div>
			   <div class="select-popper">
			     <span :class="{ color_text: jskBidQueryDto.projectType.length }">
			       项目类型{{jskBidQueryDto.projectType.length? jskBidQueryDto.projectType.length + "项": ""}}
			       <i class="el-icon-caret-bottom"></i>
			     </span>
			     <el-select v-model="jskBidQueryDto.projectType" class="select-multiple" multipleplaceholder="请选择">
			       <el-option v-for="(item, i) in projectTypeList" :key="i":label="item" :value="item">
			       </el-option>
			     </el-select>
			   </div>
			   <div class="select-popper">
			     <span :class="{ color_text: jskBidQueryDto.tenderWay.length }">
			       招标方式{{jskBidQueryDto.tenderWay.length? jskBidQueryDto.tenderWay.length + "项": ""}}
			       <i class="el-icon-caret-bottom"></i>
			     </span>
			     <el-select v-model="jskBidQueryDto.tenderWay" class="select-multiple" multipleplaceholder="请选择">
			       <el-option v-for="(item, i) in tenderWayList" :key="i":label="item" :value="item">
			       </el-option>
			     </el-select>
			   </div>
			   <el-dropdown @command="planTenderAmounthandleCommand" class="el-dropdown-land" trigger="click" ref="planTenderAmountShowPopper" :hide-on-click="false">
			   	<span class="el-dropdown-link" :class="jskBidQueryDto.startPlanTenderAmount ||jskBidQueryDto.endPlanTenderAmount ? 'color_text': ''">
			   		成交金额{{jskBidQueryDto.startPlanTenderAmount ||jskBidQueryDto.endPlanTenderAmount? " 1项": ""}}<i class="el-icon-caret-bottom"></i>
			   	</span>
			   	<el-dropdown-menu slot="dropdown">
			   		<el-dropdown-item v-for="(item, i) in planTenderAmount" :class="jskBidQueryDto.startPlanTenderAmount == item.value[0] &&jskBidQueryDto.endPlanTenderAmount == item.value[1] &&
			                      !startPlanTenderAmount &&!endPlanTenderAmount? 'color_text': '' " :key="i" :command="item.value">{{ item.label }}</el-dropdown-item>
			   			<el-dropdown-item command="" style="padding: 0; text-indent: 20px">
			   				<div @mouseenter="planTenderAmountShowPopper = true" @mouseleave="planTenderAmountShowPopper = false">
			   					<span :class="(startPlanTenderAmount || endPlanTenderAmount) &&jskBidQueryDto.startPlanTenderAmount ==startPlanTenderAmount &&
			                               jskBidQueryDto.endPlanTenderAmount == endPlanTenderAmount? 'color_text': '' ">
			   						自定义<i class="el-icon-arrow-right"></i>
			   					</span>
			   					<div class="jabph_popper_box" style="position: absolute"v-if="planTenderAmountShowPopper">
			   						<div class="jabph_popper_wrap">
			   							从
			   							<el-input class="jabph_popper_input" v-limit-num clearable v-model="startPlanTenderAmount"></el-input>
			   							万
			   						</div>
			   						<div class="jabph_popper_wrap">
			   							到
			   							<el-input class="jabph_popper_input" v-limit-num clearable v-model="endPlanTenderAmount"></el-input>
			   							万
			   						</div>
			   						<div style="">
			   							<el-button size="mini" @click="planTenderAmountCancel">取消</el-button>
			   							<el-button type="primary" size="mini" @click="planTenderAmountPopperConfirm">确定</el-button>
			   						</div>
			   					</div>
			   				</div>
			   			</el-dropdown-item>
			   	</el-dropdown-menu>
			   </el-dropdown>
			   
			   <div class="select-popper">
			     <span :class="{ color_text: jskBidQueryDto.projectCapitalSource.length }">
			       资金来源{{jskBidQueryDto.projectCapitalSource.length? jskBidQueryDto.projectCapitalSource.length + "项": ""}}
			       <i class="el-icon-caret-bottom"></i>
			     </span>
			     <el-select v-model="jskBidQueryDto.projectCapitalSource" class="select-multiple" multipleplaceholder="请选择">
			       <el-option v-for="(item, i) in projectCapitalSourceList" :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">
	  	<div class="bottomlist-title">
	  		<div></div>
	  		<div class="title-right">
	  			<p>共有{{total}}条</p>
	  			<p>
	  				<img src="@/assets/images/EXCEL.png" alt="">
	  				<span>导出EXCEL</span>
	  			</p>
	  		</div>
	  		  
	  	</div>
	  	<ul class="bottomlist-content">
	  		<li class="bottomlist-list"  >
	  			<p class="list-titel">
	  				 <router-link  :to="'/radar/Bidding/details/'+ 1" tag="a" class="list-titel-a"  >绿色节能型压缩机基础件、汽车零配件新建项目 (芜湖旭日机械制造有限公司)</router-link>
	  				 <!-- <div  v-else-if="item.projectName" v-html="item.projectName"></div> -->
	  			</p>
	  			<div class="content-label">
	  				<span class="list-label">市政工程</span>
	  			</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>芜湖旭日</span>
	  				</p>
	  				<p class="list-content-text">
	  					<span>资金来源：</span>
	  					<span>12345.62万</span>
	  				</p>
	  				
	  				
	  			</div>
				<div  class="list-content">
					<p class="list-content-text">
						<span>发布时间：</span>
						<span >2022-04-21</span>
					</p>
					<p class="list-content-text">
						<span>预计招标时间：</span>
						<span>2022-04-21</span>
					</p>
					<p class="list-content-text">
						<span>来源网站：</span>
						<span  class="blue">12345.62万</span>
					</p>
					
					
				</div>
				<div  class="list-content list-addree">
					<p class="list-content-text">
						<span>工程规模：</span>
						<span >城镇村道路用地</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: 'Bidding',
  data() {
    return {
      addressList: [],
      addressType: [],
      props: {
        multiple: true,
        expandTrigger: "hover",
        value: "id",
      },
	  objectTypeList: [
	    "施工",
	    "勘察设计",
	    "勘察",
	    "设计",
	    "监理",
	    "工程总承包",
	    "测绘",
	    "施工图审查",
	    "造价咨询",
	    "招标代理",
	    "规划编制",
	    "方案编制",
	    "检测",
	    "审计",
	    "项目管理",
	    "全过程工程咨询",
	    "ppp",
	    "其他"
	  ],//标的物类型
	  projectTypeList: [
	    "工程总承包",
	    "测绘",
	    "施工图审查",
	    "造价咨询",
	    "招标代理",
	    "规划编制",
	    "方案编制",
	    "检测",
	    "审计",
	    "项目管理",
	    "全过程工程咨询",
	    "ppp",
	    "其他"
	  ],//项目类型
	  tenderWayList: [
	    "工程总承包",
	    "测绘",
	    "施工图审查",
	    "造价咨询",
	    "招标代理",
	    "规划编制",
	    "方案编制",
	    "检测",
	    "审计",
	    "项目管理",
	    "全过程工程咨询",
	    "ppp",
	    "其他"
	  ],//招标方式
	  projectCapitalSourceList: [
	    "规划编制",
	    "方案编制",
	    "检测",
	    "审计",
	    "项目管理",
	    "全过程工程咨询",
	    "ppp",
	    "其他"
	  ],//资金来源
	  planTenderAmount: [{
	  		value: "不限",
	  		label: "不限",
	  	},
	  	{
	  		value: [0, 100],
	  		label: "100万元以下",
	  	},
	  	{
	  		value: [100, 1000],
	  		label: "100万-1000万元",
	  	},
	  	{
	  		value: [1000, 5000],
	  		label: "1000万-5000万元",
	  	},
	  	{
	  		value: [5000, 20000],
	  		label: "5000万-2亿元",
	  	},
	  	{
	  		value: [20000, ""],
	  		label: "2亿元以上",
	  	},
	  ],

      jskBidQueryDto: {
	    projectName:'',
		tenderee:'',
		projectScale:'',
        province: [],
        city: [],
        county: [],
		objectType:[],
		projectType:[],
		tenderWay:[],
		startPlanTenderAmount:'',
		endPlanTenderAmount:'',
		projectCapitalSource:[],
      },
	  planTenderAmountShowPopper:false,
	  startPlanTenderAmount:'',
	  endPlanTenderAmount:'',
	  
      domicile: [],
      pageFlag: true,
	  conditionsArr: [],
	  
	  tableData:[],
	  total:6000,
	  page:1,
	  pageSize:20
    };
  },
  computed: {
    checkJskBidQueryDto() {
        let arr = [];
		let data = {};
      if(this.jskBidQueryDto.projectName){
        data = {
						title: "项目名称:",
						keyid: "projectName",
						value: this.jskBidQueryDto.projectName,
						key: "projectName"
					}
		arr.push(data)
      }
     
      if(this.jskBidQueryDto.tenderee){
        data = {
						title: "招标单位:",
						keyid: "tenderee",
						value: this.jskBidQueryDto.tenderee,
						key: "tenderee"
					}
		arr.push(data)
      }
	  if(this.jskBidQueryDto.projectScale){
	    data = {
	  						title: "工程规模:",
	  						keyid: "projectScale",
	  						value: this.jskBidQueryDto.projectScale,
	  						key: "projectScale"
	  					}
	  	arr.push(data)
	  }
      if (this.domicile.length > 0) {
        data = {
          title: "项目属地:",
          keyid: "domicile",
          value: this.domicile.join(","),
          key: "domicile"
        }
        arr.push(data)
      }
	  if (this.jskBidQueryDto.objectType.length > 0) {
	    data = {
	      title: "标的物类型:",
	      keyid: "objectType",
	      value: this.jskBidQueryDto.objectType,
	      key: "objectType"
	    }
	    arr.push(data)
	  }
	  if (this.jskBidQueryDto.projectType.length > 0) {
	    data = {
	      title: "项目类型:",
	      keyid: "projectType",
	      value: this.jskBidQueryDto.projectType,
	      key: "projectType"
	    }
	    arr.push(data)
	  }
	  if (this.jskBidQueryDto.tenderWay.length > 0) {
	    data = {
	      title: "招标方式:",
	      keyid: "tenderWay",
	      value: this.jskBidQueryDto.tenderWay,
	      key: "tenderWay"
	    }
	    arr.push(data)
	  }
	  if (this.jskBidQueryDto.projectCapitalSource.length > 0) {
	    data = {
	      title: "资金来源:",
	      keyid: "projectCapitalSource",
	      value: this.jskBidQueryDto.projectCapitalSource,
	      key: "projectCapitalSource"
	    }
	    arr.push(data)
	  }
	  
	  
      this.conditionsArr = arr
    },
  },
  mounted() {
    if (this.$route.query.projectName) {
        this.projectName = this.$route.query.projectName;
      }
      this.addressListfn();
  },
  methods: {
    keywordClick(val) {
      this.projectName = val
    },
	 
    search(page, limit,exportFlag) {
      if (!page) {
        this.page = 1;
      }
      if (!limit) {
        this.limit = 20;
      }
      if (!page && !limit) {
        this.reloadPage();
      }
      var data = JSON.parse(JSON.stringify(this.jskBidQueryDto));
      data.province = data.province.join(",");
      data.city = data.city.join(",");
      data.county = data.county.join(",");
      let params = {
        page: {
          page: this.page,
          limit: this.limit,
          field: this.field,
        },
        jskBidQueryDto: data,
      };
      if(this.projectName){
        params.projectName = this.projectName
      }else{
        delete params.projectName
      }
      if(this.keywordNot){
        params.keywordNot = this.keywordNot
      }else{
        delete params.keywordNot
      }
      
      this.$emit("search",params)
      
    },
    reloadPage() {
      this.pageFlag = false;
      this.$nextTick(() => {
        this.pageFlag = true;
      });
    },
    handleCurrentChange(page) {
      this.page = page;
      this.search(page, this.limit);
    },
    handleSizeChange(limit) {
      this.limit = limit;
      this.search(this.page, limit);
    },
    deleteDomicile() {
      this.$refs.address.handleClear();
    },
    domicileChange() {
      let arr = this.$refs.address.getCheckedNodes();
      let province = [],
        city = [],
        county = [];
      this.domicile = [];
      for (var i in arr) {
        if (arr[i].parent) {
          if (!arr[i].parent.checked) {
            arr[i].hasChildren && city.push(arr[i].value);
            arr[i].hasChildren && this.domicile.push(arr[i].label);
            !arr[i].hasChildren && county.push(arr[i].value);
            !arr[i].hasChildren && this.domicile.push(arr[i].label);
          }
        } else {
          province.push(arr[i].value);
          this.domicile.push(arr[i].label);
        }
      }
      var obj = JSON.parse(JSON.stringify(this.jskBidQueryDto));
      obj.province = province;
      obj.city = city;
      obj.county = county;
      this.jskBidQueryDto = obj;
    },
    addressListfn() {
      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) {
            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;
    },
	planTenderAmountPopperConfirm() {
		if (
			this.startPlanTenderAmount &&
			this.endPlanTenderAmount &&
			!(Number(this.endPlanTenderAmount) > Number(this.startPlanTenderAmount))
		) {
			return this.$message.warning("最小值必须小于最大值,请重新输入！");
		}
		this.planTenderAmountShowPopper = false;
		var obj = JSON.parse(JSON.stringify(this.jskBidQueryDto));
		obj.startPlanTenderAmount = this.startPlanTenderAmount;
		obj.endPlanTenderAmount = this.endPlanTenderAmount;
		this.jskBidQueryDto = obj;
		this.$refs.planTenderAmountShowPopper.hide();
	},
	planTenderAmountCancel() {
		this.planTenderAmountShowPopper = false;
		this.$refs.planTenderAmountShowPopper.hide();
	},
	planTenderAmounthandleCommand(command) {
		if (command) {
			this.$refs.planTenderAmountShowPopper.hide();
			var obj = JSON.parse(JSON.stringify(this.jskBidQueryDto));
			this.startPlanTenderAmount = "";
			this.endPlanTenderAmount = "";
			if (command == "不限") {
				obj.startPlanTenderAmount = "";
				obj.endPlanTenderAmount = "";
			} else {
				obj.startPlanTenderAmount = command[0];
				obj.endPlanTenderAmount = command[1];
			}
			this.jskBidQueryDto = obj;
		}
	},
    reset() {
      Object.assign(this.$data, this.$options.data.call(this)); //重置data
      this.init();
      this.$emit("reset");
    },
    init(){
      this.search();
      this.addressListfn();
    },
   
  },
};
</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;
	           }
			   .land_ipt_470 {
			   	width: 640px;
			   }
	       }
		   
		 .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: space-between;
			align-items: center;
			margin-top: 12px;
			padding: 16px ;
			border-bottom: 1px solid #EFEFEF;
			 
			.title-right{
				display: flex;
				align-items: center;
				p:first-child{
					font-size: 12px;
					font-weight: 400;
					color: #3D3D3D;
					margin-right: 10px;
				}
				p:last-child{
					display: flex;
					align-items: center;
					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: 16px;
			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: 12px;
				.list-label{
					background: #F3F3FF;
					color: #8491E8;
					border-radius: 1px 1px 1px 1px;
				
					padding: 3px 7px;
					font-size: 12px;
					
				}
			}
			
			
			.list-content{
				margin-top: 8px;
				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;
						
					}
					
				}
				
				
			}
			.list-addree{
				width: auto;
				background: #F3F4F5;
				display: inline-flex;
				margin-top: 7px;
				.list-content-text{
					margin-top: 0px;
					span{
						line-height: 30px!important;
					}
				}
				img{
					width: 14px;
					margin: 0  8px;
					
				}
			}
			
			
		}
		.bottomlist-list:hover{
			background: #F6F9FC;
			cursor: pointer;
		}
		.pagination{
			padding: 14px ;
		   .el-pagination{
			   float: right;
		   }
		}
	}
	
	
</style>

