<template>
  <div>
	  <div class="content">
	  	<div class="content_item content_item_padding0">
	  	    <div class="label">关键字</div>
	  	    <div class="content_right">
	  	        <el-input class="ename_input" placeholder="请输入关键字查询" v-model="importantProjectDto.keyword" ></el-input>
				<el-checkbox-group v-model="importantProjectDto.keywordStr" class="keyword_checkbox" >
					<el-checkbox v-for="item in keywordTypeList" :label="item.value"  :key="item.label">{{item.label}}</el-checkbox>
				</el-checkbox-group>
	  	    </div>
	  	</div>
		<div class="content_item">
		    <div class="label">基本信息</div>
		    <div class="content_right">
		       <div class="select-popper" >
		         <span :class="{color_text:importantProjectDto.province.length ||importantProjectDto.city.length ||importantProjectDto.area.length,}">
					 行政区划{{importantProjectDto.province.length ||importantProjectDto.city.length ||importantProjectDto.area.length? importantProjectDto.province.length + importantProjectDto.city.length +importantProjectDto.area.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: importantProjectDto.year.length }">
						项目年度{{importantProjectDto.year.length? importantProjectDto.year.length + "项": ""}}
						<i class="el-icon-caret-bottom"></i>
					</span>
					<el-select @change="changeYear" v-model="importantProjectDto.year" class="select-multiple" multiple placeholder="请选择">
						<el-option v-for="(item, i) in years" :key="i" :label="item+'年'" :value="item">
						</el-option>
					</el-select>
				</div>
				<div class="select-popper">
					<span :class="{ color_text: importantProjectDto.fileTitle.length }">
						重点项目清单{{importantProjectDto.fileTitle.length? importantProjectDto.fileTitle.length + "项": ""}}
						<i class="el-icon-caret-bottom"></i>
					</span>
					<el-select v-model="importantProjectDto.fileTitle" class="select-multiple" multiple placeholder="请选择">
						<el-option v-for="(item, i) in fileTitleOptions" :key="i" :label="item" :value="item">
						</el-option>
					</el-select>
				</div>
				<el-dropdown @command="transactionPricehandleCommand" class="el-dropdown-land" placement="bottom-start" trigger="click" ref="transactionPriceShowPopper" :hide-on-click="false">
					<span class="el-dropdown-link" :class="importantProjectDto.startMoney ||importantProjectDto.endMoney ? 'color_text': ''">
						项目投资额{{importantProjectDto.startMoney ||importantProjectDto.endMoney? " 1项": ""}}<i class="el-icon-caret-bottom"></i>
					</span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item v-for="(item, i) in transactionPriceOptions" :class="importantProjectDto.startMoney == item.value[0] &&importantProjectDto.endMoney == item.value[1] &&
				                   !startMoney &&!endMoney? 'color_text': '' " :key="i" :command="item.value">{{ item.label }}</el-dropdown-item>
						<el-dropdown-item command="" style="padding: 0; text-indent: 20px">
							<div @mouseenter="transactionPriceShowPopper = true" @mouseleave="transactionPriceShowPopper = false">
								<span :class="(startMoney || endMoney) &&importantProjectDto.startMoney ==startMoney &&
				                            importantProjectDto.endMoney == endMoney? 'color_text': '' ">
									自定义<i class="el-icon-arrow-right"></i>
								</span>
								<div class="jabph_popper_box" style="position: absolute" v-if="transactionPriceShowPopper">
									<div class="jabph_popper_wrap">
										从
										<el-input class="jabph_popper_input" v-limit-num clearable v-model="startMoney"></el-input>
										万
									</div>
									<div class="jabph_popper_wrap">
										到
										<el-input class="jabph_popper_input" v-limit-num clearable v-model="endMoney"></el-input>
										万
									</div>
									<div style="">
										<el-button size="mini" @click="transactionPriceCancel">取消</el-button>
										<el-button type="primary" size="mini" @click="transactionPricePopperConfirm">确定</el-button>
									</div>
								</div>
							</div>
						</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
		    </div>
		</div>
		<div class="content_item">
		    <div class="label">项目级别</div>
		    <div class="content_right">
				<el-radio v-model="importantProjectDto.projectLevel" label="省级">省级</el-radio>
				<el-radio v-model="importantProjectDto.projectLevel" label="市级">市级</el-radio>
				<el-radio v-model="importantProjectDto.projectLevel" label="区县级">区/县级</el-radio>
			</div>
		</div>
		<div class="content_item content_item1">
		    <div class="label" style="float:left;">项目类型</div>
		    <div class="content_right">
				<el-checkbox-group v-model="importantProjectDto.buildingProjectType" class="checkbox_1122">
					<template v-for="(item,index) in projectTypeList">
						<el-checkbox v-if="index<showNum" :label="item" :key="index">{{item}}</el-checkbox>
					</template>
				</el-checkbox-group>
				<span class="more" v-if="showNum==10" @click="showNum=99">更多<img src="@/assets/images/more.png" alt=""></span>
				<span class="more more1" v-if="showNum==99" @click="showNum=10">收起<img src="@/assets/images/more.png" alt=""></span>
			</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 class="bottomlist-title-left" >
					<p class="title-left">
						查询结果
					</p>
					<el-popover v-model="fieldshow" placement="bottom-start" trigger="click" popper-class="viewlist-el-popover">
						<ul class="pup_list pup_zhclist">
							<li v-for="(itme,i) in fieldOptions" :class="itme.status?'active':''"
								@click="handsequencingList(i)" :key="i">
								{{itme.value}}
							</li>
						</ul>
						<span slot="reference" class="toolbar-right-download" >{{fieldText}}<i class="el-icon-arrow-down" :style="{transform:fieldshow?'rotate(180deg)':''}"></i>
						</span>
					</el-popover>
				</div>
	  		<div class="title-right">
	  			<p><span style="margin-right:4;color:rgba(35, 35, 35, 0.40);font-size: 18px;position: relative;top:2px;">·</span>共有{{total}}条</p>
	  			<p v-hasPermi="['radar:export:important']" >
	  				<img src="@/assets/images/EXCEL.png" alt="">
	  				<span class="excel" @click="search('','','export')">导出EXCEL</span>
	  			</p>
	  		</div>
	  		  
	  	</div>
		<div class="table-item-jf1" v-if="tableData.length==0&& !isSkeleton">
			<img class="item-jf-img" src="@/assets/images/kong.png" alt="">
			<div class="item-jf-titel">抱歉，没找到相关数据！</div>
			<div class="item-jf-text">建议调整关键词或筛选条件，重新搜索！</div>
		</div>
		<skeleton style="margin-left:16px;" v-if="isSkeleton"></skeleton>
	  	<ul class="bottomlist-content" v-if="tableData.length>0&& !isSkeleton">
	  		<li class="bottomlist-list" v-for="item in tableData">
	  			<p class="list-titel">
	  				 <router-link  :to="'/radar/MajorProject/details/'+ item.md5" tag="a" class="list-titel-a"  v-html="item.projectName"></router-link>
	  			</p>
	  			<div class="content-label" v-if="item.province||item.city||item.area||item.projectLevel">
					<span class="list-label list-label-zb" v-if="item.province||item.city||item.area">
						{{item.province}}<template v-if="item.city">-{{item.city}}</template><template v-if="item.area">-{{item.area}}</template>
					</span>
					<span class="list-label list-label-zb" v-if="item.projectLevel">
					  {{item.projectLevel}}
					</span>
	  			</div>
	  			
	  			<div  class="list-content list-content1" v-if="item.year||item.planStartDate||item.planCompletionDate">
	  				<p class="list-content-text" v-if="item.year">
	  					<span>项目年度：</span>
	  					<span>{{item.year}}年</span>
	  				</p>
	  				<p class="list-content-text" v-if="item.planStartDate">
	  					<span>拟开工时间：</span>
	  					<span>{{item.planStartDate}}年</span>
	  				</p>
	  				<p class="list-content-text" v-if="item.planCompletionDate">
	  					<span>拟建成时间：</span>
	  					<span>{{item.planCompletionDate}}年</span>
	  				</p>
	  			</div>
	  			<div  class="list-content list-content1" v-if="item.buildingProjectType||item.completedInvestment||item.completedPlanInvestment||item.projectTotalInvestment">
	  				<p class="list-content-text" v-if="item.buildingProjectType">
	  					<span>归属产业：</span>
	  					<span>{{item.buildingProjectType}}</span>
	  				</p>
	  				<p class="list-content-text" v-if="item.projectTotalInvestment>0">
	  					<span>项目投资金额：</span>
	  					<span>{{item.projectTotalInvestment}}万元</span>
	  				</p>
	  				<p class="list-content-text" v-if="item.completedInvestment>0">
	  					<span>已完成投资额：</span>
	  					<span>{{item.completedInvestment}}万元</span>
	  				</p>
	  				<p class="list-content-text" v-if="item.completedPlanInvestment>0">
	  					<span>年度投资金额：</span>
	  					<span>{{item.completedPlanInvestment}}万元</span>
	  				</p>
	  			</div>
	  			<div  class="list-content list-content1" v-if="item.chargeDepartment||item.contactPersonAndTel||item.constructUnit">
					<p class="list-content-text" v-if="item.chargeDepartment">
	  					<span>主管部门：</span>
	  					<span v-html="item.chargeDepartment"></span>
	  				</p>
	  				<p class="list-content-text" v-if="item.constructUnit">
	  					<span>项目法人：</span>
						<span v-if="item.constructUnitId">
							<span class="blue"  @click="getUipIdByCid(item.constructUnitId)" v-html="item.constructUnit"></span>
						</span>
						<span v-else  v-html="item.constructUnit"></span>
	  				</p>
	  				<p class="list-content-text" v-if="item.contactPersonAndTel">
	  					<span>联系人及联系方式：</span>
	  					<span>{{item.contactPersonAndTel}}</span>
	  				</p>
	  			</div>
	  			<div  class="list-content list-content1" v-if="item.projectScale">
	  				<p class="list-content-text" v-if="item.projectScale">
	  					<span>建设规模：</span>
	  					<span style="flex:1;" v-html="item.projectScale"></span>
	  				</p>
	  			</div>
	  		</li>
	  	</ul>
	  	<div class="pagination clearfix"  v-if="total>0&&pageFlag">
	  		  <el-pagination
	  		    background
	  		    :page-size="limit"
	  		    :current-page="page"
	  		    @current-change="handleCurrentChange"
	  		    layout="prev, pager, next"
	  		    :total="total>limit*500?501*limit:total">
	  		  </el-pagination>
	  	</div>
	  	
	  </div>
  </div>
</template>

<script>
import jsk_data from '../../../../../public/jsk.json';
import {encodeStr} from "@/assets/js/common.js"
import skeleton from '@/views/project/projectList/component/skeleton'
import api from '@/api/radar/radar.js';
export default {
  name: 'BidRecord',
  components:{skeleton},
  data() {
    return {
		encodeStr,
		fieldshow: false,
		fieldText: '默认排序',
		field: 'year', //查询结果排序方式
		fieldOptions: [{
				key: "year",
				value: "默认排序",
				status: true,
			},
			{
				key: "planStartDate",
				value: "按拟开工时间倒序",
				status: false,
			},
			{
				key: "planCompletionDate",
				value: "按拟建成时间倒序",
				status: false,
			},
			{
				key: "projectTotalInvestment",
				value: "按项目总投资金额倒序",
				status: false,
			},
		],
		isSkeleton:true,
		addressList: [],
		addressType: [],
		props: {
			multiple: true,
			expandTrigger: "hover",
			value: "id",
		},
		keywordTypeList:[
		{
				value:'projectName',
				label:'项目名称'
			},
			{
				value:'constructUnit',
				label:'项目法人'
			},
			{
				value:'chargeDepartment',
				label:'主管单位'
			},
			{
				value:'projectScale',
				label:'建设规模'
			}
		],
		years:[],
		fileTitleOptions:[],
		importantProjectDto: {
			province: [],
			city: [],
			area: [],
			year:[],
			fileTitle:[],
			buildingProjectType:[],
			keywordStr:['projectName'],
			keyword:'',
			projectLevel:'',
		},
		startMoney: "",
		endMoney: "",
		transactionPriceShowPopper: false,
		projectTypeList:[],
		transactionPriceOptions: [
			{
				value: [0, 20000],
				label: "2亿以下",
			},
			{
				value: [20000, ""],
				label: "2亿以上",
			},
			{
				value: [50000, ""],
				label: "5亿以上",
			},
			{
				value: [80000, ""],
				label: "8亿以上",
			},
			{
				value: [100000, ""],
				label: "10亿以上",
			},
		],
		showNum:10,
		importantProjectDto: {
			province: [],
			city: [],
			area: [],
			year:[],
			fileTitle:[],
			buildingProjectType:[],
			keywordStr:['projectName'],
			keyword:'',
			projectLevel:'',
		},
		provinceText:[],
		pageFlag: true,
		conditionsArr: [],
		tableData:[],
		domicile:[],
		total:0,
		page: 1,
		limit: 20,
        dataEXCEL:{}
	};
  },
  mounted() {
    this.addressListfn();
	this.search();
	this.getComdtion();
	this.getImportantSelect();
  },
  methods: { 
	getComdtion(){
		api.getImportantCondition().then(res=>{
			if(res.code==200){
				this.years = res.data.year;
				this.projectTypeList = res.data.type;
			}
		})
	},
	changeYear(){
		this.fileTitleOptions = [];
		if(this.importantProjectDto.year.length){
			this.getImportantSelect()
		}
	},
	getImportantSelect(){
		let data = {
			year:this.importantProjectDto.year.join(','),
			province:this.importantProjectDto.province.join(','),
			city:this.importantProjectDto.city.join(','),
			area:this.importantProjectDto.area.join(','),
		}
		api.getImportantSelect(data).then(res=>{
			if(res.code==200){
				this.fileTitleOptions = res.data
			}
		})
	},
    refresh(value) {
      if(value) {
        this.$router.go(0)
      }
    },
    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.importantProjectDto));
      data.province = data.province.join(",");
      data.city = data.city.join(",");
      data.area = data.area.join(",");
      data.keywordStr = data.keywordStr.join(",");
      data.year = data.year.join(",");
      data.fileTitle = data.fileTitle.join(",");
      data.buildingProjectType = data.buildingProjectType.join(",");
	  for(var i in data){
		if(!data[i]){
			delete data[i]
		}
	  }
      let params = {
        page: {
          page: this.page,
          limit: this.limit,
          field: this.field,
		  "order": "desc"
        },
        importantProjectDto: data,
      };
	  if(exportFlag){
		this.dataEXCEL = params
		if(this.total > 2000){
			this.dataEXCEL.page.limit = 2000;
		}else {
			this.dataEXCEL.page.limit = this.total;
		}
		this.$download.exportByPost('/radar/export/important',this.dataEXCEL,'重点项目清单.xlsx');
	  }else{
		api.getImportantPage(params).then(res=>{
			this.isSkeleton = false;
			if (res.code==200) {
				this.tableData=res.data.list;
				this.total=res.data.total;
			}else{
				this.$message.error(res.msg)
			}
		}).catch(error=>{
			
		});

	  }
      
    },
	getUipIdByCid(companyId){
		var params=[companyId]
		api.getUipIdByCid(params).then(res=>{
			if (res.code==200) {
				if(res.data&&res.data.length>0&&res.data[0].uipId){
					this.$router.push({path: '/enterprise/'+this.encodeStr(companyId)})
				}else{
					this.$router.push({path: '/company/'+this.encodeStr(companyId)})
				}
			}
		 }).catch(error=>{
		 	
		 });
	},
    //关闭支付弹窗
	resolve(value) {
		if (value) {
			this.$router.go(0)
		}
	},
    changeMoney(text) {
		if (
			this.importantProjectDto.startMoney &&
			this.importantProjectDto.endMoney &&
			Number(this.importantProjectDto.startMoney) >
			Number(this.importantProjectDto.endMoney)
		) {
			this.$message.warning("最低金额不能大于最高金额！");
			text == "start" ?
				(this.importantProjectDto.startMoney = "") :
				(this.importantProjectDto.endMoney = "");
		}
	},
    reloadPage() {
      this.pageFlag = false;
      this.$nextTick(() => {
        this.pageFlag = true;
      });
    },
    handleCurrentChange(page) {
		if(page>500){
			this.$message.warning(`对不起，最多只能访问500页`);
			this.reloadPage()
		}else{
			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 = [],
        area = [];
      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 && area.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.importantProjectDto));
      obj.province = province;
      obj.city = city;
      obj.area = area;
      this.importantProjectDto = obj;
	  this.fileTitleOptions = [];
	  if(this.domicile.length){
		this.getImportantSelect()
	  }
    },
    transactionPricehandleCommand(command) {
		if (command) {
			this.$refs.transactionPriceShowPopper.hide();
			var obj = JSON.parse(JSON.stringify(this.importantProjectDto));
			this.startMoney = "";
			this.endMoney = "";
			if (command == "不限") {
				obj.startMoney = "";
				obj.endMoney = "";
			} else {
				obj.startMoney = command[0];
				obj.endMoney = command[1];
			}
			this.importantProjectDto = obj;
		}
			},
      transactionPriceCancel() {
		this.transactionPriceShowPopper = false;
		this.$refs.transactionPriceShowPopper.hide();
	  },
      transactionPricePopperConfirm() {
		if (
			this.startMoney &&
			this.endMoney &&
			!(Number(this.endMoney) > Number(this.startMoney))
		) {
			return this.$message.warning("最小值必须小于最大值,请重新输入！");
		}
		this.transactionPriceShowPopper = false;
		var obj = JSON.parse(JSON.stringify(this.importantProjectDto));
		obj.startMoney = this.startMoney;
		obj.endMoney = this.endMoney;
		this.importantProjectDto = obj;
		this.$refs.transactionPriceShowPopper.hide();
			},
      transactionPricehandleCommand(command) {
		if (command) {
			this.$refs.transactionPriceShowPopper.hide();
			var obj = JSON.parse(JSON.stringify(this.importantProjectDto));
			this.startMoney = "";
			this.endMoney = "";
			if (command == "不限") {
				obj.startMoney = "";
				obj.endMoney = "";
			} else {
				obj.startMoney = command[0];
				obj.endMoney = command[1];
			}
			this.importantProjectDto = 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;
    },
    
    
   
    reset() {
      Object.assign(this.$data, this.$options.data.call(this)); //重置data
      this.init();
      this.$emit("reset");
    },
    init(){
      this.search();
      this.addressListfn();
	  this.getComdtion();
    },
    handsequencingList(index) {
		this.fieldshow = false;
		this.field = this.fieldOptions[index].key;
		for (let i = 0; i < this.fieldOptions.length; i++) {
			this.fieldOptions[i].status = false;
		}
		this.fieldText = this.fieldOptions[index].value;
		this.fieldOptions[index].status = true;
		this.search();
	},
  },
};
</script>
<style lang="scss" scoped>
	
	.content{
	  padding: 0px 16px;
	  padding-top: 16px;
	  border-radius: 4px 4px 4px 4px;
	   background: #FFFFFF;
	   .content_item{
		   padding-top: 20px;
		   display: flex;
		   align-items: baseline;
	       .label{
	            width: 84px;
				font-size: 14px;
				font-weight: 400;
				color: rgba(35,35,35,0.8);
	       }
	       .content_right{
	           .ename_input{
	               width: 240px;
	               margin-right: 20px;
	           }
			   .keyword_checkbox{
					margin-top: 6px;
			   }
			   .el-checkbox-group{
					display: inline-block;
			   }
			   .checkbox_1122{
					width: 1122px;
					margin-right: 6px;
			   }
			   .el-checkbox{
					margin-right: 24px;
					margin-bottom: 16px;
					::v-deep .el-checkbox__label{
						padding-left: 8px;
					}
			   }
			   .more{
					font-size: 12px;
					cursor: pointer;
					color: #0081FF;
					img{
						width: 6px;
						margin-bottom: 2px;
						height: 4px;
						margin-left: 4px;
					}
			   }
			   .more1{
				img{
					transform: rotate(180deg);
				}
			   }
	       }
		   
		 .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_item1{
		display: block;
	   }
	   .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;
				}
				.excel{
					cursor: pointer;
				}
			}
			.bottomlist-title-left{
				display: inline-flex;;
				align-items: center;
				.title-left{
					border-left:2px solid #445781;
					padding-left:8px;
					padding-right:32px;
					font-size: 16px;
					height:16px;
					line-height: 16px;
					font-weight: bold;
					color: #232323;
				}
			}
		}
		.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: 8px;
				.list-label{
					background: #F3F3FF;
					color: #8491E8;
					border-radius: 1px 1px 1px 1px;
					padding: 3px 7px;
					font-size: 12px;
					margin-right: 8px;
				}
			}
			
			
			.list-content{
				margin-top: 8px;
				display: flex;
				justify-content: start;
				align-items: center;
				
				.list-content-text{
					display: flex;
					justify-content: start;
					align-items: baseline;
					margin-right: 32px;
					font-size: 14px;
					
					span:first-child{
						font-weight: 400;
						color: rgba(35,35,35,0.4);
						line-height: 20px
					}
					span:last-child{
						font-weight: 400;
						color: rgba(35,35,35,0.8);
						line-height: 20px
					}
					.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;
					
				}
			}
			.list-content1{
				margin-top: 12px;
			}
			
			
		}
		.bottomlist-list:hover{
			background: #F6F9FC;
			cursor: pointer;
		}
		.pagination{
			padding: 14px ;
		   .el-pagination{
			   float: right;
		   }
		}
	}
	.jabph_popper_box{
    left: 101px;
  }
	
</style>

