<template>
  <div class="top-bg-img-box pos-r" :style="{ 'height': routePath === '/' ? '568px' : '260px' }">
    <img src="../../assets/img/edit/bj-img1920.png" class="bg-img" alt="">
    <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">
          <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">
            <img :src="user.data.avatar" 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>
      </div>
      <div class="dis-f jus-x al-item">
        <div class="logo-box dis-f al-item body-maxWidth">
          <img src="../../assets/homeImage/logo.png" class="logo-img" alt="">
          <img src="../../assets/homeImage/logoText.png" class="logo-text-img" alt="">
        </div>
      </div>
      <div class="dis-f jus-x al-item" style="margin-top:20px;" v-if="routePath === '/'">
        <div class="body-maxWidth">
          <el-carousel :interval="5000" arrow="always" height="330" style="height:330px;">
            <el-carousel-item v-for="item in bannerLists.data" :key="item.feedId">
              <div style="width:100%;height:100%;" class="dis-f jus-x al-item">
                <img class="carousel-img" :src="item.imageurl" alt="" @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="routePath !== '/seachPage'&&routePath !== '/detail'">
        <div class="body-maxWidth dis-f" style="height:48px;">
          <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 :value="12">
              <div style="padding:0 10px;">
                {{ item.name }}
              </div>
            </el-badge>
          </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";

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 changeTabBtnType = (item) => {
  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.path
tabBtnType.value = route.path

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

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

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

.top-bg-img-box .info-box .btm-seach-btn-box {
  width: 100%;
  height: 50px;
  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 {
  width: 120px;
  height: 47px;
  font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
  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: 16px;
  color: #7F7F7F;
  text-align: left;
}

.dropdown {
  background: #000;
}
</style>
  