<template>
  <div class="home-container px">
    <!-- 顶部导航栏 -->
    <div class="nav-bar newnavbar van-nav-bar van-hairline--bottom">
      <div class="van-nav-bar__content" style="background-color: black">
        <div
          class="van-nav-bar__title van-ellipsis"
          style="
            font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
            font-size: 20px;
            font-weight: 600;
            letter-spacing: 1px;
            text-transform: uppercase;
            color: #fff;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
          "
        >
          {{$t('Hotels')}}
        </div>
        <div @click="openHotelChat" class="van-nav-bar__right">
          <i class="van-icon van-icon-chat-o" style="color: #fff"></i>
        </div>
      </div>
    </div>
    <!--  -->
    <div class="wrap">
      <div
        v-if="images && images.length"
        style="position: relative; margin-top: 2px"
      >
        <!-- 轮播 -->
        <van-swipe :autoplay="3000" style="height: 200px">
          <van-swipe-item v-for="(item, index) in images" :key="index">
            <img
              :src="fullUrl1(item.url)"
              style="width: 100%; height: 200px; object-fit: cover"
            />
          </van-swipe-item>
        </van-swipe>

        <!-- 单独的文字块 -->
        <div
          style="
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            background: rgba(0, 0, 0, 0.4);
            color: #fff;
            font-size: 12px;
            padding: 12px;
            border-radius: 10px 10px 0 0;
            box-sizing: border-box;
          "
        >
        {{$t('guideDetail1')}}
        </div>
      </div>

      <div class="Income">
        <div>
          <div @click="tipsShow=false">{{$t('Mitgliedseinkommen')}}</div>
          <div>
            <i @click="tipsShow=true" class="van-icon van-icon-info" style="font-size: 25px"><!----></i
            >
            <!-- <img
              src="img/order-fill.1ff02368.png"
              alt=""
              style="width: 25px; height: 25px; margin-left: 20px"
            /> -->
            <van-icon name="orders-o"  @click="$router.push('/order')" style="margin-left: 5px;" size="24"/>
          </div>
        </div>
        <div class="IncomeMain" style="" v-if="!tipsShow">
          <div>
            <p>{{$t('Kontostand')}}</p>
            <p>{{info.all_money}}</p>
          </div>
          <div>
            <p>{{$t('Einkommen heute')}}</p>
            <p>{{info.today_in}}</p>
          </div>
          <div>
            <p>{{ $t('Anzahl der Aufgaben') }}</p>
            <p>{{info.all_task_do}}/{{ info.all_task }}</p>
          </div>
          <div>
            <p>{{$t('Gesamteinnahmen')}}</p>
            <p>{{info.all_in}}</p>
          </div>
        </div>
        <div class="IncomeRules" v-if="tipsShow">
          {{$t('guideDetail2')}}
        </div>
        <div class="GrabOrder" @click="onCreateOrder">{{$t('Aufgabe starten')}}</div>
      </div>

      <div
        style="
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 10px;
        "
      >
        <span style="font-size: 20px; font-weight: bold">{{$t('Bellebte Hotels')}}</span>
      </div>

      <div style="margin-top: 5px" class="masonry-wrap">
        <div class="masonry">
          <div v-for="(item, i) in hotelList" :key="i" class="masonry-item">
            <img
              @click="tapImgItem(item)"
              :src="fullUrl(item.img_url)"
              alt=""
              loading="lazy"
            />
          </div>
        </div>
      </div>

      <!-- <div data-v-3b3fbaa9="" class="shuadanBtm">
                <div data-v-3b3fbaa9="">Beliebte Hotels</div>
                <div data-v-3b3fbaa9="" class="Rechargelist">
                    <div data-v-3b3fbaa9="" class="item">
                        <div data-v-3b3fbaa9=""><img @click="nima" data-v-3b3fbaa9=""
                                src="https://admin.xianyuxx.motorcycles/upload/b41e05aba2905e8d/76900ad9488ebe24.jpg"
                                alt="" class="firstimg">
                            <div data-v-3b3fbaa9=""><img data-v-3b3fbaa9=""
                                    src="https://admin.xianyuxx.motorcycles/upload/f321d377807a32cc/afe421ea052bda7a.jpg"
                                    alt=""><img data-v-3b3fbaa9=""
                                    src="https://admin.xianyuxx.motorcycles/upload/d03479d2a6f1d6b9/90cb2339ccbbc472.jpg"
                                    alt=""></div>
                        </div>
                    </div>
                    <div data-v-3b3fbaa9="" class="item">
                        <div data-v-3b3fbaa9="">
                            <div data-v-3b3fbaa9=""><img data-v-3b3fbaa9=""
                                    src="https://admin.xianyuxx.motorcycles/upload/3d7a69fe5611cdfd/0ee85052ab9292bb.jpg"
                                    alt=""><img data-v-3b3fbaa9=""
                                    src="https://admin.xianyuxx.motorcycles/upload/1819f8fb47f051d9/da0c28890367f40d.jpg"
                                    alt=""></div><img data-v-3b3fbaa9=""
                                src="https://admin.xianyuxx.motorcycles/upload/98918a9686b6d9e9/13c0bf45fd0ff39f.jpg"
                                alt="" class="firstimg">
                        </div>
                    </div>
                    <div data-v-3b3fbaa9="" class="item">
                        <div data-v-3b3fbaa9=""><img data-v-3b3fbaa9=""
                                src="https://admin.xianyuxx.motorcycles/upload/b975fe60de93127a/44d7bc2daac50937.jpg"
                                alt="" class="firstimg">
                            <div data-v-3b3fbaa9=""><img data-v-3b3fbaa9=""
                                    src="https://admin.xianyuxx.motorcycles/upload/341c65ef164da91a/a60b3e27ddb76eab.jpg"
                                    alt=""><img data-v-3b3fbaa9=""
                                    src="https://admin.xianyuxx.motorcycles/upload/2d6632edb4ed8d44/2beb2f51f208ba2e.jpg"
                                    alt=""></div>
                        </div>
                    </div>
                    <div data-v-3b3fbaa9="" class="item">
                        <div data-v-3b3fbaa9="">
                            <div data-v-3b3fbaa9=""><img data-v-3b3fbaa9=""
                                    src="https://admin.xianyuxx.motorcycles/upload/1a9ee841c0f72a58/6df9b280af685b13.jpg"
                                    alt=""><img data-v-3b3fbaa9=""
                                    src="https://admin.xianyuxx.motorcycles/upload/73d4906673e53df2/625716368c9626a1.jpg"
                                    alt=""></div><img data-v-3b3fbaa9=""
                                src="https://admin.xianyuxx.motorcycles/upload/3ea26aad09e74709/07c6b46b91f2b959.jpg"
                                alt="" class="firstimg">
                        </div>
                    </div>
                </div>
            </div> -->
    </div>
    <div style="height: 80px"></div>
  </div>
</template>

<script>
import { jiudianList, lunbo,allInfo,createOrder } from "@/api/contract";
import router from "@/router";
import { openChat1 } from "@/utils/chat";
import { nowLocationUrl } from "@/utils/tools";
// import Footer from '@/components/footer';

export default {
  data() {
    return {
      images: [
        // {img_url:"http://172.93.218.201:1516/xuanfei/20250919/34b09bbc286ac454b68e8a9646d45466.jpg"},
        // {img_url:"http://172.93.218.201:1516/xuanfei/20250919/b2f03af4011ce4e5bdaca814eda4e52b.jpg"}
      ],
      hotelList: [],
      origin: "",
      origin1: "",
      swipeKey: 0,
      tipsShow:false,
      info:{}
    };
  },
  /**
   *
   */
  methods: {
    // nima() {
    //     this.$router.push({ path: "/detail" })
    // },
    async getLunBoHotel() {
      const res = await lunbo({ is_index: 0 });
      if (res.code === 200) {
        this.images = Array.isArray(res.data) ? res.data : res.data?.list || [];
      }
      console.log("酒店轮播图：", res.data);
    },
    async getJiuDianList() {
      const res = await jiudianList();
      if (res.code == 200) {
        this.hotelList = res.data;
      }
      console.log("输出的酒店列表：", res);
    },
    fullUrl(p) {
      if (!p) return "";
      // 自动处理前导/结尾斜杠、相对/绝对路径
      try {
        return new URL(p, this.origin).href;
      } catch (e) {
        const a = (this.origin || "").replace(/\/+$/, "");
        const b = String(p).replace(/^\/+/, "");
        return a && b ? `${a}/${b}` : b || a;
      }
    },
    fullUrl1(p) {
      if (!p) return "";
      return nowLocationUrl + p;
    },

    tapImgItem(item) {
      this.$router.push({ path: "/detail", query: { id: String(item.id) } });
    },
    openHotelChat() {
      openChat1();
    },
    getInfo(){
      allInfo().then(res=>{
        console.log(res,'info')
        this.info=res.data || {};
      })
    },
    onCreateOrder(){
      createOrder().then(res=>{

      })
    }
  },
  mounted() {
    this.origin = nowLocationUrl;
    this.origin1 = nowLocationUrl;
    this.getLunBoHotel();
    this.getJiuDianList();

    this.getInfo();
  },
};
</script>

<style lang="less" scoped>
/* 置顶导航条 */
::v-deep(.nav-bar.newnavbar.van-nav-bar) {
  // position: fixed;
  /* 固定在顶部 */
  top: 0;
  left: 0;
  width: 100%;
  /* 宽度占满屏幕 */
  z-index: 999;
  /* 确保在最上层 */
  background-color: #c01d1d !important;
  color: #fff !important;
}

.shuadanBtm {
  padding-bottom: 80px;
  /* 根据你 footer 的高度来调整 */
}

/* 标题文字 */
::v-deep(.nav-bar .van-nav-bar__title) {
  color: #fff !important;
}

.shuadanBtm[data-v-3b3fbaa9] {
  padding: 15px;
}

.shuadanBtm > div[data-v-3b3fbaa9]:first-child {
  color: #000;
  text-align: center;
  font-weight: 700;
}

.shuadanBtm .Rechargelist .item > div[data-v-3b3fbaa9] {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.shuadanBtm .Rechargelist .item > div > div[data-v-3b3fbaa9] {
  width: 49%;
}

.shuadanBtm .Rechargelist .item > div img[data-v-3b3fbaa9] {
  width: 100%;
  height: 27vw;
  -o-object-fit: cover;
  object-fit: cover;
  margin-top: 10px;
  display: block;
  border-radius: 8px;
}

.shuadanBtm .Rechargelist .item > div .firstimg[data-v-3b3fbaa9] {
  width: 49%;
  height: 56vw;
}

.masonry-wrap {
  padding: 8px; /* 外层留白，像截图那样 */
  background: #f3f4f6; /* 可选的浅灰背景 */
  border-radius: 12px;
}

/* 关键：多列布局 */
.masonry {
  column-gap: 12px; /* 列间距 ≈ 截图中的水平间隙 */
  column-count: 2; /* 固定两列；也可做响应式 */
}

/* 让每个卡片在列中独立排布且不被拆分 */
.masonry-item {
  break-inside: avoid; /* 避免跨列断开 */
  margin-bottom: 12px; /* 垂直间距 */
  border-radius: 12px; /* 圆角卡片 */
  overflow: hidden; /* 裁剪图片圆角 */
  background: #fff; /* 有轻微“卡片感” */
  /* 可选阴影： */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.masonry-item img {
  display: block;
  width: 100%;
  height: auto; /* 让高度随比例变化 */
  object-fit: cover; /* 如果想更“紧致”，保留 */
}

.Income {
  padding: 15px;
  background: linear-gradient(90deg, #323233, #000);
  color: #fff;
  border-radius: 10px;
  margin-top: 10px;
  .IncomeMain {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    text-align: center;
    & > div {
      flex: 0 0 50%;
      & > div :first-child {
        font-weight: 700;
      }
      p {
        margin: 5px 0;
        &:first-child {
          font-weight: 700;
        }
      }
    }
  }

  .IncomeRules {
    padding: 15px 15px 0;
  }
  .GrabOrder {
    border-radius: 8px;
    padding: 30px 0;
    text-align: center;
    font-size: 1.2rem;
    margin-top: 20px;
    // line-height: 7vw;
    background: #fff;
    color: #000;
  }

  & > div:first-child {
    border-bottom: 1px solid #fff;
    padding-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.wrap {
  padding: 5px;
}
</style>
