<template>
    <div class="item" ref="list" @click="watchInfo" :class="{ 's-w-100': detailShow }">
        <img src="../../assets/homeImage/corner.svg" class="detail-tab" v-if="detailShow && pageType == 1" alt="">
        <img src="../../assets/homeImage/intermediaryCorner.svg" class="detail-tab" v-if="detailShow && pageType == 2"
            alt="">
        <div class="authentication-box dis-f al-item" v-if="data && data.data && data.data.verified == 1 && !detailShow">
            <img src="../../assets/homeImage/authenticationLogo.png" class="logo" alt="">
            <img src="../../assets/homeImage/topAuthenticationBg.svg" class="bg" alt="">
            <img src="../../assets/homeImage/authenticationText.png" class="text-img" alt="">
        </div>
        <div class="top-box">
            <div class="title-text">
                {{ data && data.data && data.data.subject || '暂无标题' }}
            </div>
            <div class="mg-t-20 dis-f al-item-start jus-bet s-w-100">
                <div>
                    <div class="dis-f al-item">
                        <div class="tab-item first-tab">
                            {{ data && data.data && data.data.gptype || '' }}
                        </div>
                        <div class="tab-item mg-l-8"
                            v-if="listData.data && listData.data.type[data && data.data && data.data.type]">
                            {{ listData.data && listData.data.type[data && data.data && data.data.type] || '' }}
                        </div>
                        <div class="tab-item mg-l-8"
                            v-if="data && data.data && data.data.elevator !== -1 && data.data.elevator">
                            {{ listData && listData.data && listData.data.elevator[data && data.data && data.data.elevator]
                                ||
                                '' }}
                        </div>
                        <div class="tab-item mg-l-8"
                            v-if="data && data.data && data.data.sunshinearea !== -1 && data.data.sunshinearea !== 0 && data.data.sunshinearea">
                            {{ listData && listData.data && listData.data.sunshinearea[data && data.data &&
                                data.data.sunshinearea] || '' }}
                        </div>
                        <div class="tab-item mg-l-8"
                            v-if="listData && listData.data && listData.data.gender[data && data.data && data.data.gender] && data.data.gender">
                            {{ 
                            listData && listData.data && listData.data.gender[data && data.data && data.data.gender] ||
                                ''
                            }}
                        </div>
                        <div class="tab-item mg-l-8"
                            v-if="listData.data && listData.data.rentalduration &&data&&data.data.rentalduration">
                            {{ 
                            listData.data.rentalduration[data.data && data.data.rentalduration] ||
                                ''
                            }}
                        </div>
                    </div>
                    <div class="address-text dis-f al-item"
                        v-if="data && data.data && data.data.location && !Array.isArray(data.data.location)">
                        <img src="../../assets/homeImage/addMarker.png" class="img" alt="">
                        <span>{{
                            location && location.data && location.data[1] ? `${location && location.data &&
                            location.data[data && data.data && data.data.location && data.data.location.substring(0, 1)]} >
                                                    ${location &&
                        location.data[data && data.data && data.data.location]}` : ''
                        }}</span>
                    </div>
                    <div class="dis-f" style="flex-wrap: wrap;"
                        v-if="data && data.data && data.data.location && Array.isArray(data.data.location)">
                        <div class="address-text dis-f al-item mg-r-15" v-if="data && data.data && data.data.location"
                            v-for="(item, i) in data.data.location" :key="i">
                            <img src="../../assets/homeImage/addMarker.png" class="img" alt="">
                            <span>{{
                                location && location.data && location.data[1] ? `${location && location.data &&
                                location.data[item.substring(0,
                                    1)]} >
                                                            ${item.length===1?'不限':location &&
                            location.data[item]}` : ''
                            }}</span>
                        </div>
                    </div>

                    <div class="price-text dis-f" style="align-items: end;">
                        <div class="unit">HK$</div>
                        <div class="price" v-if="!Array.isArray(data && data.data && data.data.rent)">{{ data && data.data
                            && data.data.rent }}</div>
                        <div class="price" v-if="Array.isArray(data && data.data && data.data.rent)">{{ data && data.data
                            &&
                            data.data.rent[0] }}~{{ data && data.data && data.data.rent[1] }}</div>
                        <span>/{{ data && data.data && data.data.rentalperiod }}</span>
                        <span class="time" v-show="data && data.data && data.data.rentalduration != 0&&(pageType ==2||(pageType==1&&data.data.verified == 1))">[ 租期{{
                            listData.data.rentalduration[data.data && data.data.rentalduration]
                        }}]</span>
                    </div>
                </div>
                <!-- 'img-150':routePath==='/detail' -->
                <div class="img" :class="{'img-100':routePath==='/detail'&&data && data.data && !data.data.isvideo}">
                    <div class="dis-f">
                        <img :src="data && data.data && data.data.ispic ? data && data.data.imageurl : data && data.data && data.data.isvideo ? data && data.data && data.data.imageurl : ''"
                            @load="loadFinish" @error="loadFinish" class="img " :class="{'img-100':routePath==='/detail'&&data && data.data && !data.data.isvideo}" alt="">
                        <div class="s-img dis-f jus-x al-item" v-if="data && data.data && data.data.isvideo">
                            <img src="../../assets/homeImage/videoIcon.svg" class="img" alt="">
                        </div>
                    </div>
                </div>
            </div>
            <img src="../../assets/homeImage/corner.svg" class="tab-img" v-if="routePath === '/personHousing'" alt="">
            <img src="../../assets/homeImage/intermediaryCorner.svg" v-if="routePath === '/intermediaryHousing'"
                class="tab-img" alt="">
            <img src="../../assets/homeImage/needHousingCorner.svg" v-if="routePath === '/needHousing'" class="tab-img"
                alt="">
        </div>
        <div class="btm-box dis-f al-item" :class="{ 'jus-bet': detailShow }">
            <div class="dis-f al-item">
                <img :src="data && data.data && data.data.avatar" class="user-img" alt="">
                <span class="user-name">{{ data && data.data && data.data.author }}</span>
                <div class="btn" v-if="data && data.data && data.data.isintermediary !== 1 && !data.data.intermediary_text">
                    {{
                        listData && listData.data && listData.data.intermediary[data && data.data && data.data.intermediary] }}
                </div>
                <div class="btn" v-if="data && data.data && data.data.isintermediary !== 1 && data.intermediary_text">{{
                    data &&
                    data.data.intermediary_text
                }}</div>
                <div class="btn" v-if="data && data.data && data.data.gender&&pageType==3">{{
                    listData && listData.data && listData.data.gender[data && data.data && data.data.gender]
                }}</div>
                <img src="../../assets/homeImage/intermediaryTabImg.png"
                    v-if="data && data.data && data.data.isintermediary == 1" class="intermediary-tab-img" alt="">
            </div>
            <img src="../../assets/img/detail/authenticationHousing.png" class="intermediary-tab-img"
                v-show="detailShow && data && data.data && data.data.verified == 1" alt="">
        </div>
    </div>
</template>
  
<script setup>
import { ref, defineProps, reactive, onMounted, getCurrentInstance, watchEffect } from "vue";
import { useRoute, useRouter } from 'vue-router';
import store from '../../store/index';
let props = defineProps({
    item: {
        type: Object
    },
    imgLoad: {
        type: Function,
        default: function () {
            return () => { }
        }
    },
    listId: {
        type: [String, Number],
        default: ''
    },
    detailShow: {
        type: Boolean,
        default: false
    }
})
let data = reactive({ data: {} })
//显示样式
let detailShow = props.detailShow
watchEffect(() => {
    data.data = props.item
})


let listId = props.listId
let imgRef = null
let loadFinish = () => {
    let height = imgRef.ctx.$refs && imgRef.ctx.$refs.list && imgRef.ctx.$refs.list.offsetHeight
    props.imgLoad(data.id, listId, height)
}

//监听路由
const route = useRouter()
let routePath = ref('')
routePath.value = route.currentRoute.value.meta.path

//地区数据
let location = reactive({ data: {} })
location.data = store.state.indexData && store.state.indexData.config && store.state.indexData.config.location


//数据包
let listData = reactive({ data: {} })
listData.data = store.state.indexData && store.state.indexData.config || {}

let pageType = ref('')

//跳转
let router = useRouter()
let watchInfo = () => {
    let seachData = router.currentRoute.value.query
    if (pageType.value === 4) {
        for (let key in data) {
            store.state.seachSelect['seachPage'][key] = seachData[key]
        }
    }
    // console.log(document.location.origin)
    // return
    window.open(`${document.location.origin}/detail?id=${data.data.uniqid}`)
    // router.push({
    //     path: '/detail',
    //     query: {
    //         id: data.data.uniqid,
    //     }
    // })
}

onMounted(() => {
    imgRef = getCurrentInstance()
    pageType.value = data.data.intermediary === 1 ? 2 : data.data.intermediary === 6 ? 3 : 1
})

</script>
<style scoped>
img {
    object-fit: contain;
}

.dis-f {
    display: flex;
}

.jus-x {
    justify-content: center;
}

.jus-bet {
    justify-content: space-between;
}

.al-item-start {
    align-items: flex-start;
}

.al-item {
    align-items: center;
}

.pos-r {
    position: relative;
}

.body-maxWidth {
    width: 1200px;
    min-width: 1200px;
}

.s-w-100 {
    width: 100% !important;
}

.authentication-box {
    width: 100%;
    height: 30px;

    .bg {
        height: 100%;
        height: 100%;
    }

    .logo {
        width: 18px;
        height: 18px;
        position: absolute;
        left: 15px;
    }

    .text-img {
        width: 81px;
        height: 81px;
        position: absolute;
        left: 35px;
    }
}

.item {
    width: 590px;
    background-color: rgba(255, 255, 255, 1);
    border: none;
    border-radius: 16px;
    -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
    -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
    position: relative;
    margin-bottom: 20px;
    cursor: pointer;

    .detail-tab {
        width: 32px;
        height: 32px;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 66;
    }

    .mg-t-20 {
        margin-top: 20px;
    }

    .img-150{
        width:150px !important;
    }

    .img {
        width: 100px;
        object-fit: cover;
        border-radius: 10px;
        position: relative;
    }
    .img-100{
        height:100px;
        width:auto;
    }

    .s-img {
        width: 100px;
        height: 100%;
        border-radius: 10px;
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(51, 51, 51, 0.733333333333333);

        .img {
            width: 30px;
            height: 30px;
        }
    }

    .top-box {
        padding: 20px;

        .tab-img {
            width: 32px;
            height: 32px;
            position: absolute;
            top: 0;
            right: 0;
            z-index: 66;
        }

        .title-text {
            font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
            font-weight: 400;
            font-style: normal;
            font-size: 18px;
            color: #000000;
            text-align: left;
            word-wrap: break-word;
        }

        .mg-l-8 {
            margin-left: 8px;
        }

        .tab-item {
            padding: 2px 5px;
            background: inherit;
            background-color: rgba(242, 242, 242, 1);
            border: none;
            border-radius: 6px;
            -moz-box-shadow: none;
            -webkit-box-shadow: none;
            box-shadow: none;
            font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
            font-weight: 400;
            font-style: normal;
            font-size: 14px;
            color: #7F7F7F;
            text-align: center;
        }

        .mg-r-15 {
            margin-right: 15px;
        }

        .address-text {
            font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
            font-weight: 400;
            font-style: normal;
            font-size: 15px;
            color: #555555;
            margin-top: 20px;


            .img {
                width: 18px;
                height: 18px;
                margin-right: 5px;
                margin-left:-3px;
            }
        }

        .price-text {
            font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
            font-weight: 400;
            font-style: normal;
            font-size: 14px;
            color: #555555;
            margin-top: 20px;
            line-height:17px;

            .time {
                font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
                font-weight: 400;
                font-style: normal;
                font-size: 14px;
                color: #7F7F7F;
                margin-left: 15px;
                line-height:19px;
            }

            .price {
                font-family: 'Arial-Black', 'Arial Black', sans-serif;
                font-weight: 900;
                font-size: 20px;
                color: #F95D5D;
                line-height: 20px;
                margin:0 5PX;
            }

            .unit {
                font-family: 'Arial-Black', 'Arial Black', sans-serif;
                font-weight: 900;
                color: #000000;
                font-size: 14px;
                line-height:15px;
            }
        }

        .first-tab {
            background: rgba(51, 51, 51, 1);
            color: #fff;
        }
    }

    .btm-box {
        padding: 20px;
        border-top: 1px dashed #d7d7d7;

        .intermediary-tab-img {
            width: 85px;
            height: 20px;
            margin-left: 15px;
        }

        .user-img {
            width: 24px;
            height: 24px;
            border-radius: 50%;
        }

        .user-name {
            font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
            font-weight: 400;
            font-style: normal;
            color: #555555;
            font-size: 14px;
            margin-left: 10px;
        }

        .btn {
            margin-left: 10px;
            padding: 0px 5px;
            background: inherit;
            background-color: rgba(242, 242, 242, 0);
            box-sizing: border-box;
            border-width: 1px;
            border-style: solid;
            border-color: rgba(215, 215, 215, 1);
            border-radius: 42px;
            -moz-box-shadow: none;
            -webkit-box-shadow: none;
            box-shadow: none;
            font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
            font-weight: 400;
            font-style: normal;
            font-size: 14px;
            color: #555555;
            text-align: center;
        }
    }
}</style>


  