<template>
 <div :class="{
    _container:true, _mobile:isMobile
}">
     <!-- <div class="intstruction">
         请在左侧选择一个{{yGroupName}}和一个{{}}
     </div> -->
     <div :class="{map_next_select:true, _mobile:isMobile}">
        <div class="select_group_name" v-if="yGroups.length > 1">
            {{yGroupName}}
        </div>
        <div :class="{select_group:true, columned:!isMobile, _mobile:isMobile}" v-if="yGroups.length > 1">
            <!-- {{yGroups}} -->
            <div 
                v-for="(y, xind) in rankSort(yGroups)" 
                :key="xind"
                :class="{
                    select_item:true,
                    active:currY.name == y.name,
                    _mobile:isMobile
                }"
                @click="onClickY(y)"
            >
                {{y.name}}
            </div>
        </div>

        <div class="select_group_name" v-if="xGroups.length > 1">
            {{xGroupName}}
        </div>
         <div :class="{select_group:true, _mobile:isMobile}" v-if="xGroups.length > 1">
            <div 
                v-for="(x, xind) in xGroups" 
                :key="xind"
                :class="{
                    select_item:true,
                    overflow:true,
                    active:currX.name == x.name,
                    _mobile:isMobile
                }"
                @click="onClickX(x)"
            >
                {{x.name}}
            </div>
         </div>
     </div>

     <div :class="{
        map_next_display: true,
        _mobile: isMobile,
    }">
        <div :class="{map_next_display_inner:true, _mobile_left:isMobile}"
            @mouseleave="leaveBox()"
        >
            <!-- city name row -->
            <div class="display_row city_name">
                <div 
                    :class="{
                        display_cell:true, 
                        x_name:true,
                        expand:hoverX == cind,
                        current:currentCity == c
                    }"
                    :style="`min-width:28px`"
                    v-for="(c, cind) in currX.content"
                    :key="cind"
                >
                    <div class="x_name_text">
                        {{c}}
                    </div>
                    <div 
                        class="x_name_ratio"
                        style="writing-mode:lr;">
                        {{
                            (!!c)?
                            currY.content.filter(x=>x.content.includes(c)).length
                            :''
                        }}{{
                            ( (!!c) && (hoverX == cind) )? 
                            '/' + currY.content.length
                            : ''
                        }}
                    </div>
                </div>

                <!-- padding for brand name widths -->
                <div 
                style="opacity:0"
                :class="{
                    y_name:true,
                    _mobile: isMobile,
                }"
                >

                    <div class="y_name_ratio">
                    </div>
                    <div class="y_name_text">
                    </div>
                </div>

            </div>

            <!-- block rows -->
            <div 
                class="display_row"
                v-for="(b,bind) in currY.content"
                :key="bind"
            >
                <div 
                    class="display_cell display_cell_ref"
                    v-for="(c, cind) in currX.content"
                    :key="cind"
                >
                    <div 
                        :class="{
                            box:true, 
                            box_empty:c=='', 
                            filled:b.content.includes(c),
                            expandX:(hoverX == cind),
                            expandY:(hoverY == bind)
                        }"
                        @mouseenter="enterBox(bind, cind)"
                    >
                        <img src="images/square.png" alt="">
                    </div>
                </div>
                <div 
                :class="{
                    y_name:true,
                    _mobile:isMobile,
                    expand:hoverY == bind,
                    current:currentBrand == b.name
                    }"
                :title="b.name"
                >

                    <div class="y_name_ratio">
                        {{currX.content.filter(x=>b.content.includes(x)).length}}{{
                            (hoverY == bind) ?
                            '/' + currX.content.length
                            : ''
                        }}
                    </div>
                    <div class="y_name_text">
                        {{b.name}}
                    </div>
                </div>

            </div>
        </div>
        
        <div class="map_next_display_inner _mobile_right"
            v-if="isMobile"
        >
            <!-- city name row -->
            <div class="display_row city_name">
                <!-- padding for brand name widths -->
                <div 
                    style="opacity:0"
                    :class="{
                        display_cell:true, 
                        x_name:true,
                    }"
                >

                    <div class="x_name_text">
                        &nbsp;
                    </div>
                    <div class="x_name_ratio">
                        &nbsp;
                    </div>
                </div>

            </div>

            <!-- block rows -->
            <div 
                class="display_row"
                v-for="(b,bind) in currY.content"
                :key="bind"
            >
                <div 
                :class="{
                    y_name:true,
                    y_name_mobile:true,
                    expand:hoverY == bind,
                    current:currentBrand == b.name
                    }"
                :title="b.name"
                >

                    <div class="y_name_ratio">
                        {{currX.content.filter(x=>b.content.includes(x)).length}}{{
                            (hoverY == bind) ?
                            '/' + currX.content.length
                            : ''
                        }}
                    </div>
                    <div class="y_name_text">
                        {{b.name}}
                    </div>
                </div>

            </div>
        </div>
     </div>
 </div>
</template>

<script lang="ts">
import { ref, nextTick, computed, onMounted, watch} from "vue";
import { defineComponent } from 'vue'
import {debounce} from 'lodash'

export default defineComponent({
    components:{

    },
    props:{
        refresh:{
            default:0
        },
        isMobile:{
            default:false
        },
        xGroupName:{
            default:'城市'
        },
        yGroupName:{
            default:'品牌'
        },
        currentCity:{
            default:undefined
        },
        currentBrand:{
            default:undefined
        },
        xGroups:{
            default:[
                    { name: '一线城市', content:['北京','上海','广州','深圳']},
                    { name: '新一线城市', content:['北京','上海','广州','深圳']},
            ] as any[],
        },
        yGroups:{
            default:[
                {name:'安达仕', content:['深圳','厦门','上海']},
                {name:'安达仕', content:['深圳','厦门','上海']},
                {name:'安达仕', content:['深圳','厦门','上海']},
                {name:'安达仕', content:['深圳','厦门','上海']},
                {name:'安达仕', content:['深圳','厦门','上海']},
                {name:'安达仕', content:['深圳','厦门','上海']},
                {name:'安达仕', content:['深圳','厦门','上海']},
                {name:'安达仕', content:['深圳','厦门','上海']},
            ] as any[],
        },
    },
    setup(props, {emit}){

        const currX = ref({name:'',content:[]} as any)
        const currY = ref({name:'',content:[]} as any)


        const rankSort = (inArr: any[]) => {
            const _arr = inArr
            return _arr.sort((a:any, b:any)=>{
                const ranks = ['奢','豪','标','入']    
                if(a.name == "") return 1
                if(b.name == "") return -1
                return ranks.indexOf((a.name[0]))
                        - ranks.indexOf((b.name[0]))
            })
        }

        watch(()=>props.refresh, () => {
            currX.value = props.xGroups[0] || {name:'',content:[]}
            currY.value = props.yGroups[0] || {name:'',content:[]}
            updateSort()
        })

        const updateSort = () => {
            currY.value.content.sort((a:any,b:any)=>{
                const aCount = a.content.filter((x:any)=>currX.value.content.includes(x)).length
                const bCount = b.content.filter((x:any)=>currX.value.content.includes(x)).length
                if(bCount != aCount) {
                    return bCount - aCount
                }else{
                    for(let instance of currX.value.content){
                        if(
                            a.content.includes(instance)
                            && !b.content.includes(instance)
                        ){
                            return 1
                        }else if(
                            !(a.content.includes(instance))
                            && b.content.includes(instance)
                        ){
                            return -1
                        }
                    }
                }
                return 0
            })
            currX.value.content.sort((a:any,b:any)=>{
                const aCount = currY.value.content
                                .filter((x:any)=>x.content.includes(a)).length
                const bCount = currY.value.content
                                .filter((x:any)=>x.content.includes(b)).length
                // const bCount = b.content.filter(x=>currX.value.content.includes(x)).length
                if(bCount != aCount) {
                    return bCount - aCount
                }else{
                    for(let instance of currY.value.content){
                        if(
                            instance.content.includes(a)
                            && !instance.content.includes(b)
                        ){
                            return -1
                        }else if(
                            !(instance.content.includes(a))
                            && instance.content.includes(b)
                        ){
                            return 1
                        }
                    }
                }
                return 0
            })
        }

        const onClickX = (x:any) => {
            console.log('onClickX')
            currX.value = x
            updateSort()
        }
        const onClickY = (y:any) => {
            console.log('onClickY')
            currY.value = y
            updateSort()
        }

        const hoverX = ref(-1)
        const hoverY = ref(-1)
        const hoverXText = ref(-1)
        const hoverYText = ref(-1)
        
        const enterBoxDebounced = debounce((yind:number, xind:number) => {
            hoverX.value = xind
            hoverY.value = yind
        }, 50)
        const enterBoxText = (yind:number, xind:number) => {
            hoverXText.value = xind
            hoverYText.value = yind
        }
        const enterBox = (yind:number, xind:number)=>{
            enterBoxText(yind, xind)
            enterBoxDebounced(yind, xind)
        }

        const leaveBoxDebounced = debounce(() => {
            hoverX.value = -1
            hoverY.value = -1
        }, 100)
        const leaveBoxText = () => {
            hoverXText.value = -1
            hoverYText.value = -1
        }
        const leaveBox =  () => {
            leaveBoxText()
            leaveBoxDebounced()
        }



        return {
            onClickX,
            onClickY,
            currX,
            currY,
            hoverX,
            hoverY,
            hoverXText,
            hoverYText,
            enterBox,
            leaveBox,

            rankSort,
        }
    },
})
</script>

<style scoped>
._container{
    display: flex;
    flex-direction: row;
    width: calc(100% - 50px);
    position: relative;
}
._container._mobile{
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
}
.map_next_select{
    text-align: left;
    width: 140px;
    background-color:transparent;
    margin-right: 5px;
    padding-top: 37px;
    margin-left: 10px;
}
.map_next_select._mobile{
    padding-top: 30px;
    width: 100%;
}
.map_next_display{
    width: calc(100% - 140px);
    padding: auto;
    display: flex;
    flex-direction: column;
    align-items:flex-end;
    overflow-x: visible;
    overflow-y: visible;
    height: fit-content;
    min-height: 50%;
    padding-bottom: 5px;
    position:relative;
}
.map_next_display._mobile{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items:flex-start;
    overflow-y: scroll;
}
.map_next_display_inner{
    width:100%;
    display: flex;
    flex-direction: column;
    align-items:center;
    overflow-y: visible;
    position: relative;
}
.map_next_display_inner._mobile_right{
    position: absolute;
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    right: 0px;
    background-color:white
}
.map_next_display_inner._mobile_left{
    position: relative;
    width: calc(100% - 100px);
    overflow-y: scroll;
    right: 0px;
    background-color:white
}
.select_group{
    margin-bottom: 20px;  
    width: 160px;
}
.select_group.rowed{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; 
    justify-content:flex-start;
}
.select_group.columned{
    display:flex;
    flex-direction: column;
    flex-wrap: wrap; 
}
.select_group_minor{
    margin-bottom: 10px;
}

.select_group._mobile{
    display:flex;
    flex-direction: row;
    flex-wrap: wrap; 
    width: 100%;
}
.select_group_name{
    font-size: 18px;
    margin-bottom: 15px;
    font-weight: 300;
    height: 28px;
}
.select_item{
    font-size: 14px;
    font-weight: 300;
    cursor: pointer;
    line-height: 28px;
    transition: all 0.2s linear;
    background:transparent;
    width:50%;
    overflow: hidden;
}
.select_item._mobile{
    width:20%;
}
.select_item.overflow{
    overflow: visible;
    white-space:nowrap;
}
.select_item:hover{
    color: #000
}
.select_item:before{
    position: absolute;
    content:"   ";
    width:5px;
    height:5px;
    border-radius:50%;
    background: #fff;
    font-size: 30px;
    line-height:25px;
    display:inline-block;
    align-self: center;
    justify-self: center;
    transform: translate(-10px, 10px);
    transition: all 0.2s linear;
}
.select_item.active:before{
    background: #cb2020;
} 
.display_row{
    display: flex;
    flex-direction: row;
    width: 100%;
    height: fit-content;
    flex: 0 0 auto
}
.display_row.city_name{
    position: sticky;
    top: 0px;
}
.display_cell{
    flex-grow: 1;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.display_cell.y_name{
    justify-content: flex-start;
}
.y_name, .x_name{
    font-size:14px;
    font-weight: 300;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
.y_name{
    width:120px;
    padding-left: 10px;
    overflow-x:visible;
    text-overflow: ellipsis;
    white-space:nowrap;
    position: relative;
    left: 0px;
    background-color: #fff;
    text-align:left;
    display:flex;
    flex-direction: row;
}
.y_name._mobile{
    display:none;
}
.y_name_ratio{
    width: 15px;
    margin-right: 10px;
    text-align:right;
    color: #888888;
}
.y_name.expand .y_name_ratio{
    width: 28px;
    text-align: center;
}
.y_name_text{
    text-align:left;
    width: 86px !important;
    overflow:hidden;
    text-overflow: ellipsis;
}
.x_name{
    overflow:visible;
    /* width:26px; */
    /* margin-bottom: 8px; */
    display:flex;
    flex-direction: column;
    padding-bottom: 0px;
    position: relative;
    /* justify-content: space-between; */
    justify-content: flex-end;
    align-items: center;
}
.x_name_text{
    writing-mode:tb;
    /* height:55px; */
    /* line-height:30px; */
    white-space:nowrap;
    text-align: top;
    text-align:right;
    height:58px;
    /* line-height:100% */
}
.x_name_ratio{
    padding-top: 4px;
    font-size:14px;
    font-weight: 300;
    color: #888888;
    opacity:0.8;
    width: 14px;
    white-space:nowrap;
    overflow:visible;
}
.x_name.expand .x_name_ratio{
    text-align: center;
    transform: translateX(-50%) scale(1);
    color: #525252;
}
.x_name.expand .x_name_text,
.x_name.expand .x_name_ratio,
.y_name.expand .y_name_text,
.y_name.expand .y_name_ratio
{
    color: #525a7cd5;
    font-weight:400;
}
.x_name.expand,
.x_name.expand .x_name_ratio
{
    font-weight:400;
    opacity:1;
}
.y_name.expand{
    /* font-size:18px; */
    font-weight:400;
    /* padding-top: 3px; */
}
.y_name.current, .x_name.current{
    color: #cb2020 !important;
}
.y_name.current > *, .x_name.current > * {
    color: #cb2020 !important;
}
.box{
    width: 100%;
    height:auto;
    /* min-width: 22px; */
    /* height: 26px; */
    /* padding-bottom: 100%; */
    border: 4px solid white;
    background: #eee;
    cursor: pointer;
    transition: all 0.2s linear;
    line-height:0px;
}
.box img{
    width: 100%;
    object-fit: contain;
    opacity:0;
    aspect-ratio: 1/1;
}
.box_empty{
    background: #fff;
    position: relative;
    border: 4px solid white;
}
.box_empty:before{
    content: " ";
    position: absolute;
    /* z-index: -1; */
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    border: 1px solid #efefef;
}
.box.filled{
    background: #aaa
}
.box.expandX:not(.filled),
.box.expandY:not(.filled)
 {
    background: rgb(225, 225, 233)
}
.box.expandX.filled,
.box.expandY.filled
{
    background: rgb(143, 153, 182)
}
.box.expandX.expandY:not(.filled)
{
    background: rgb(215, 215, 225)
}
.box.expandX.expandY.filled
{
    background: rgb(143, 153, 195)
}

</style>