<template>
    <div class="info-box dis-f al-item" :class="{'intermediary-housing-s':type==2}">

        <img src="../../assets/img/detail/authenticationInfoR.svg" v-if="type==1" class="tab-img" alt="">
        <img src="../../assets/img/detail/authenticationInfoInte.svg" v-if="type==2" class="tab-img" alt="">
        <div class="dis-f al-item">
            <div class="tab-text">
                <div class="dis-f al-item" v-for="(item, i) in tabText" :key="i" :class="{ 'mg-t-25': i > 0 }">
                    <img src="../../assets/img/detail/authenticationInfoTab.svg" class="tab-icon" alt="" v-if="type==1">
                    <img src="../../assets/img/detail/authenticationInfoInteTab.svg" class="tab-icon" alt="" v-if="type==2">{{ item }}
                </div>
            </div>
            <div class="mg-l-100">
                <div class="qr-code-bg dis-f jus-x al-item">
                    <img src="https://app.gter.net/tenement/pc/api/qrcode?type=propertyAuth" v-if="type==1" class="qr-code" alt="">
                    <img src="https://app.gter.net/tenement/pc/api/qrcode?type=middlemanAuth" v-if="type==2" class="qr-code" alt="">
                </div>
                <div class="code-text">
                    微信扫码认证
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { defineProps } from 'vue'
import { useRouter } from "vue-router";

const props = defineProps({
    //1 个人房源认证   2 中介房源认证
    type:{
        type:[Number,String]
    }
})

//路由
let router=useRouter()
let type = props.type

let tabText=null
type==1?tabText = ['认证标识', '发布更多房源', '求房源对接']:
type==2?tabText = ['身份标识', '发布更多房源', '求房源对接']:[]


</script>
<style scoped lang="less">
.dis-f {
    display: flex;
}

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

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

img {
    object-fit: contain;
}

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

.mg-l-100 {
    margin-left: 100px;
}
.intermediary-housing-s{
    background: #f1f5f7 !important;
    border:1px solid #dbe7ed !important;
}

.info-box {
    width: 466px;
    height: 217px;
    border-radius: 16px;
    border: 1px solid #e4e4f6;
    background: #f4f3ff;
    position: relative;
    padding:0 45px;

    .tab-icon {
        width: 16px;
        height: 16px;
        margin-right: 8px;
    }

    .tab-text {
        font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 16px;
        color: #333;
    }

    .qr-code-bg {
        width: 120px;
        height: 120px;
        background: inherit;
        background-color: rgba(255, 255, 255, 1);
        border: none;
        border-radius: 70px;
        -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);
        -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);
        box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);

        .qr-code {
            width: 102px;
            height: 102px;
            border-radius: 50%;
        }
    }

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

.tab-img {
    width: 40px;
    height: 40px;
    position: absolute;
    right: -1px;
    top: -1px;
}</style>
  