<template>
    <div class="home-container-home">
        <!-- 顶部导航 -->
        <div class="van-nav-bar__content" style="background-color: #000; height: 50px;">
            <div class="van-nav-bar__title van-ellipsis">
                <div class="menu-item-icon van-image" style="height: 40px; margin: 10px 0 0;">
                    <img src="https://admin.xianyuxx.motorcycles/upload/80dc096a3a8977cd/0cf63ef072b934bc.png"
                        class="van-image__img" />
                </div>
            </div>
            <div @click="onopenChat1"  class="van-nav-bar__right">
                <i class="van-icon van-icon-chat-o" style="color:#fff; font-size:24px;"></i>
            </div>
        </div>

        <!-- 轮播图 -->
        <div class="banner">
            <van-swipe :autoplay="3000" indicator-color="white" style="height: 200px;">
                <van-swipe-item v-for="(item, index) in banners" :key="index">
                    <van-image :src="fullImgUrl(item.url)" width="100%" height="200px" fit="cover" />
                </van-swipe-item>
            </van-swipe>
        </div>

        <!-- 公告栏滚动 -->
        <div class="notice-bar">
            <van-notice-bar scrollable speed="50" left-icon="volume-o" :text="currentNotice" color="#000"
                background="#fff" class="notice-swipe"/>
            <div class="linear-gradient"></div>
        </div>

        <div class="middelTit">
            <span style="font-size: 13px;" class="middelTit-left">{{ $t('High-end Zone') }}</span>
            <div style="font-size: 10px;" class="middelTit-right">{{$t('Enjoy the ultimate luxury experience')}}</div>
        </div>
        <div class="middleImg">
            <div @click="pushDetail(value)" v-for="(value,index) in gridItems" class="grid-item" :key="index">
                <img style="width: 200px; height: 200px;border-radius: 10px;" :src="fullImgUrl(value.img_url)" alt="">
                <div class="gridItemTag">
                    <span style="font-size: 16px;" class="textTag">Yes</span>
                </div>
            </div>
        </div>
        <!-- 列表的啦 -->
        <div style="font-size: 14px;margin-left: 3px;margin-top: 13px;">{{$t('Recommended connections')}}</div>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list :immediate-check="false" :offset="200" v-model="loading" :finished="finished" finished-text="Keine weiteren Inhalte." @load="onload">
                <van-cell v-for="(value,index) in homeList" :key="index">
                    <template #default>
                        <div class="listItem">
                            <div class="listLeft">
                                <img class="listImg" style="object-fit: cover;width: 200px;height: 120px;" :src="fullImgUrl(value.img_url)" alt="">
                                <div class="gridItemTag1">
                                    <span style="font-size: 16px;" class="textTag1">Great</span>
                                </div>
                            </div>

                            <div style="margin-left: 10px;">
                                <div style="display: flex;flex-direction: row;align-items: center;">
                                    <img style="width: 120px;" :src="tagImg" alt="">
                                    <span style="font-size: 16px;margin-left: 5px;font-weight: bold;">{{ value.xuanfei_name }}</span>
                                </div>
                                <div style="border: #000 solid 1px;border-radius: 8px;padding: 8px;
                                font-size: 12px;margin-top: 5px;font-weight: bold;">
                                    {{value.introduce}}
                                </div>
                                <div style="display: flex;flex-direction: row;align-items: center;margin-top: 5px;">
                                    <span style="font-size: 14px;font-weight: 500;">{{$t('Charge range')}}</span>
                                    <img style="width: 100px;" :src="starsImg" alt="">
                                </div>
                                <div style="font-size: 12px;margin-top: 5px;">
                                    {{$t('Height')}}:{{value.height}}cm {{$t('Bust')}}:{{value.bust}} {{$t('Service City')}}:{{value.address}} {{$t('National air freight:Yes')}}
                                </div>
                                <van-button @click="pushDetail(value)" style="width: 100%;height: 36px;
                                font-size: 14px;border-radius: 8px;margin-top: 5px;background-color: black;" 
                                type="primary">{{$t('Ask her out')}}</van-button>
                            </div>
                        </div>
                    </template>
                </van-cell>
            </van-list>
        </van-pull-refresh>
    </div>
</template>

<script>
import img1 from '@/assets/user/1.jpg'
import img2 from '@/assets/user/2.jpg'
import img3 from '@/assets/user/3.jpg'
import img4 from '@/assets/user/4.jpg'
import img5 from '@/assets/user/5.jpg'
import img6 from '@/assets/user/6.jpg'
import img7 from '@/assets/user/7.jpg'
import img8 from '@/assets/user/8.jpg'
import img9 from '@/assets/user/9.jpg'
import tagImg from '@/assets/tag.jpg'
import starsImg from '@/assets/stars.jpg'
import { nowLocationUrl } from '@/utils/tools'
import { lunbo,xuanfeiList,gongGao } from '@/api/contract'
import { openChat1 } from '@/utils/chat'

export default {
    data() {
        return {
            banners: [
                // { imgUrl: "https://admin.xianyuxx.motorcycles/upload/e134baf684543f36/ca40561eb9109659.jpg" },
                // { imgUrl: "https://admin.xianyuxx.motorcycles/upload/942fd816c80ca783/f1d4aa380230ca67.jpg" }
            ],
            notices: [
                "Systeminformationen: Danke famp;uuml;r Ihren Beitritt. Schnallen Sie sich an, denn wir sind gleich dabei, in den Orgasmusmodus zuwechseln. Die Terminzeit ist tamp;auml;glich [11:00-23:00]. ",
                "Sollten Sie nach der vereinbarten Zeitanreisen, melden Sie sich bitte am namp;auml;chsten Tag an der Rezeption. Das Personal ist bereit! Verbindungsschritt: Kontaktieren Sie die Rezeption, wamp;auml;hlen Sie eine Frau aus undgenieamp;szlig;en Sie nach Abschluss der Aktivitamp;auml;t ein kostenloses Date in derselben Stadt",
            ],
            currentIndex: 0,
            currentNotice: "",
            gridItems: [
                // { src: img1 },
                // { src: img2 },
                // { src: img3 },
                // { src: img4 },
                // { src: img5 },
                // { src: img6 },
                // { src: img7 },
                // { src: img8 },
                // { src: img9 },

                // { src: img1 },
                // { src: img2 },
                // { src: img3 },
                // { src: img4 },
                // { src: img5 },
                // { src: img6 },
                // { src: img7 },
                // { src: img8 },
                // { src: img9 },
            ],
            loading: false,
            finished: false,
            refreshing: false,
            starsImg:starsImg,
            tagImg:tagImg,
            page:1,
            limit:10,
            limit1:100,
            homeList:[],
        }
    },
    mounted() {

        this.getGongGaoList()
        this.getBannerHome()
        this.getMiddelImg()
        this.getListHome()
    },
    methods: {
        onRefresh(){
            // 清空列表数据
            // this.finished = false;
            // 重新加载数据
            // 将 loading 设置为 true，表示处于加载状态
            // this.loading = true;
        },
        onload(){
            this.page ++ 
            this.getListHome()
            // console.log('刷新列表的啦')
        },
        pushDetail(item){
            this.$router.push({path:'/userDetail',query:{id:item.id}})
        },
        async getBannerHome(){
            const res = await lunbo({is_index:1})
            if(res.code == 200){
                this.banners = res.data
            }
            // console.log('首页轮播：',res)
        },
        async getMiddelImg(){
            const res = await xuanfeiList({page:this.page,limit:this.limit1})
            if(res.code == 200){
               const list = res.data.list
               list.forEach(it => {
                if(it && it.img_url){
                    this.gridItems.push(it)
                }
               })
            }
            // console.log('中间的图片:',res)
        },
        async getListHome(){
            try{
                const res = await xuanfeiList({page:this.page,limit:this.limit})
                if(res.code == 200){
                    const list = res.data.list
                    if(this.page == 1){
                        this.homeList = list
                    }else{
                        list.forEach(it => {
                            this.homeList.push(it)
                        })
                    }
                    if(res.data.count <= this.homeList.length){
                            this.loading = false
                            this.finished = true
                    }
                }
                // console.log('选妃列表',res)
            }catch(err){
                this.finished = false
            }finally{
                this.loading = false
            }
        },
        async getGongGaoList(){
            const res = await gongGao()
            if(res.code == 200){
                this.notices = res.data
                // console.log('当前的公告是：',res)
                this.currentNotice = this.notices[0].name + '：' + this.notices[0].text;
                setInterval(() => {
                    this.currentIndex = (this.currentIndex + 1) % this.notices.length;
                    this.currentNotice = this.notices[this.currentIndex].name + '：' + this.notices[this.currentIndex].text;
                }, 5000);
            }
        },
        fullImgUrl(imgUrl){
            if(!imgUrl){
                return ''
            }
            // console.log('图片地址：',nowLocationUrl + imgUrl)
            return nowLocationUrl + imgUrl
        },
        onopenChat1(){
            openChat1()
        }
    }
}

// (function(){
// var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
// s1.async=true;
// s1.src='https://embed.tawk.to/68cbe92fb285fd192a490592/1j5e8dp99';
// s1.charset='UTF-8';
// s1.setAttribute('crossorigin','*');
// s0.parentNode.insertBefore(s1,s0);
// })();

</script>

<style lang="scss" scoped>
.home-container-home {
    position: relative;
    min-height: 100vh;
    background-color: #fff;
    font-family: Yu Gothic, Meiryo, sans-serif;
    margin-bottom: 200px;

    :deep(.van-nav-bar__title) {
        max-width: 90%;
    }
}

/* 提示条样式 */
.notice-bar {
    position: relative;
    padding: 30px;
    background: "#fff"
}

.notice-swipe {
    background: #fff;
    color: #000;
    font-weight: 500;
    font-size: 28px;
}


/* 控制文字部分 */
:deep(.van-notice-bar__wrap) {
    height: 40px;
    display: flex;
    align-items: center;
    font-size: 32px;
    line-height: 26px;
}

// PC
@media (hover: hover) and (pointer: fine) {
.notice-swipe {
    background: #fff;
    color: #000;
    font-weight: 500;
    font-size: 14px;
}
/* 控制文字部分 */
:deep(.van-notice-bar__wrap) {
    height: 40px;
    display: flex;
    align-items: center;
    font-size: 18px;
    line-height: 26px;
}
}

/* 左侧图标大小 */
:deep(.van-notice-bar__left-icon .van-icon) {
    font-size: 40px;
    color: #000;
    margin-right: 16px;
}

:deep(.van-notice-bar__left-icon img) {
    width: 32px;
    height: 32px;
    margin-right: 10px;
}

/* 渐变遮罩，可选 */
.linear-gradient {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: calc(100% - 20px);
    background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff);
}

.banner {
    margin-top: 0px;
}


.middleImg{
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(2,200px);
    grid-auto-columns: 200px;
    gap: 20px;
    overflow-x: auto;
    padding: 10px;
}
.grid-item {
//   background-color: #4ade80;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* X偏移 Y偏移 模糊 半透明黑色 */
  .gridItemTag{
        position: absolute;
        top: -30px;
        right: -70px; /* 根据旋转角度调整位置 */
        background-color: #000; /* 黑底 */
        color: #fff;            /* 白字 */
        width: 200px;
        height: 100px;
        // font-size: 18px;
        font-weight: bold;
        align-items: center;
        transform: rotate(45deg); /* 旋转 45° */   
        .textTag{
            position: absolute;
            bottom: 5px;
            left: 80px;
            // font-size: 30px;
        }     
    }
}
.middelTit{
    display: flex;
    flex-direction: row;
    padding: 10px;
    align-items: center;
    font-weight: 500;
    &-left{
        // font-size: 26px;
    }
    &-right{
        border-top-left-radius: 20px;
        border-bottom-right-radius: 20px;
        background-color: #000;
        color: #fff;
        // font-size: 20px;
        padding: 5px;
        margin-left: 10px;
    }
}
.listItem{
    padding: 10px;
    display: flex;
    flex-direction: row;
}
.listLeft{
    // display: flex;
    // background-color: red;
    position: relative;
    overflow: hidden;
}
.listImg{
    // margin-top: 10px;
    // justify-content: center;
    // align-items: center;
    // color: white;
    border-radius: 6px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* X偏移 Y偏移 模糊 半透明黑色 */
    object-fit: cover;
}
.gridItemTag1{
        position: absolute;
        top: -20px;
        right: -60px; /* 根据旋转角度调整位置 */
        background-color: #000; /* 黑底 */
        color: #fff;            /* 白字 */
        width: 200px;
        height: 100px;
        // font-size: 18px;
        font-weight: bold;
        align-items: center;
        transform: rotate(45deg); /* 旋转 45° */   
        .textTag1{
            position: absolute;
            bottom: 5px;
            left: 60px;
            // font-size: 30px;
        }     
}

</style>