<template>
  <!-- <div style="width:calc(100% - 100px);" @click="showlist = false"> -->
    
        <div  class="app-container enterprise_contatiner"  @click="showlist = false">
            <div class="title_wrap">
                <div class="enterprise_title">
                    查集团户
                </div>
            </div>
            <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 v-if="item.logoUrl" :src="item.logoUrl" alt="" >
                                <div class="logo" v-else :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 id="anchorRef_wrap">
                <div class="contetn_wrap">
                    <div class="wrap" id="anchorRef" @scroll="handleScroll">
                        <template  v-if="activeIndex==0">
                            <span class="count">共{{ total }}条</span><el-popover style="margin-left:8px;position: relative;top: 2px;color:#515a6e;" trigger="hover" content="央企集团数据包含国资委及财政部公示的央企名录。" placement="right"><i slot="reference" class="el-icon-warning-outline"></i></el-popover>
                            <div >
                                <div  class="infinite-list-item" v-for="(item,index) in companData" @click="selCompany(item)" :key="index">
                                    <img v-if="item.logoUrl" :src="item.logoUrl" alt="" >
                                    <div v-else 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="'anchor-'+index"   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 v-if="item1.logoUrl" :src="item1.logoUrl" alt="" >
                                        <div v-else 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="anchor-0" >
                                <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 v-if="item.logoUrl" :src="item.logoUrl" alt="" >
                                        <div v-else 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="'anchor-'+(index+1)"   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 v-if="item1.logoUrl" :src="item1.logoUrl" alt="" >
                                        <div v-else 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="'anchor-'+index"   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 v-if="item1.logoUrl" :src="item1.logoUrl" alt="" >
                                        <div v-else 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">
                        <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>
        </div>
</template>

<script>
import api from '@/api/enterpriseData/enterpriseData.js';
import skeleton from '@/views/project/projectList/component/skeleton'
import "@/assets/styles/public.css";

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,
        }
    },
    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){
                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){
                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){
                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()
            }

        },
      // 滚动监听器
      handleScroll(i) {
        // 获取所有锚点元素
        const navContents = document.querySelectorAll('.child-wrap')
        // 所有锚点元素的 offsetTop
        const offsetTopArr = []
        navContents.forEach((item) => {
          offsetTopArr.push(item.offsetTop)
        })
        // 获取当前文档流的 scrollTop
        const scrollTop = document.getElementById('anchorRef').scrollTop
        offsetTopArr.forEach((item, index) => {
          if (scrollTop >= item) {
            this.anchorIndex = index
          }
        })
      },
        anchorClick(i) {
            var a = document.getElementById('anchor-'+i)
            a.scrollIntoView()
            document.body.scrollTop += -56
            document.documentElement.scrollTop += -56
            setTimeout(() => {
                this.anchorIndex = i
            }, 1);
		},
        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;
        min-width: 1580px;

	   .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;
		}
	   }
	}
    #anchorRef_wrap{
        background: #FFFFFF;
    }
    .contetn_wrap{
        position: relative;
        min-width: 1668px;

        .wrap{
            margin-top: 12px;
            min-width: 1628px;
            overflow: auto;
            background: #FFFFFF;
            border-radius: 4px 4px 4px 4px;
            padding: 16px;
            max-height: 700px;
            .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: absolute;
			top: 48px;
			right: 10px;
			.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;
                    width: 58px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
					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{
            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>