<template>
  <div>
    <div class="banner">
      <img v-if="language==0" src="@/assets/booking/jd_text_c.png">
      <img v-else src="@/assets/booking/jd_text_e.png">
    </div>
    <div class="box">
      <div class="searchBar">
        <el-input v-model="query.name" :placeholder="language==0?'请输入关键字搜索':'Search'" class="no-border">
        </el-input>
        <el-button class="btn-lineG" icon="search" size="large" type="primary" @click="getList">
          {{ language == 0 ? '搜索' : 'Search' }}
        </el-button>
      </div>
    </div>

    <div v-loading="loading" class="box">
      <el-row :gutter="20">
        <el-col v-for="(h,index) in list" :lg="24" :md="24" :sm="24" :xl="24" :xs="24" class="mb20">
          <el-card>
            <!--        酒店列表-->
            <el-row :gutter="20" align="middle" class="hotel">
              <el-col :lg="6" :md="6">
                <div class="imgbox">
                  <img :src="fillImgUrl(h.photos?.split(',')[0])" class="w100"/>
                </div>
              </el-col>
              <el-col :lg="12" :md="12">
                <h3 class="esp">{{ h.name }}</h3>
                <div class="starBox">
                  <img v-for="i in Number(h.starLevel||0)" src="@/assets/booking/star.png">
                </div>
                <div class="tagbox esp">
                  <span v-for="(t,index) in h.label?.split('，')" v-show="index<4">{{ t }}</span>
                  <a v-show="h.label?.split('，').length>4">{{ language == 0 ? '更多' : 'MORE' }} ></a>
                </div>
                <p class="esp addr mt20">
                  <el-icon color="#929AA0" size="16" style="position: relative;top: 2px">
                    <LocationFilled/>
                  </el-icon>
                  {{ h.address }}
                </p>
              </el-col>
              <el-col :lg="4" :md="4" class="text-right">
                <div class="price">{{ language == 0 ? '¥' : '$' }}<span>{{ h.price }}</span>
                  <i v-if="language==0">起</i>
                </div>
                <el-button @click="goDetail(h)" class="w200px blackBtn" round type="primary">
                  {{ language == 0 ? '立即预订' : 'Select' }} ⇀
                </el-button>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
      <el-empty v-show="!loading&&list.length==0" :image="`/img/order_no.png`" :image-size="228" description=""/>
      <div style="height: 50px"></div>
    </div>

  </div>
</template>

<script setup>
import * as booking from "@/apiPc/booking"
import {useRouter, useRoute} from "vue-router";
import {useStorage} from "@vueuse/core";
import useUserStore from "@/store/modules/user";
// import {ElMessageBox} from "element-plus";
// import {useRouteQuery} from '@vueuse/router'
import {onMounted} from "vue";

const router = useRouter()
const route = useRoute()

const useStore = useUserStore()
const user = useStore.user

// const flag = useRouteQuery('flag')

const language = useStorage('language', 0)
const query = ref({
  name: ''
})
const cptId = ref('')
const list = ref([])
const loading = ref(false)
onMounted(() => {
  query.value.activityId = route.params.cptId
  getList()
})

function getList() {
  loading.value = true
  booking.getHotelList(Object.assign({}, query.value)).then(res => {
    list.value = res.rows
    loading.value = false
    console.log(list.value)

  }).catch(e => {
    loading.value = false
  })
}

function goDetail(item) {
  if (!user) {
    useStore.setVisitor()
    return
  }

  router.push({
    name: 'hotelDetail',
    params: {
      hotelId: item.hotelId,
    },
    query: {
      id: item.id
    }
  })

  // if (item.meeting == '1') {
  //   ElMessageBox.confirm(item.meetText, '', {
  //     cancelButtonText: language.value == 1 ? 'Close ' : '关闭',
  //     confirmButtonText: language.value == 1 ? 'Continue to book' : '继续预订',
  //     dangerouslyUseHTMLString: true,
  //     type: 'warning',
  //   }).then((res) => {
  //     router.push({
  //       name: 'hotelDetail',
  //       params: {
  //         hotelId: item.hotelId,
  //       },
  //       query: {
  //         id: item.id
  //       }
  //     })
  //   })
  // } else {
  //   router.push({
  //     name: 'hotelDetail',
  //     params: {
  //       hotelId: item.hotelId,
  //     },
  //     query: {
  //       id: item.id
  //     }
  //   })
  // }
}
</script>

<style lang="scss" scoped>
.hotel {
  h3 {
    margin: 0 0 10px;
  }

  img.w100 {
    object-fit: cover;
    aspect-ratio: 16/9
  }

  .addr {
    font-size: 14px;
    color: #929AA0;
    font-weight: 400;
    margin: 0 0 10px;
  }

  .price {
    margin: 0 0 8px;
    color: #FF8124;
    font-size: 18px;

    span {
      font-size: 36px;
      margin: 0 8px;
      font-family: 'DINAlternate-Bold';
      font-weight: 600;
    }

    i {
      font-style: normal;
      color: #929AA0;
    }
  }

  .blackBtn {
    background: #000;
    border: #000;
  }
}

.banner {
  height: 140px;
  background-size: cover;
  text-align: center;
  background: url("@/assets/booking/jd_bg.png") center;
  display: flex;
  align-items: center;
  justify-content: center;

  img {
    display: block;
    margin: -30px auto 0;
    width: auto;
  }
}

.searchBar {
  position: relative;
  top: -30px;
  background: #FFFFFF;
  display: flex;
  padding: 20px;
  border-radius: 10px;
}

.no-border {
  border: none;
  background: #F5F7F9;

  :deep(.el-input__wrapper) {
    border: none;
    box-shadow: none;
    background: #F5F7F9;
  }
}

.imgbox {
  width: 100%;
  height: 100%;
  position: relative;

  img {
    width: 100%;
    height: 100%;
  }

  .starBox {
    position: absolute;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px 15px 3px;
  }
}

.po-r-b {
}

.starBox {
  border-radius: 14px 0 0 0;

  img {
    display: inline-block;
    margin-right: 4px;
    width: 24px;
  }
}

.tagbox {
  margin: 10px 0;

  a {
    color: #AFB5B9;
    font-size: 12px;
  }

  span {
    border-radius: 13px;
    font-size: 12px;
    padding: 3px 10px;
    margin-right: 10px;
    font-weight: 400;
  }

  span:nth-child(4n) {
    background: rgba(50, 177, 108, 0.2);
    color: rgba(50, 177, 108, 1);
  }

  span:nth-child(4n+1) {
    background: rgba(243, 152, 0, 0.2);
    color: rgba(243, 152, 0, 1);
  }

  span:nth-child(4n+2) {
    background: rgba(0, 160, 233, 0.2);
    color: rgba(0, 160, 233, 1);
  }

  span:nth-child(4n+3) {
    background: rgba(247, 64, 166, 0.2);
    color: rgba(247, 64, 166, 1);
  }
}

@media screen and (max-width: 768px) {
  .hotel h3 {
    margin: 20px 0 10px;
    font-size: 18px;
  }
}
</style>