<template>
  <div>
    <div class="banner">
      <img v-if="language==0" src="@/assets/booking/cy_text_c.png">
      <img v-else src="@/assets/booking/cy_text_e.png">
    </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 class="box">
      <el-row :gutter="20">
        <el-col v-for="(h,index) in list" :span="12" class="mb20">
          <el-card>
            <el-row :gutter="20" align="middle" class="hotel">
              <el-col :span="12">
                <el-image :src="fillImgUrl(h.photos?.split(',')[0])" class="w100 as16_9" fit="cover" />
              </el-col>
              <el-col :span="12">
                <h3 class="esp m0">{{ h.name }}</h3>
                <p class="esp addr">
                  <el-icon color="#929AA0">
                    <LocationFilled />
                  </el-icon>
                  {{ h.addName }}
                </p>
                <div v-if="language==0" class="price mb10"><i class="text-warning">¥</i><span
                  class="text-warning"
                >{{ h.price || 0 }}</span>起
                </div>
                <div v-else class="price mb10"><i class="text-warning">€</i><span class="text-warning">{{
                  h.price || 0
                }}</span>start
                </div>
                <el-button class="btn-lineG" round size="large" type="primary" @click="goDetail(h)">
                  {{ language == 0 ? '立即预约' : 'Select' }} ⇀
                </el-button>
              
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    
    </div>
  
  </div>
</template>

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

const { proxy } = getCurrentInstance()
const route = useRoute()
const router = useRouter()
const language = useStorage('language', 0)
const query = ref({
  name: ''
})
const list = ref([''])
onMounted(() => {
  getList()
})

function getList() {
  query.value.activityId = route.params.cptId
  getActivityRestaurantList(query.value).then(res => {
    list.value = res.rows
  })
}

async function goDetail(n) {
  const { data } = await getBaseInfoByActiveId(route.params.cptId)
  if (data.isJdView == 0) {
    return proxy.$modal.confirm(language.value == 0 ? '感谢您对本次比赛的关注，该服务暂无可预订信息，敬请期待。' : 'Thank you for your attention to this competition. The service is currently unavailable for booking. Please stay tuned.')
  }
  await router.push({
    name: 'dinnerDetail',
    params: {
      id: n.id
    },
    query: {
      detail: encodeURIComponent(JSON.stringify(n))
    }
    
  })
}
</script>

<style lang="scss" scoped>
.hotel {
}

.banner {
  height: 140px;
  background-size: cover;
  text-align: center;
  background: url("@/assets/booking/cy_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;
  }
}

.addr {
  font-weight: 400;
  font-size: 16px;
  color: #929AA0;
}

.price {
  font-weight: 400;
  font-size: 18px;
  color: #929AA0;
  
  i {
    font-size: 24px;
    font-style: normal;
  }
  
  span {
    font-weight: 600;
    font-size: 36px;
    font-family: "DIN Alternate";
    margin: 0 6px;
  }
}
</style>