<template>
    <div class="list-item" ref="list">
        <div class="authentication-box dis-f al-item" v-if="data && data.data && data.data.verified == 1">
            <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-10 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 && listData.data && listData.data.type[data && data.data && data.data.type]">
                            {{ listData && 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>
                    <div class="address-text dis-f al-item" v-if="data && data.data && data.data.location">
                        <img src="../../assets/homeImage/addMarker.png" class="img" alt="">
                        <span v-if="!Array.isArray(data.data.location)">{{
                            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>
                        <span v-if="Array.isArray(data.data.location)">{{
                            location && location.data && location.data[data && data.data &&
                            data.data.location && data.data.location[0].substring(0, 1)]
                        }}>
                            <span v-for="(item,i) in data.data.location">
                                {{ location &&
                                    location.data[item] }}
                            </span>
                        </span>
                    </div>
                    <div class="price-text dis-f" style="align-items: end;">
                        <span class="unit">HK$</span>
                        <span class="price" v-if="!Array.isArray(data && data.data &&data.data.rent)">{{ data && data.data && data.data.rent }}</span>
                        <span 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] }}</span>
                        <span>/月</span>
                        <span class="time" v-show="data && data.data && data.data.rentalduration != 0">[ 租期{{ data &&
                            data.data && data.data.rentalduration }}{{
        data && data.data && data.data.rentalperiod }} ]</span>
                    </div>
                </div>
                <div class="img">
                    <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 " 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">
            <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>
            <img src="../../assets/homeImage/intermediaryTabImg.png"
                v-if="data && data.data && data.data.isintermediary == 1" class="intermediary-tab-img" 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
    },
    listId: {
        type: [String, Number]
    }
})
let data = reactive({ data: {} })
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
    console.log(data.id, listId, height)
    props.imgLoad(data.id, listId, height)
}

//监听路由
const route = useRoute()
let routePath = ref('')
routePath.value = route.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

onMounted(() => {
    imgRef = getCurrentInstance()
})

</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%;
}

.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;
    }
}

.list-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;

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

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

    .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;
        }

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

        .tab-item {
            padding: 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;
        }

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

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

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

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

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

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

        .first-tab {
            background: #000;
            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: 3px 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>


  