<template>
    <Teleport v-if="parentDom" :to="parentDom">
        <div
            ref="marker"
            class="marker-house map-marker"
            :class="{ active: active === fmLatlng, hidden: data.destroyed }"
            @mouseenter="onMouseEnter"
            @mouseleave="onMouseLeave"
            @click="onClick"
            @wheel.stop @mousewheel.stop
            v-bind="$attrs">
            <span
                class="marker-shape"
                :class="[{ highlight: data.keepHighlight }, housesStatus]">
                <template v-if="data.nodisclosureDes">&#xfe61;&#xfe61;&#xfe61;&#xfe61;&#xfe61;</template>
                <template v-if="!data.nodisclosureDes">
                    {{ showPrice }}
                </template>
            </span>
            <div
                ref="pop"
                class="marker-pop"
                :class="{ multi: houses.length > 1, bottom: popBottom }"
                :style="popStyle"
            >
                <div class="house-header" v-if="houses.length > 1">
                    <span>{{houses.length}} units here </span>
                </div>
                <ul class="house-list">
                    <li class="house-item" v-for="item in houses" :key="item.id">
                        <a
                            :href="(item.detailLink || item.detailUrl)"
                            target="_blank"
                            rel="noopener noreferrer"
                        >
                            <div class="house-top">
                                <img class="img-container" :src="item.previewPicture" alt=""/>
                                <div class="house-info">
                                    <p
                                        class="price"
                                        v-if="!item.nodisclosureDes">
                                        {{ item.soldDate ? item.soldPrice : item.price }}
                                    </p>
                                    <p class="price" v-else>
                                        {{ item.nodisclosureDes }}
                                    </p>
                                    <div class="info">
                                        <span class="desc-span" v-for="it in item.basic" :key="it.key">{{it.text}}</span>
                                    </div>
                                    <p class="addr">
                                        {{ item.streetAddress }}
                                    </p>
                                </div>
                            </div>
                            <div class="house-bottom">
                                <div class="detail">
                                    <p v-if="item.showMls" class="house-mls-id">
                                        Listing # {{ item.mlsListingId }}
                                    </p>
                                </div>
                                <img v-if="item.mlsLogo"
                                    class="house-mls-logo"
                                     height="18"
                                    :src="item.mlsLogo"
                                    alt="house mls logo"
                                />
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </Teleport>
</template>
<script>
import Marker from './marker';

export default {
    mixins: [Marker],
    data() {
        return {
            type: 'house'
        };
    },
    computed: {
        houses() {
            return this.data.items
        },
        housesStatus() {
            let status = this.houses[0].listingStatus || '';
            return 'house-status-' + status.toLowerCase();
        }
    }
};
</script>
<style lang="scss">
.house-item {
    &.hidden{
        display: none;
    }
}
</style>
