<template>
    <div>
      <div class="box">
        <el-card class="mt30">
          <div class="flex">
              <p class="esp">{{car.checkIn}}</p>
              <img src="@/assets/booking/wf.png"/>
              <p class="esp text-right">{{car.checkOut}}</p>
          </div>
        </el-card>
        <el-card class="mt30 mb60">
          <div class="lineHead">
            <ul>
              <li>{{ language == 0 ? '车型选择' : 'Available Cars' }}</li>
            </ul>
          </div>

          <div>
            <div v-for="(r,index) in list" :key="index" class="room">
              <el-row :gutter="30" align="middle">
                <el-col :span="4">
                  <div class="roomImg">
                    <img :src="fillImgUrl(r.photo?.split(',')[0])">
                  </div>
                </el-col>
                <el-col :span="14">
                  <h3 class="name">{{ r.roomType }}</h3>
                  <el-row :gutter="10">
                    <el-col :span="8">{{ r.area }}m²</el-col>
                    <el-col :span="8" v-show="r.windowFlag==1"> {{ language==0?'有窗':'With windows' }}</el-col>
                    <el-col :span="8" v-show="r.windowFlag==0"> {{ language==0?'无窗':'Windowless' }}</el-col>
                    <el-col :span="8" v-show="r.bathroomFlag==1"> {{ language==0?'热水洗浴':'Shower' }}</el-col>
                    <!-- <text v-show="r.bathroomFlag==0"> </text> -->
                    <el-col :span="8" v-show="r.addBedFlag==1"> {{ language==0?'允许加床':'Extra bed' }} </el-col>
                    <el-col :span="8" v-if="r.breakfastNum&&r.breakfastNum > '0'">
                      {{ r.breakfastNum }}{{ language==0?'份早餐':' breakfasts' }}
                    </el-col>
                    <el-col :span="8" v-else>{{ language==0?'无早餐':'No breakfast' }}</el-col>
                  </el-row>
                </el-col>
                <el-col :span="3">
                  <div class="price">{{ language==0?'¥':'€' }}<span>{{language==0?r.roomPrice:r.roomPriceEn}}</span></div>
                </el-col>
                <el-col :span="3">
                  <div class="bg-lineg" v-if="language==0"   @click="goOrder(r)">
                    订
                    <div>{{ language==0?'在线付':'Online' }}</div>
                  </div>
                  <el-button v-else class="btn-lineG w100" round type="primary"   @click="goOrder(r)">Select</el-button>
                  <div class="text-center text-primary mt10 fontsize14 pointer" v-if="language == 0">
                    剩余 {{(r.roomCount - (r.useCount||0)).toFixed()}} 间
                  </div>
                  <div class="text-center text-primary mt10 fontsize14" v-else>
                    {{(r.roomCount - (r.useCount||0)).toFixed()}} Remaining rooms
                  </div>
                </el-col>
              </el-row>
            </div>

            <el-empty v-if="list.length == 0" :image="`/img/order_no.png`" :image-size="228" description=""/>
          </div>
        </el-card>
      </div>
    </div>
</template>

<script setup>
import {useRouter} from "vue-router";
import {ref, reactive, onMounted} from "vue";
import {useRoute} from "vue-router";

import {useStorage} from "@vueuse/core/index";
import useUserStore from "@/store/modules/user";
const user = useUserStore().user
const language = useStorage('language', 0)
const router = useRouter()
const route = useRoute()
const form = ref({})
const car = ref({})
const query = ref({
  id: route.query.id
})
const loading = ref(false)
const list = ref([])
onMounted(()=>{
  car.value = JSON.parse(decodeURIComponent(route.query.detail))
  list.value = car.value.carVoList
})


</script>

<style scoped>

</style>