<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="searchClick()">搜索</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,4) }}</div>
                                <div>
                                    <span style="font-size: 14px;color: #0384FA;"  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>
        <skeleton style="margin-left:16px;" v-if="isSkeleton"></skeleton>

            <div v-else 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,4) }}</div>
                                <div style="float: left;">
                                    <span class="name"  v-html="item.combineName" ></span>
                                    <div style="height:28px;line-height: 28px;"><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">共{{ childListTotal }}条</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,4) }}</div>
                                    <div style="float: left;">
                                        <span class="name"  v-html="item1.combineName" ></span>
                                        <div style="height:28px;line-height: 28px;"><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>item.page*12" @click="moreClick1(item.type,index)">更多<span></span></el-divider>
                        </div>
                    </template>
                    <!-- 地方国企 -->
                    <template v-if="activeIndex==2">
                        <div  class="province_wrap">
                            <template v-for="(item,index) in provinces">
                                <span class="province_item" @click="provinceClick(index)" :class="provinceIndex==index?'active':''" v-if="item.id!=710000&&item.id!=810000&&item.id!=820000&&item.id!=900000" :key="index">{{ item.nameSimple }}</span>
                            </template>
                        </div>
                        <div class="count">共{{ localList1Total }}条</div>
                        <!-- 省管国企 -->
                        <div class="child-wrap"  id="管国企">
                            <div class="anchor"></div>
                            <div class="count1" >{{provinceId=='110000'||provinceId=='120000'||provinceId=='500000'||provinceId=='310000'?'市':'省'}}管国企<span> {{ localList.total }}</span></div>
                            <template v-for="(item,index) in localList.local">
                                <div  class="infinite-list-item" v-if="index<localListPage*12" :key="index" @click="selCompany(item)" >
                                    <!-- <img :src="item.logo" alt="" > -->
                                    <div class="logo" :style="{background:colors[index%5]}">{{ item.combineMemberName.slice(0,4) }}</div>
                                    <div style="float: left;">
                                        <span class="name"  v-html="item.combineName" ></span>
                                        <div style="height:28px;line-height: 28px;"><span class="infinite-label">集团成员：</span>{{ item.combineMemberNum }}</div>
                                        <div class="name1"><span class="infinite-label">集团本身：</span>{{ item.combineMemberName }}</div>
                                    </div>
                                </div>
                            </template>
                            <el-divider v-if="localList.total>localListPage*12" @click="localListPage++">更多<span></span></el-divider>
                        </div>
                        <!-- 市区国企 -->
                        <div class="child-wrap" :id="item.address"  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,4) }}</div>
                                    <div style="float: left;">
                                        <span class="name"  v-html="item1.combineName" ></span>
                                        <div style="height:28px;line-height: 28px;"><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>item.page*12" @click="moreClick2(item.addressId,index)">更多<span></span></el-divider>
                        </div>

                    </template>
                    <!-- 民营集团 -->
                    <template v-if="activeIndex==3">
                        <div class="count">共{{ childListTotal }}条</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,4) }}</div>
                                    <div style="float: left;">
                                        <span class="name"  v-html="item1.combineName" ></span>
                                        <div style="height:28px;line-height: 28px;"><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>item.page*12" @click="moreClick3(item.type,index)">更多<span></span></el-divider>
                        </div>
                    </template>
                    
                </div>
                <div v-if="activeIndex!=0" class="anchor_box" :class="activeIndex==2?'anchor_box1':''">
                    <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||(item.address=='管国企'?provinceId=='110000'||provinceId=='120000'||provinceId=='500000'||provinceId=='310000'?'市管国企':'省管国企':item.address)}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
</template>

<script>
import api from '@/api/enterpriseData/enterpriseData.js';
import skeleton from '@/views/project/projectList/component/skeleton'

export default {
    name: 'Group',
    components: {
        skeleton
    },
    data(){
        return{
            isSkeleton:true,
            childList:[],
            localList:{},
            localListPage:1,
            localList1:[],
            localList1Total:0,
            anchorIndex: 0,
            companyName:'',
            showlist:false,
            activeIndex:0,
            childListTotal:0,
            provinceIndex:0,
            provinces:[],
            total:0,
            isscroll:false,
            groups:['央企','央企子集团','地方国企','民营集团'],
            companData:[],
            searchList:[],
            page:1,
			colors: ['#99BE81', '#76B4D4', '#6E89DD', '#8F8DD2', '#C4A89F'],
            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:{
        moreClick1(type,index){
            this.childList[index].page++
            let data = {
                page:this.childList[index].page,
                limit:12,
                type:type
            }
            api.centralEnterprseChildPage(data).then(res=>{
                if(res.code==200){
                    this.isSkeleton = false;
                    this.childList[index].list.push(...res.data.list)
                }
            })
        },
        moreClick2(addressId,index){
            this.localList1[index].page++
            let data = {
                page:this.localList1[index].page,
                limit:12,
                addressId:addressId
            }
            api.centralEnterprselocalPage(data).then(res=>{
                if(res.code==200){
                    this.isSkeleton = false;
                    this.localList1[index].result.push(...res.data.list)
                }
            })
        },
        moreClick3(type,index){
            this.childList[index].page++
            let data = {
                page:this.childList[index].page,
                limit:12,
                type:type
            }
            api.centralEnterprsesocialPage(data).then(res=>{
                if(res.code==200){
                    this.isSkeleton = false;
                    this.childList[index].list.push(...res.data.list)
                }
            })
        },
        provinceClick(index){
            this.provinceIndex = index;
            this.provinceId = this.provinces[index].id;
            this.groupClick(2)
        },
        groupClick(index){
            this.activeIndex=index;
            this.isSkeleton = true;
            if(index==1){
                this.listenerFunction();
                api.centralEnterprseChild().then(res=>{
                    if(res.code==200){
                        this.isSkeleton = false;
                        if(res.data.list.length>0){
                            res.data.list.map(item=>{
                                item.page=1
                            })
                        }
                        this.childList = res.data.list;
                        this.childListTotal = res.data.total;
                    }
                })
            }else if(index==2){
                if (process.browser) {
                    document.removeEventListener("scroll", this.handleScroll);
                }
                let data = {
                    provinceId:this.provinceId
                }
                api.centralEnterprselocal(data).then(res=>{
                    this.isSkeleton = false;
                    if(res.code==200){
                        this.localList = res.data.localList;
                        this.localListPage = 1;
                        if(res.data.list.length>0){
                            res.data.list.map(item=>{
                                item.page=1
                            })
                        }
                        this.localList1 = res.data.list;
                        this.localList1Total = res.data.total;
                        this.childList = [{address:'管国企'}].concat(this.localList1)
                    }
                })
            }else if(index==3){
                this.listenerFunction();
                
                api.centralEnterprsesocial().then(res=>{
                    if(res.code==200){
                        this.isSkeleton = false;
                        if(res.data.list.length>0){
                            res.data.list.map(item=>{
                                item.page=1
                            })
                        }
                        this.childList = res.data.list;
                        this.childListTotal = res.data.total;
                    }
                })
            }else{
                this.getCompany()
            }

        },
        listenerFunction(e) {
			if (process.browser) {
				document.addEventListener('scroll', this.handleScroll, true);
			}
		},
        handleScroll() {
            for(var i in this.childList){
                if(this.childList[i].type&&window.scrollY > document.getElementById(this.childList[i].type).offsetTop+144||window.scrollY > document.getElementById(this.childList[i].address).offsetTop+244){
                    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
        		}
        		if (document.getElementById(this.childList[j].address)) {
                    top = document.getElementById(this.childList[j].address).offsetHeight
        		}
        	}
        	return top
        },
        anchorClick(i) {
            this.anchorIndex = i
            var a = document.getElementById(this.childList[i].type)||document.getElementById(this.childList[i].address)
            if (a) {
            	a.scrollIntoView()
                document.body.scrollTop += -56
            	document.documentElement.scrollTop += -56

            }
		},
        getCompany(){
            api.centralEnterprse().then(res=>{
                if(res.code==200){
                    this.isSkeleton = false;
                    this.companData = res.data.list;
                    this.total = res.data.total
                }
            })
        },
        search(page=1){
            this.page = page;
            if(!this.companyName.trim()){
                return 
            }
            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)
            }
        },
        searchClick(){
            if(!this.companyName){
                return this.$message.warning("抱歉，没找到相关数据,建议调整关键词或筛选条件，重新搜索")
            }
            let 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'),'')}`})
        },
        selCompany(item = this.searchList[0]){
            if(!item){
                return this.$message.warning("抱歉，没找到相关数据,建议调整关键词或筛选条件，重新搜索")
            }
            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;
                   border-radius: 2px 0px 0px 2px;
	           }
			   .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;
                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;
                        border-radius: 4px;
                        height: 56px;
                        box-sizing: border-box;
                        padding: 4px 12px;
                        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);
            }
        }
        .count{
            font-size: 12px;
            color: #3D3D3D;
        }
        .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: 12px;
            cursor: pointer;
            color: #333333;
            display: inline-block;
            img,.logo{
                color: #FFFFFF;
                width: 64px;
                border-radius: 4px;
                height: 64px;
                box-sizing: border-box;
                padding: 10px 12px;
                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;
				}
			}
		}
        .anchor_box1{
            top:386px;
        }
        ::v-deep .el-divider{
            width: calc(100% - 107px);
            margin-top: 12px;
            .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>