<template>
<div style="width:100%; height:100%; position:relative;display:flex;flex-direction:column;align-items:center">
    <!-- {{galleryData[currTab.category]}} -->
    <!-- <div class="page_title">
        近三年开业酒店 - {{instance== 'bestNew' ? '最佳新酒店' : instance}}
    </div> -->
    <transition name="fade">
      <div class="design_examples_content" v-if="instance == 'bestNew' && !showReportViewer">
        <div class="type_select">
            <span 
                v-for="
                (n, i) in articles"
                :key="i"
                :class="{
                    clickable:true, 
                    default_text:true, 
                    type_select_option:true,
                    active:currType && currType.title == n.title
                }"
                @click="onClickType(n)"
            >
                {{`${n.title}(${n.children.length})`}}
            </span>
        </div>

        <div
            v-for="
            (n, i) in Object.keys(types2)"
            :key="i" 
        >
            <div class="hotel_type_title">
                {{n}}
            </div>
            <div 
                :initialize="isoRefresh" 
                :activated="!isMobile"
                :_style="isMobile?'width:100%':''"
                :columnWidth="235"
                class="thumbnails"
            >
            <div class="thumbnail"
                v-for="(c, cind) in types2[n] || []"
                :key="cind"
                @click="onClickItem(c)"
                :style="(hideTail && cind > 20) ? 'opacity:0': ''"
            >
                <img 
                :src="c.img" 
                :class="{
                    thumbnail_img:true,
                }" alt=""
                >

                <div class="thumbnail_description">
                    <div class="hotel_name">
                        {{c['酒店名称']}}
                    </div>
                    <!-- <div class="hotel_details">
                        <div>
                            {{c['管理集团']|| ''}} {{c['管理品牌'] || ''}}
                        </div>
                    </div> -->
                </div>
            </div>
        </div>
        </div>

      </div>
    </transition>
    <transition name="fade">
      <div class="design_examples_content" v-if="instance == 'bestNew' && showReportViewer">
        <div class="hide_report_viewer clickable" @click="hideReportViewer">返回</div>

        <div class="viewer_description">
            <div class="description_item default_text"
                v-for="k in [
                    '酒店名称',
                    '官网名称',
                    '酒店类型',
                    '国家城市',
                    '管理集团',
                    '管理品牌',
                    '品牌档次',
                    '开业时间',
                    '获奖时间'
                ]"
                :key="k"
            >
                <div class="description_tag">{{k}}：{{currItem[k]}}</div>
            </div>
        </div>

        <img 
            :src="currItem.img" 
            class="service_image" alt=""
        />

      </div>
    </transition>
    <transition name="fade">
      <div class="design_examples_content" v-if="(instance != 'bestNew') &&  !showReportViewer">
        <div :class="{
            type_select:true,
            _mobile: isMobile
        }">
            <span 
                v-for="
                (n, i) in articles"
                :key="i"
                :class="{
                    clickable:true, 
                    default_text:true, 
                    type_select_option:true,
                    _mobile: isMobile,
                    active:currType  && currType.title == n.title
                }"
                @click="onClickType(n)"
            >
                {{`${n.title}(${n.children.length})`}}
            </span>
        </div>

        <div 
            :initialize="isoRefresh" 
            :activated="!isMobile"
            :_style="isMobile?'width:100%':''"
            :columnWidth="235"
            :class="{
                thumbnails: true,
                _mobile: isMobile
            }"
        >

            <div :class="{
                thumbnail:true,
                _mobile: isMobile
            }"
                v-for="(c, cind) in (currType ? currType.children
                                                    .filter(x=>!!x.imgURL)
                                                    .slice(0, hideTail ? 10 : 999) : [])"
                :key="cind"
                @click="onClickItem(c)"
                :style="(hideTail && cind > 20) ? 'opacity:0': ''"
            >
                <img 
                :src="c.imgURL" 
                :class="{
                    thumbnail_img:true,
                }" alt=""
                >

                <div class="thumbnail_description">
                    <div class="hotel_name">
                        {{c['pageName']}} - {{c['caption']}}
                    </div>
                    <!-- <div class="hotel_details">
                        <div>
                            {{c['管理集团']|| ''}} {{c['管理品牌'] || ''}}
                        </div>
                    </div> -->
                </div>
            </div>
        </div>
        <!-- </div> -->

      </div>
    </transition>
    <transition name="fade">
      <div class="design_examples_content" v-if="(instance != 'bestNew') && showReportViewer">
        <div class="hide_report_viewer clickable" @click="hideReportViewer">返回</div>

        <div class="viewer_description">
            <div class="description_item default_text">
                <div class="description_tag">酒店名称：{{currItem['pageName']}}</div>
            </div>
            <div class="description_item default_text">
                <div class="description_tag">开业时间：{{currItem['开业时间']}}</div>
            </div>
            <!-- <div class="description_item default_text">
                <div class="description_tag">图片分类：{{currItem['tabName']}}</div>
            </div> -->
            <div class="description_item default_text">
                <div class="description_tag">图片描述：{{currItem['caption']}}</div>
            </div>
        </div>

        <img 
            :src="currItem.imgURL" 
            class="service_image" alt=""
        />

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

<script lang="ts">

import { defineComponent, nextTick, ref,watch, onMounted } from 'vue'
import getDesignExamples from './getData/getDesignExamples'

export default defineComponent({
    name:'DesignExamples',
    components:{
        // Isotope,
    },
    props: {
        data:{
            default:[] as any
        },
        isMobile:{
            default:false
        },
        instance:{
            default:''
        },
    },
    setup(props, {emit}){

        const articles = ref([] as any[])
        const currType = ref(undefined as any)

        const types2 = ref([] as string[])

        const typeOptions = [
            '建筑','景观','大堂','客房','餐厅','酒吧','宴会','会议','SPA','健身房','泳池'
        ]

        const hideTail = ref(false)
        const onClickType = (n:any)=>{ 
            if(!n) return
            hideTail.value  = true
            currType.value = n 
            const newTypes2 = {} as any
            if(!!n.children){
                for(let h of n.children){
                    if(!Object.keys(newTypes2).includes(h['酒店类型'])){
                        newTypes2[h['酒店类型']] = [h]
                    }else{
                        newTypes2[h['酒店类型']].push(h)
                    }
                }
            }
            for(let t in newTypes2){
                newTypes2[t].sort((a:any,b:any) => (a['pageName'] || '').localeCompare(b['pageName']||''))
            }
            types2.value = newTypes2
            nextTick(()=>{
                isoRefresh.value ++
                setTimeout(()=>{
                    hideTail.value = false
                }, 500)
            })     
        }

        const isoRefresh = ref(0)
        const init = async ()=>{
            try{ 
                const _rawData = await getDesignExamples(props.instance)
                const rawData = props.instance == 'bestNew' ? 
                                _rawData.filter((x:any)=>(x['开业时间'] + 4 ) > (new Date()).getFullYear())
                                .sort((a:any,b:any)=>{
                                    if(a['开业时间'] != b['开业时间']){
                                        return b['开业时间'] - a['开业时间']
                                    }else{
                                        return a['酒店名称'].localeCompare(b['酒店名称'])
                                    }
                                })
                                : _rawData
                                .sort((a:any,b:any)=>{
                                    if(a['开业时间'] != b['开业时间']){
                                        return b['开业时间'] - a['开业时间']
                                    }else if(
                                        (typeof a['pageName'] == 'string') 
                                        && (typeof b['pageName'] == 'string')
                                    ){
                                        return a['pageName'].localeCompare(b['pageName'])
                                    }else{
                                        console.log('pangeName', a, b)
                                        return 0
                                    }
                                });
                const types = typeOptions.map(x=>{
                    return {
                        title:x,
                        children:[] as any
                    }
                }) 
                if(props.instance == 'bestNew'){
                    for(let d of rawData){
                        const foudType = types.find(t=>{
                            if(d['图片类型'] == '室外景观'){
                                return t.title == '景观'
                            }else if(d['图片类型'] == '会议室'){
                                return t.title == '会议'
                            }else if(d['图片类型'] == '宴会厅'){
                                return t.title == '宴会'
                            }else{
                                return t.title.toUpperCase() == d['图片类型'].toUpperCase()
                            }
                        })
                        if(foudType){
                            foudType.children.push(d)
                        }
                    }
                    articles.value = types
                    onClickType(articles.value[0])
                }else{
                    for(let d of rawData){
                        if(!d['tabName']) continue
                        if(d['tabName'] == 'undefined') continue
                        const foudType = types.find(t=>{
                            if(d['图片类型'] == '室外景观'){
                                return t.title == '景观'
                            }else if(d['图片类型'] == '会议室'){
                                return t.title == '会议'
                            }else if(d['图片类型'] == '宴会厅'){
                                return t.title == '宴会'
                            }else{
                                return t.title.toUpperCase() == (d['tabName'] || '').toUpperCase()
                            }
                        })
                        if(foudType){
                            foudType.children.push(d)
                        }else{
                            types.push({
                                title: d['tabName'],
                                children: [d]
                            })
                        }
                    }
    
                    articles.value = types
                    onClickType(articles.value.find(x=>x.children.length > 0))
                }
                nextTick(()=>{
                    isoRefresh.value ++
                })
            }catch(e){
                console.log('DesignExamples Error', e)
            }
        }

        onMounted(init)
        watch(()=>props.instance, init)

        const currItem = ref({} as any)
        const showReportViewer =  ref(false)
        const onClickItem = (item:any) => {
            if((!item.img.length) ||item.img.length == 0) return
            currItem.value = item
            showReportViewer.value = true
            nextTick(()=>{
                isoRefresh.value ++
            })
            emit('clickItem', {title:item['酒店名称']})
        }
        const hideReportViewer = () => {
            currItem.value = {}
            emit('cancelItem')
            nextTick(()=>{
                isoRefresh.value ++
            })
            showReportViewer.value = false
        }
        
        return {
            articles,
            types2,
            currType,
            onClickType,
            isoRefresh,
            window,
            getDesignExamples,

            currItem,
            showReportViewer,
            onClickItem,
            hideReportViewer,
            hideTail
        }
    }
})
</script>

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease-in-out;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.design_examples_content{
    width: 100%;
    position: relative;
    display:flex;
    flex-direction: column;
    display:flex;
    flex-direction:column;
    align-items: center;
}

.thumbnails{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
.thumbnail{
    width:245px;
    /* height:200px; */
    cursor: pointer;
    margin: 15px;
    /* margin-bottom: 30px; */
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.3s ease-in-out;
}
.thumbnail:hover{
    transform:scale(1.05)
}
.thumbnail_img{
    width: 100%;
    height: 220px;
    object-fit:cover;
}

.service_thumbnail.upright{
    height:351px;
    width:248px
}
.service_image{
    width: 95%;
    border: 1px solid #ddd;
    margin-top: 10px;
}
.viewr_description{
    margin-top: 20px;
}

.hide_report_viewer{
    position: absolute;
    top: 0px;
    right: 2.5%;
}

.type_select_option{
    padding:10px;
    white-space:nowrap;
}
.type_select_option_2{
    padding:5px 15px;
    white-space:nowrap;
}
.type_select_option:active{
    color: black;
}

.type_select{
    margin-bottom: 10px;
}
.type_select_2{
    margin-bottom: 30px;
}

.thumbnail_description{
    position:relative;
    bottom:0px;
    left: 0px;
    color: rgb(44, 44, 44);
    z-index: 10;
    /* background-color:rgba(223, 223, 223, 0.8); */
    width: 100%;
    text-align: center;
    /* padding-left: 2px; */
    font-size: 14px;
    font-weight: 350;
    font-size: 14px;
    font-weight: 300;
}
.hotel_details{
    transition: all 0.3s ease-in-out;
    overflow: hidden;
}
.thumbnail:not(hover) .hotel_details{
    /* height:0px; */
}
.thumbnail:hover .hotel_details{
    /* height: 28px; */
}


.viewer_description{
    display:grid;
    width: 90%;
    grid-template-columns: 1fr 1fr 1fr;

}
.description_item{
    display:flex;
    flex-direction: row;
}

.hotel_type_title{
    font-size: 18px;
    font-weight: 300;
    margin-bottom: 20px;
    margin-top: 30px;
    width: 100%;
    text-align:center;
}

.clickable{
	color:#1680FF;
	cursor: pointer;
	transition: color 0.2s linear;
    user-select: none;
    font-weight:300;
}
.clickable:hover, .clickable.active{
	color:#334250
}
.default_text{
    font-size:14px;
    font-weight: 300;
    line-height: 28px;
    vertical-align: text-top;
}
.page_title{
    font-size: 28px;
    font-weight: 300;
    margin-bottom: 20px;
}
</style>