<template>
    <!-- <div class="top-bg-img-box pos-r" :style="{ 'height': bannerLists.data.length ? '530px' : '260px' }"> -->
    <div class="top-bg-img-box pos-r" :style="{ 'height': bannerLists.data.length ? '470px' : '260px' }">
        <img src="../../assets/homeImage/indexBg.jpg" class="bg-img" alt="" v-if="bannerLists.data.length" />
        <img src="../../assets//img/edit/bj-img1920.png" class="bg-img" alt="" v-if="!bannerLists.data.length" />
        <div class="info-box">
            <!-- 顶部导航 -->
            <div class="dis-f jus-x al-item index-top-navigation-box">
                <div class="index-top-navigation dis-f al-item body-maxWidth" v-if="false">
                    <div class="navigation-text" @click="topTabSelect(i, item)" :class="{ 'navigation-text-click': item.key === topTabNum }" v-for="(item, i) in topTab.data" :key="i">
                        {{ item.name }}
                    </div>
                    <div class="user-box" v-if="user.data['uid'] > 0 || user.data['uin'] > 0">
                        <a target="_blank" :href="`https://bbs.gter.net/home.php?mod=space&uid=${user.data['uin']}`">
                            <img :src="user.data.avatar" class="user-img" alt="" />
                        </a>

                        <!-- <img v-else src="@/assets/img/publicImage/defaultAvatar.png" class="user-img" alt=""> -->
                        <div class="user-out-box">
                            <div class="box-bg dis-f jus-x">
                                <div class="top-box"></div>
                                <a :href="quitUrl" style="color: #fff;">
                                    退出
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="login-box" v-else>
                        <div class="login-box-item" @click="loginBtn('login')">登录</div>
                        <div class="login-box-item" @click="loginBtn('register')">注册</div>
                    </div>
                </div>
            </div>
            <div class="dis-f jus-x al-item body-maxWidth" style="margin: auto;">
                <div class="logo-box dis-f al-item body-maxWidth">
                    <img src="../../assets/homeImage/logo.png" class="logo-img" alt="" @click="goIndex()" />
                    <img src="../../assets/homeImage/logoText.png" class="logo-text-img" alt="" @click="goIndex()" />
                </div>
            </div>
            <!-- <div class="dis-f jus-x al-item" style="margin-top:20px;" v-if="bannerLists.data.length"> -->
            <div class="dis-f jus-x al-item" v-if="bannerLists.data.length">
                <div class="body-maxWidth">
                    <el-carousel :interval="5000" arrow="always" height="330" style="height: 330px;" @change="carouselChange">
                        <el-carousel-item v-for="(item, i) in bannerLists.data" :key="item.feedId">
                            <div style="width: 100%; height: 100%;" class="dis-f jus-x al-item">
                                <img v-if="i >= carouselIndex - 1 && i <= carouselIndex + 1" class="carousel-img" :src="item.imageurl" alt="" :title="item.title" @click="openInfo(item)" />
                            </div>
                        </el-carousel-item>
                    </el-carousel>
                </div>
            </div>
            <div class="btm-seach-btn-box dis-f al-item jus-x" v-if="pageTopBarShow">
                <div class="body-maxWidth dis-f" style="height: 40px;">
                    <div class="tab-btn dis-f al-item jus-x" :class="{ 'tab-btn-click': item.path === tabBtnType }" v-for="(item, i) in seachTab.data" :key="i" @click="changeTabBtnType(item)">
                        <el-badge v-if="item['path'] == '/user' && user.data['messagenum'] != 0" :value="user.data['messagenum']">
                            <div style="padding: 0 10px;">{{ item.name }}</div>
                        </el-badge>
                        <div v-else>{{ item.name }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import store from "../../store/index"
import { useRoute, useRouter } from "vue-router"
import { reactive, watchEffect, ref, defineProps } from "vue"
import { goTologin } from "@/utils/util.js"

const props = defineProps({
    bannerList: {
        type: Array,
        default: function () {
            return []
        },
    },
})

//退出登录
let url = location.href
let quitUrl = ref(`https://passport.gter.net/login/quit?referer=${url}`)
//个人信息
let user = reactive({ data: {} })
//组件数据
let topTab = reactive({ data: [] })
let seachTab = reactive({ data: [] })
let bannerLists = reactive({ data: [] })

watchEffect(() => {
    user.data = store.state.user
    // bannerLists.data = props.bannerList
    if (!store.state.indexData.menu) return
    store.state.indexData.menu.map(res => {
        if (res.name === "首页") {
            res.path = "/"
        } else if (res.name === "个人房源") {
            res.path = "/personHousing"
        } else if (res.name === "中介房源") {
            res.path = "/intermediaryHousing"
        } else if (res.name === "品牌公寓") {
            res.path = "/apartment"
        } else if (res.name === "求房源") {
            res.path = "/needHousing"
        } else if (res.name === "我的") {
            res.path = "/user"
        }
    })
    seachTab.data = store.state.indexData.menu
    topTab.data = store.state.indexData.nav
})

//顶部导航跳转
let topTabNum = ref("fang")
let topTabSelect = (type, item) => {
    // topTabNum.value=type
    window.open(item.url)
}

//页面跳转
const router = useRouter()
let tabBtnType = ref("/")

let pageTopBarShow = router.currentRoute.value.meta.topBarShow
let changeTabBtnType = item => {
    // 判断点击进入 user 时是否已经登录
    if (item["path"] == "/user" && (user.data["uid"] == 0 || user.data["uin"] == 0)) {
        loginBtn("login")
        return
    }
    tabBtnType.value = item.path
    router.push({
        path: item.path,
    })
}

let openInfo = data => {
    window.open(data.url)
}

//监听路由
const route = useRoute()
let routePath = ref("")
routePath.value = route.meta.path
tabBtnType.value = route.meta.path

// 点击登录注册 type login 登录 register注册
const loginBtn = type => {
    if (type == "login") {
        store.state.showloginmodal = true
        return
    }
    goTologin()
}

// 跳转首页
const goIndex = () => router.push("/")

watchEffect(() => {
    if (routePath.value == "/needHousing") bannerLists.data = store.state.bannerData.needHousing || []
    else if (routePath.value == "/intermediaryHousing") bannerLists.data = store.state.bannerData.intermediaryHousing || []
    else if (routePath.value == "/personHousing") bannerLists.data = store.state.bannerData.personHousing || []
    else if (routePath.value == "/apartment") bannerLists.data = store.state.bannerData.apartment || []
    else if (routePath.value == "/") bannerLists.data = store.state.bannerData.home || []
})

let carouselIndex = ref(0) // 轮播图的索引

const carouselChange = value => {
    carouselIndex.value = value
}
</script>
<style lang="less" scoped>
.pos-r {
    position: relative;
}

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

.top-bg-img-box {
    width: 100%;
    min-width: 1200px;
}

.top-bg-img-box .bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.top-bg-img-box .info-box {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.756862745098039);
    position: absolute;
    top: 0;
    left: 0;
}

.index-top-navigation-box {
    height: 60px;
    width: 100%;
}

.index-top-navigation-box .navigation-text {
    font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    color: rgba(215, 215, 215, 0.988235294117647);
    text-align: center;
    margin-right: 20px;
    cursor: pointer;
}

.index-top-navigation-box .navigation-text-click {
    font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
    font-weight: 650;
    font-style: normal;
    font-size: 14px;
    color: #62b1ff;
    border-bottom: 3px solid rgba(98, 177, 255, 1);
}

.index-top-navigation {
    height: 60px;
    justify-content: end;
}

.top-bg-img-box .user-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.top-bg-img-box .info-box .logo-box {
    height: 40px;
}

.top-bg-img-box .info-box .logo-box .logo-img {
    object-fit: contain;
    width: 30px;
    height: 31px;
    cursor: pointer;
}

.top-bg-img-box .info-box .logo-box .logo-text-img {
    object-fit: contain;
    width: 173px;
    height: 31px;
    padding-left: 10px;
    cursor: pointer;
}

.top-bg-img-box .info-box .btm-seach-btn-box {
    width: 100%;
    height: 44px;
    position: absolute;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.596078431372549);
    border-bottom: 4px solid rgba(78, 144, 204, 1);
}

.top-bg-img-box .info-box .btm-seach-btn-box .tab-btn:hover {
    color: #fff !important;
}

.top-bg-img-box .info-box .btm-seach-btn-box .tab-btn {
    width: 120px;
    height: 40px;
    font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    color: #e2edf7;
    cursor: pointer;
}

.top-bg-img-box .info-box .btm-seach-btn-box .tab-btn-click {
    background-color: rgba(98, 177, 255, 1);
    border: none;
    border-bottom: 0px;
    border-radius: 8px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
    font-weight: 650;
    font-style: normal;
    font-size: 18px;
    color: #ffffff;
}

.carousel-img {
    margin: 0 auto;
    width: 660px;
    height: 280px;
    border-radius: 15px;
    cursor: pointer;
}

.user-box:hover .user-out-box {
    display: block;
}

.user-out-box {
    color: #fff;
    font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 10px;
    position: absolute;
    bottom: -32px;
    display: none;
}

.user-box {
    position: relative;

    .top-box {
        border-radius: 2px;
        width: 8px;
        height: 8px;
        background: #000;
        position: absolute;
        top: -4px;
        transform: rotate(45deg);
    }

    .box-bg {
        width: 32px;
        height: 28px;
        line-height: 28px;
        border-radius: 5px;
        background: #000;
        text-align: center;
        position: relative;
    }
}

/deep/.el-carousel__arrow {
    border: 2px solid #545454;
    width: 50px;
    height: 50px;
}

/deep/.el-icon {
    font-size: 20px;
}

/deep/.el-carousel__indicator--horizontal {
    padding: var(--el-carousel-indicator-padding-vertical) 2px;
}

/deep/ .el-carousel__button {
    width: 8px;
    height: 8px;
    border-radius: 4px;
}

/deep/ .is-active button {
    background: #62b1ff;
}

/deep/ .el-input__wrapper {
    background: inherit;
    background-color: rgba(246, 246, 246, 1);
    border-right: 0px;
    border-radius: 8px 0 0 8px;
}

/deep/ .el-input__inner {
    font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    color: #7f7f7f;
    text-align: left;
}

.dropdown {
    background: #000;
}

.login-box {
    font-size: 14px;
    color: #333;
    line-height: 40px;
    text-align: right;
    display: flex;
    align-items: center;

    .login-box-item {
        background: #000;
        color: #fff;
        text-align: center;
        border-radius: 57px;
        width: 50px;
        height: 26px;
        line-height: 26px;
        cursor: pointer;

        &:last-child {
            background: #fff;
            color: #000;
            margin-left: 18px;
        }
    }
}
</style>
