<template>
  <!-- <div style="width:calc(100% - 100px);" @click="showlist = false"> -->
  <div  @click="showlist = false">
    <div class="content">
        <div class="content_item">
			<div class="content_right">
                <el-input type="text" class="ename_input" placeholder="请输入集团名称查询" clearable v-model="companyName"   @input="search(1)"><div slot="append" class="btn-search" @click="selCompany()">搜索</div></el-input>
                <div class="infinite-list" v-if="showlist" id="box" v-infinite-scroll="load" style="overflow:auto">
                    <div class="empty" v-if="searchList.length<1">
                        <img src="@/assets/images/kong.png" alt="">
                        <p>抱歉，没找到相关数据</p>
                        <p class="p1">建议调整关键词或筛选条件，重新搜索</p>
                    </div>
                    <div v-else class="infinite-list-item" v-for="(item,index) in searchList" @click="selCompany(item)" :key="index">
                        <!-- <img :src="item.logo" alt="" > -->
                        <div class="logo" :style="{background:colors[index%5]}">{{ item.combineMemberName.slice(0,2) }}</div>
                        <div>
                            <span style="font-size: 14px;"  v-html="item.combineName" ></span>
                            <div style="height:22px;line-height: 22px;"><span class="infinite-label">集团成员：</span>{{ item.combineMemberNum }}</div>
                            <div ><span class="infinite-label">集团本身：</span>{{ item.combineMemberName }}</div>
                        </div>
                    </div>
                </div>
                <div style="margin-top: 16px;"><span class="label">集团性质</span><span class="group_item" :class="index==activeIndex?'active':''" @click="groupClick(index)" v-for="(item,index) in groups" :key="index">{{ item }}</span></div>
            </div>
        </div>
    </div>
    <div style="position: relative;">
        <div class="wrap">
            <template  v-if="activeIndex==0">
                <div class="count">共{{ total }}条</div>
                <div >
                    <div  class="infinite-list-item" v-for="(item,index) in companData" @click="selCompany(item)" :key="index">
                        <!-- <img :src="item.logo" alt="" > -->
                        <div class="logo" :style="{background:colors[index%5]}">{{ item.combineMemberName.slice(0,2) }}</div>
                        <div style="float: left;">
                            <span class="name"  v-html="item.combineName" ></span>
                            <div style="height:20px;line-height: 20px;"><span class="infinite-label">集团成员：</span>{{ item.combineMemberNum }}</div>
                            <div class="name1"><span class="infinite-label">集团本身：</span>{{ item.combineMemberName }}</div>
                        </div>
                    </div>
                </div>
            </template>
            <template v-if="activeIndex==1">
                <div class="count">共{{ childList.length }}条</div>
                <div class="child-wrap" :id="item.type"  v-for="(item,index) in childList" :key="index">
                    <div class="anchor"></div>
                    <div class="count1" >{{item.type}}<span> {{ item.total }}</span></div>
                    <div :key="index">
                        <div  class="infinite-list-item" v-for="(item1,index1) in item.list" @click="selCompany(item1)" :key="index1+'i'">
                            <!-- <img :src="item1.logo" alt="" > -->
                            <div class="logo" :style="{background:colors[index1%5]}">{{ item1.combineMemberName.slice(0,2) }}</div>
                            <div style="float: left;">
                                <span class="name"  v-html="item1.combineName" ></span>
                                <div style="height:20px;line-height: 20px;"><span class="infinite-label">集团成员：</span>{{ item1.combineMemberNum }}</div>
                                <div class="name1"><span class="infinite-label">集团本身：</span>{{ item1.combineMemberName }}</div>
                            </div>
                        </div>
                    </div>
                    <el-divider v-if="item.total>12" >更多<span></span></el-divider>
                </div>
            </template>
            <template v-if="activeIndex==2">
                <div v-if="activeIndex==2" class="province_wrap">
                    <span class="province_item" @click="provinceClick(index)" :class="provinceIndex==index?'active':''" v-for="(item,index) in provinces" :key="index">{{ item.nameSimple }}</span>
                </div>
                <div class="anchor"></div>
                    <div class="count1" >{{provinceId=='110000'||provinceId=='120000'||provinceId=='500000'||provinceId=='310000'?'市':'省'}}管国企<span> {{ localList.total }}</span></div>
                <div class="child-wrap"  >
                    <div >
                        <div  class="infinite-list-item" v-for="(item,index) in localList.local" :key="index" @click="selCompany(item)" >
                            <!-- <img :src="item.logo" alt="" > -->
                            <div class="logo" :style="{background:colors[index%5]}">{{ item.combineMemberName.slice(0,2) }}</div>
                            <div style="float: left;">
                                <span class="name"  v-html="item.combineName" ></span>
                                <div style="height:20px;line-height: 20px;"><span class="infinite-label">集团成员：</span>{{ item.combineMemberNum }}</div>
                                <div class="name1"><span class="infinite-label">集团本身：</span>{{ item.combineMemberName }}</div>
                            </div>
                        </div>
                    </div>
                    <el-divider v-if="localList.total>12" >更多<span></span></el-divider>
                </div>
                <div class="child-wrap" :id="item.type"  v-for="(item,index) in localList1" :key="index">
                    <div class="anchor"></div>
                    <div class="count1" >{{item.address}}<span> {{ item.total }}</span></div>
                    <div :key="index">
                        <div  class="infinite-list-item" v-for="(item1,index1) in item.result" @click="selCompany(item1)" :key="index1+'i'">
                            <!-- <img :src="item1.logo" alt="" > -->
                            <div class="logo" :style="{background:colors[index1%5]}">{{ item1.combineMemberName.slice(0,2) }}</div>
                            <div style="float: left;">
                                <span class="name"  v-html="item1.combineName" ></span>
                                <div style="height:20px;line-height: 20px;"><span class="infinite-label">集团成员：</span>{{ item1.combineMemberNum }}</div>
                                <div class="name1"><span class="infinite-label">集团本身：</span>{{ item1.combineMemberName }}</div>
                            </div>
                        </div>
                    </div>
                    <el-divider v-if="item.total>12" >更多<span></span></el-divider>
                </div>

            </template>
            <template v-if="activeIndex==3">
                <div class="count">共{{ childList.length }}条</div>
                <div class="child-wrap" :id="item.type"  v-for="(item,index) in childList" :key="index">
                    <div class="anchor"></div>
                    <div class="count1" >{{item.type}}<span> {{ item.total }}</span></div>
                    <div :key="index">
                        <div  class="infinite-list-item" v-for="(item1,index1) in item.list" @click="selCompany(item1)" :key="index1+'i'">
                            <!-- <img :src="item1.logo" alt="" > -->
                            <div class="logo" :style="{background:colors[index1%5]}">{{ item1.combineMemberName.slice(0,2) }}</div>
                            <div style="float: left;">
                                <span class="name"  v-html="item1.combineName" ></span>
                                <div style="height:20px;line-height: 20px;"><span class="infinite-label">集团成员：</span>{{ item1.combineMemberNum }}</div>
                                <div class="name1"><span class="infinite-label">集团本身：</span>{{ item1.combineMemberName }}</div>
                            </div>
                        </div>
                    </div>
                    <el-divider v-if="item.total>12" >更多<span></span></el-divider>
                </div>
            </template>
            
        </div>
        <div v-if="activeIndex==1||activeIndex==3" class="anchor_box" >
            <div class="anchor_wrap">
                <div class="anchor_item" v-for="(item,i) in childList"
                    :class="anchorIndex==i?'active_anchor_item':''" :key="i" @click="anchorClick(i)">
                    {{item.type}}
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import api from '@/api/enterpriseData/enterpriseData.js';
export default {
    name: 'Group',
    data(){
        return{
            childList:[],
            localList:[],
            localList1:[],
            anchorIndex: 0,
            companyName:'',
            showlist:false,
            activeIndex:0,
            provinceIndex:0,
            provinces:[],
            total:12,
            isscroll:false,
            groups:['央企','央企子集团','地方国企','民营集团'],
            companData:[],
            searchList:[],
            page:1,
			colors: ['#42DB9A', '#31C0D9', '#9A42DB', '#428EDB', '#DBAC42'],
            provinceId:110000
        }
    },
    beforeDestroy() {
		if (process.browser) {
			document.removeEventListener("scroll", this.handleScroll);
		}
	},
    created(){
        api.region(100000).then(res=>{
            if(res.code==200){
                this.provinces = res.data
            }
        })
        this.getCompany()

    },
    methods:{
        provinceClick(index){
            this.provinceIndex = index;
            this.provinceId = this.provinces[index].id;
            this.groupClick(2)
        },
        groupClick(index){
            this.activeIndex=index;
            if(index==1){
                this.listenerFunction();

                api.centralEnterprseChild().then(res=>{
                    if(res.code==200){
                        this.childList = res.data
                    }
                })
            }else if(index==2){
                if (process.browser) {
                    document.removeEventListener("scroll", this.handleScroll);
                }
                let data = {
                    provinceId:this.provinceId
                }
                api.centralEnterprselocal(data).then(res=>{
                    if(res.code==200){
                        this.localList = res.data.localList;
                        this.localList1 = res.data.list;
                    }
                })
            }else if(index==3){
                this.listenerFunction();
                
                api.centralEnterprsesocial().then(res=>{
                    if(res.code==200){
                        this.childList = res.data
                    }
                })
            }

        },
        listenerFunction(e) {
			if (process.browser) {
				document.addEventListener('scroll', this.handleScroll, true);
			}
		},
        offsetHeightFn(){
            let arr = []
            for(var i in this.childList){
                arr.push(document.getElementById(this.childList[i].type).offsetHeight)
            }
            return arr
        },
        handleScroll() {
            for(var i in this.childList){
                if (window.scrollY > document.getElementById(this.childList[i].type).offsetTop+144) {
                    this.anchorIndex = i
                }
            }
        },
        anchorTopFn(i) {
        	var top = 0
        	for (var j = 0; j < i; j++) {
        		if (document.getElementById(this.childList[j].type)) {
                    top = document.getElementById(this.childList[j].type).offsetHeight
        		}
        	}
        	return top
        },
        anchorClick(i) {
            this.anchorIndex = i
            var a = document.getElementById(this.childList[i].type)
            if (a) {
            	a.scrollIntoView()
                document.body.scrollTop += -56
            	document.documentElement.scrollTop += -56

            }
		},
        getCompany(){
            api.centralEnterprse().then(res=>{
                if(res.code==200){
                    this.companData = res.data.list;
                    this.total = res.data.total
                }
            })
        },
        search(page=1){
            this.page = page;
            if(!this.companyName.trim()){
                return this.$message.warning("请输入集团名称")
            }
            let data = {
                keyword:this.companyName,
                limit:5,
                page:page
            }
            api.searchCentralEnterprse(data).then(res=>{
                this.showlist = true;
                if(res.code==200){
                    this.searchList = (page==1?res.data.list:this.searchList.concat(res.data.list));
                    if(res.data.list.length>0){
                        this.isscroll = true
                    }else{
                        this.isscroll = false
                    }
                }
            })
        },
        load(){
            if(this.isscroll){
                this.page++
                this.search(this.page)
            }
        },
        selCompany(item = this.searchList[0]){
            this.$router.push({path:`/groupAccount/${item.combineId}?name=${item.combineName.replace(new RegExp("<font color='#FF204E'>", 'g'),'').replace(new RegExp("</font>", 'g'),'')}`})
        },
    }
}
</script>

<style lang="scss" scoped>
	.content{
        padding: 24px 16px;
        border-radius: 4px 4px 4px 4px;
	    background: #FFFFFF;
        font-size: 14px;
	   .content_item{
	       .content_right{
	           .ename_input{
	               width: 599px;
	               margin-right: 20px;
	           }
			   .el-input-group{
				   display: flex;
				   align-items: center;
			   }
			  ::v-deep  .el-input-group__append{
				   padding:0px;
				   line-height: 34px;
				   font-weight: 400;
				   color: #0081FF;
				   height: 34px;
				   width: 80px;
				   background: #F5F5F5;
				   border-radius: 0px 0px 0px 0px;
				   text-align: center;
				   cursor: pointer;
			   }
			   .label{
                    color: rgba(35,35,35,0.8);
                    margin-right: 14px;
               }
			  .group_item{
                height: 22px;
                display: inline-block;
                line-height: 22px;
                padding: 0 10px;
                border-radius:4px;
                cursor: pointer;
                color: #232323;
              }
              .active{
                background: #F3F4F5;
                color: #0081FF;
              }
              .infinite-list{
                position: absolute;
                width: 529px;
                max-height: 292px;
                background: #FFFFFF;
                border-radius: 0px 0px 4px 4px;
                border: 1px solid #F3F3F3;
                border-bottom: 0;
                z-index: 1;
                .infinite-list-item{
                    font-size: 12px;
                    padding: 8px;
                    cursor: pointer;
                    color: #333333;
                    display: flex;
                    border-bottom: 1px solid #F5FAFF;
                    img,.logo{
                        color: #FFFFFF;
                        width: 56px;
                        height: 56px;
                        line-height: 56px;
                        margin-right: 8px;
                        font-size: 16px;
                        text-align: center;
                        float: left;
                    }
                    .infinite-label{
                        color: #999999;
                        margin-right: 0;
                        margin-top: 4px;
                    }
                    &:hover{
                        background: #F5FAFF;
                    }
                }
                .empty{
                    height: 162px;
                    background: #FFFFFF;
                    border-radius: 0px 0px 4px 4px;
                    border: 1px solid #F3F3F3;
                    text-align: center;
                    img{
                        margin-top: 32px;
                        width: 50px;
                        height: 50px;
                    }
                    p{
                        color: #333333;
                        font-size: 12px;
                        margin-top: 16px;
                    }
                    .p1{
                        color: #999999;
                        margin-top: 5px;
                    }
                }
              }
	       }
		::v-deep .el-input-group__prepend{
			padding: 0 8px;
		}
	   }
	}
    .wrap{
        margin-top: 12px;
        // max-height: 708px;
        // height: calc(100% - 200px);
        overflow: auto;
        background: #FFFFFF;
        border-radius: 4px 4px 4px 4px;
        padding: 16px;
            .anchor{
                height: 24px;
            }
            .count1{
                font-size: 16px;
                color: #232323;
                span{
                    color: rgba(35, 35, 35, 0.40);
                }
            }
        .infinite-list-item{
            margin-right: 16px;
            margin-top: 16px;
            width: 383px;
            height: 90px;
            background: #FFFFFF;
            border-radius: 0px 0px 0px 0px;
            border: 1px solid #EFEFEF;
            font-size: 12px;
            padding: 8px;
            cursor: pointer;
            color: #333333;
            display: inline-block;
            img,.logo{
                color: #FFFFFF;
                width: 56px;
                height: 56px;
                line-height: 56px;
                margin-right: 8px;
                font-size: 16px;
                text-align: center;
                float: left;
            }
            .name{
                width: 283px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                color: #232323;
                font-size: 16px;
                height: 16px;
                line-height: 16px;
                display: inline-block;
            }
            .name1{
                width: 283px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .infinite-label{
                color: #999999;
                margin-right: 0;
                margin-top: 4px;
            }
            &:hover{
                background: #F5FAFF;
            }
                }
        .province_wrap{
            .province_item{
                width: 52px;
                height: 28px;
                line-height: 28px;
                display: inline-block;
                background: #F6F7FC;
                border-radius: 2px;
                font-size: 14px;
                cursor: pointer;
                margin-right: 16px;
                text-align: center;
                margin-bottom: 16px;
            }
            .active{
                background: #0081FF;
                color: #FFFFFF;
            }
        }
    }
    .anchor_box {
			position: fixed;
			top: 298px;
			right: 38px;
			.anchor_wrap {
				color: #999999;
				font-size: 14px;
                border-left: 2px solid #EFEFEF;
				.anchor_item {
					height: 20px;
                    font-size: 12px;
                    padding-left: 8px;
					line-height: 20px;
					cursor: pointer;
					position: relative;
					box-sizing: border-box;
					&:hover {
						color: #3181FA;
					}
				}

				.active_anchor_item {
					color: #3181FA;
                    margin-left: -2px;
					border-left: 2px solid #1673FA;
				}
			}
		}
        ::v-deep .el-divider__text{
            cursor: pointer;
            span{
                display: inline-block;
                width: 16px;
                height: 16px;
                position: relative;
                top: 2px;
                background: url('../../../../assets/images/down.png');
                background-size:  16px 16px;
            }
                &:hover{
                    color: #0081FF;
                    span{
                        background: url('../../../../assets/images/down1.png');
                        background-size:  16px 16px;
                    }
                }
            }
</style>