<template>
  <div>
    <div class="banner">
      <h2>{{ language == 0 ? '旅游服务' : 'Travel Service' }}</h2>
    </div>
    <div class="box">
      <div class="searchBar">
        <el-input v-model="query.name" :placeholder="language==0?'请输入关键字搜索':'Search'" class="no-border" />
        <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) in list" :key="h.id" :lg="24" :md="24" :sm="24"
          :xl="24"
          :xs="24" class="mb20"
        >
          <el-card>
            <!--        酒店列表-->
            <el-row :gutter="20" align="middle" class="hotel">
              <el-col :span="4" style="display: flex;justify-content: center">
                <div class="imgbox">
                  <img :src="fillImgUrl(h.cover?.split(',')[0])" class="w100">
                </div>
              </el-col>
              <el-col :span="12">
                <h3 class="esp">{{ h.name }}</h3>
                <!--                <div class="starBox">-->
                <!--                  <img v-for="i in Number(h.rank||0)" src="@/assets/booking/star.png">-->
                <!--                </div>-->
                <p class="esp addr mt20">
                  {{ language == 0 ? '联系电话' : 'Contact Number' }}：
                  <span class="ml5">{{ h.contact }}</span>
                </p>
                <p class="esp addr mt20">
                  <!--                  <el-icon color="#929AA0" size="16" style="position: relative;top: 2px">-->
                  <!--                    <Clock />-->
                  <!--                  </el-icon>-->
                  {{ language == 0 ? '集合时间' : 'Opening Time' }}：
                  <span class="ml5">{{ h.startTime }} ～ {{
                    h.startTime
                  }}</span>
                </p>
                <p class="esp addr mt20">
                  <!--                  <el-icon color="#929AA0" size="16" style="position: relative;top: 2px">-->
                  <!--                    <LocationFilled />-->
                  <!--                  </el-icon>-->
                  {{ language == 0 ? '集合地点' : 'Meeting Point' }}：
                  {{ h.address }}
                </p>
              </el-col>
              <el-col :span="4" class="text-right">
                <div class="price">{{ language == 0 ? '¥' : '€' }}<span>{{ h.price }}</span>
                  <i v-if="language==0">起</i>
                </div>
                <el-button class="btn-lineG w200px" round type="primary" @click="goDetail(h)">
                  {{ 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>
</template>

<script setup>
import * as booking from '@/apiPc/booking'
import { useRouter, useRoute } from 'vue-router'
import { useStorage } from '@vueuse/core/index'
import useUserStore from '@/store/modules/user'
import { ref, onMounted } from 'vue'
import { getCurrentInstance } from '@vue/runtime-core'

const { proxy } = getCurrentInstance()

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

function getList() {
  loading.value = true
  booking.getScenicList(query.value).then(res => {
    list.value = res.rows
    loading.value = false
    console.log(list.value)
  }).catch(e => {
    loading.value = false
  })
}

async function goDetail(item) {
  if (!user) {
    useStore().setVisitor()
    return
  }
  const res = await booking.checkOrderPay(6)
  if (res.data) {
    await router.push({
      name: 'travelDetail',
      params: {
        scenicId: item.scenicId
      },
      query: {
        lasId: item.id
      }
    })
  } else {
    await proxy.$modal.confirm(language.value == 0 ? '您有未支付的订单，请前往支付。' : 'You have unpaid orders, please proceed to payment.')
    await router.push({
      name: 'myReservation'
    })
  }
}
</script>

<style lang="scss" scoped>
.hotel {
  h3 {
    margin: 0 0 10px;
  }
  
  img.w100 {
    object-fit: cover;
    aspect-ratio: 10/14
  }
  
  .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;
    }
  }
}

.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;
  }
  
  color: #fff;
  font-style: italic;
  font-size: 24px;
  text-transform: uppercase;
  
  h2 {
    margin: -30px auto 0;
    font-weight: bold;
    letter-spacing: 4px;
  }
}

.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 {
  max-width: 159px;
  max-height: 210px;
  //width: 159px;
  //height: 210px;
  
  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);
  }
}
</style>