<template>
    <div class="pos-r" style="z-index: 1;">
        <div class="authentication-top" 
        :class="[pageType==2?'intermediary-top':'']"
        v-if="data['data'] && data['data'].info && (data['data'].info.verified === 1||data['data'].isintermediary)">
            <div class="dis-f al-item jus-bet">
                <div v-if="pageType==1">
                    <img src="../../assets/img/detail/authenticationLogon.png" class="logo" alt="">
                    <img src="../../assets/img/detail/authenticationTitle.png" class="title" alt="">
                </div>
                <div v-if="pageType==2" class="dis-f al-item">
                    <img src="../../assets/img/detail/intermediaryDetailLogo.png" class="intermediaryDetail-logo" alt="">
                    <img src="../../assets/img/detail/intermediaryDetailTItle.png" class="intermediaryDetail-title" alt="">
                </div>
                <div class="dis-f al-item">
                    <div class="dis-f al-item">
                        <img src="../../assets/img/detail/authenticationType.svg" class="type-icon" alt="">
                        <span>
                            {{ data['data'] && data['data'].info && data['data'].info.intermediary != 1 ? '房产证明' : '真实牌照' }}
                        </span>
                    </div>
                    <div class="dis-f al-item" style="margin-left:20px;">
                        <img src="../../assets/img/detail/authenticationType.svg" class="type-icon" alt="">
                        <span>
                            {{ data['data'] && data['data'].info && data['data'].info.intermediary != 1 ? '房东身份证' : '身份证明' }}
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="title-top-box pos-r">
            <div class="top-round" v-if="data['data'] && data['data'].info && data['data'].info.verified === 1||data['data'].isintermediary">
                <div class="top-round-s" :class="[pageType==2?'intermediary-bg':'']"></div>
            </div>
            <div class="breadcrumb-box">
                <el-breadcrumb :separator-icon="ArrowRight">
                    <el-breadcrumb-item v-for="(item, i) in storeData['data']" :key="i" :to="{ path: item.path,query:item.query }">
                        <span class="breadcrumb-text">
                            {{ item.title }}
                        </span>
                    </el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="dis-f al-item jus-bet title-box" style="position: relative;">
                <div class="detail-title">
                    {{ data['data']['info'] && data['data']['info'].subject }}
                </div>
                <div class="tool-btn-box dis-f al-item">
                    <div class="btn-s dis-f al-item jus-x" @click="operation">
                        <img src="../../assets/img/detail/collect.png" v-show="!data.data.isfav" class="img" alt="">
                        <img src="../../assets/img/detail/collectT.png" v-show="data.data.isfav" class="img" alt="">
                        <span class="mg-l-5">
                            {{ data.data.isfav ? data['data']['info'].count_fav : '收藏' }}
                        </span>
                    </div>
                    <div class="line">

                    </div>
                    <div class="btn-s dis-f al-item jus-x">
                        <img src="../../assets/img/detail/forward.png" class="img" alt="">
                        <span class="mg-l-5">
                            转发
                        </span>
                        <transmit-btn v-if="data.data['info']" :qrcode="data.data['qrcode']"
                            :title="data.data.info['subject']" type="housing"></transmit-btn>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script setup>
import { ArrowRight } from '@element-plus/icons-vue'
import { reactive, onMounted, ref, defineProps, watchEffect } from 'vue'
import store from '@/store'
import transmitBtn from '@/components/public/transmitBtn.vue'
import { useRouter } from 'vue-router';

const props = defineProps({
    data: {
        type: Object,
        default: function () {
            return {}
        }
    },
    operation: {
        type: Function
    }
})
let data = reactive({})

let operation = props.operation

//获取路由参数
let router = useRouter()
//页面类型
let pageType=ref('')
let {type}=router.currentRoute.value.query
pageType.value=type
//导航数据
let storeData =reactive({})
storeData['data']=store.state.routeList

watchEffect(() => {
    data['data'] = props.data
    storeData['data'] = store.state.routeList
    if(data['data']&&data['data']['info'])pageType.value=data['data']['info'].intermediary===1?2:data['data']['info'].intermediary===6?3:1
})

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

.dis-f {
    display: flex;
}

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

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

.pos-r {
    position: relative;
}

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

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

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

.intermediary-top {
    background: -webkit-linear-gradient(165.253098840457deg, rgba(180, 218, 255, 1) -2%, rgba(80, 227, 194, 1) 86%) !important;
    background: -moz-linear-gradient(-75.2530988404571deg, rgba(180, 218, 255, 1) -2%, rgba(80, 227, 194, 1) 86%) !important;
    background: linear-gradient(-75.2530988404571deg, rgba(180, 218, 255, 1) -2%, rgba(80, 227, 194, 1) 86%) !important;
    border: none;
    border-radius: 16px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.authentication-top {
    position: absolute;
    left: 0px;
    top: -80px;
    width: 1200px;
    height: 65px;
    background: -webkit-linear-gradient(166.822294925074deg, rgba(255, 214, 243, 1) -89%, rgba(128, 128, 255, 1) 53%);
    background: -moz-linear-gradient(-76.8222949250736deg, rgba(255, 214, 243, 1) -89%, rgba(128, 128, 255, 1) 53%);
    background: linear-gradient(-76.8222949250736deg, rgba(255, 214, 243, 1) -89%, rgba(128, 128, 255, 1) 53%);
    border: none;
    border-radius: 16px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    padding: 10px 22px;
    font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 15px;
    color: #FFFFFF;
    .intermediaryDetail-logo{
        width:25px;
        height:20px;
        margin-left:-8px;
    }
    .intermediaryDetail-title{
        width:77px;
        height:20px;
        margin-left:-3px;
    }

    .logo {
        width: 20px;
        height: 20px;
        margin-left:-8px;
    }

    .title {
        width: 81px;
        height: 17px;
    }

    .type-icon {
        width: 18px;
        height: 18px;
        margin-right: 8px;
    }
}

.title-top-box {
    width: 1200px;
    background: inherit;
    background-color: rgba(255, 255, 255, 1);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(235, 235, 235, 1);
    border-radius: 16px;
    -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
    font-size: 14px;
    transform: translateY(-38px);
    position: relative;

    .top-round {
        width: 22px;
        height: 22px;
        background: #fff;
        position: absolute;
        top: -8px;
        right: -1px;

        .top-round-s {
            position: absolute;
            top: -17px;
            left: 0px;
            border-radius: 0 16px 16px 0;
            background: rgba(174, 159, 251, 1);
            width: 22px;
            height: 24px;
            box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.117647058823529);
        }
        .intermediary-bg{
            background: rgba(174,215,249,1) !important;
        }

    }

    .breadcrumb-box {
        padding: 20px;
        border-bottom: 1px solid #ebebeb;

        .breadcrumb-text {
            font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
            font-weight: 400;
            font-style: normal;
            color: #AAAAAA;
            cursor: pointer;
        }
    }

    .title-box {
        padding: 20px 20px 25px 20px;

        .detail-title {
            font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
            font-weight: 400;
            font-style: normal;
            font-size: 24px;
            color: #000000;
            line-height: 35px;
            width: 820px;
            word-wrap:break-word;
        }

        .tool-btn-box {
            width: 244px;
            height: 48px;
            background: inherit;
            background-color: rgba(246, 246, 246, 1);
            box-sizing: border-box;
            border-width: 1px;
            border-style: solid;
            border-color: rgba(235, 235, 235, 1);
            border-radius: 9px;
            -moz-box-shadow: none;
            -webkit-box-shadow: none;
            box-shadow: none;
            font-size: 14px;
            justify-content: center;

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

            .btn-s {
                color: #333333;
                font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
                font-weight: 400;
                font-style: normal;
                text-align: center;
                width: 80px;
                height: 40px;
                line-height: 40px;
                cursor: pointer;

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

            .line {
                width: 1px;
                height: 21px;
                background: #d7d7d7;
                margin: 0 15px;
            }
        }
    }


}
</style>
  