<template>
  <div>
    <div class="box">
      <el-card class="mt30" v-loading="loading">
        <el-row v-if="form" class="hotel" align="middle" :gutter="20">

          <el-col :lg="16" :sm="24">
            <h3 class="esp flex">{{ form?.name }}
            </h3>


            <p class="esp addr">
              <el-icon size="16" style="position: relative;top: 2px" color="#929AA0">
                <LocationFilled/>
              </el-icon>
              {{ form?.addName }}
            </p>
          </el-col>
          <el-col :lg="8" :sm="24">
            <el-carousel height="120px">
              <el-carousel-item v-for="item in form.photos?.split(',')" :key="item">
                <el-image class="w100 h100" fit="contain" :src="fillImgUrl(item)"/>
              </el-carousel-item>
            </el-carousel>
          </el-col>
        </el-row>
        <el-empty v-else :image="`/img/order_no.png`" :image-size="228" description=""/>
      </el-card>

      <div class="mt30">
      </div>

      <el-card class="mt30 mb60">
        <div class="lineHead">
          <ul>
            <li>{{ language == 0 ? '餐饮选择' : 'Available Set meal' }}</li>
          </ul>
        </div>
        <div>
          <div v-for="(r,index) in roomList" :key="index" class="room">
            <el-row :gutter="30" align="middle">
              <el-col :span="4">
                <div class="roomImg">
                  <el-image fit="cover" :preview-src-list="r.photosList" :src="fillImgUrl(r.photos?.split(',')[0])"/>
                </div>
              </el-col>
              <el-col :span="14">
                <h3 class="name">{{ r.name }}<span class="text-primary">({{ r.categoryName }})</span></h3>
                <el-row :gutter="10">
                  <el-col :span="24">
                    <p>{{ language == 0 ? '配送时间' : 'Delivery time' }}：{{ r.psStart }}~{{ r.psEnd }}</p>
                    <p>{{ language == 0 ? '配送地址' : 'Delivery address' }}：{{ r.address }}</p>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="3">
                <div class="price">{{
                    language == 0 ? '¥' : '€'
                  }}<span>{{ language == 0 ? r.foodPrice : r.foodPriceEn }}</span></div>
              </el-col>
              <el-col :span="3">
                <el-button class="btn-lineG w100" round type="primary" @click="goOrder(r)">
                  {{ language == 0 ? '我要预订' : 'Select' }}
                </el-button>
              </el-col>
            </el-row>
          </div>

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

<script setup>
import {useRouter, useRoute} from "vue-router";
import {ref, onMounted} from "vue";
import {getMenuById} from "@/apiPc/booking"
import {useStorage} from "@vueuse/core/index";
import useUserStore from "@/store/modules/user";
import {fillImgUrl} from "@/utils/ruoyi";

const user = useUserStore().user
const language = useStorage('language', 0)
const router = useRouter()
const route = useRoute()
const form = ref({})
const query = ref({
  larId: route.params.id
})
const loading = ref(false)
const roomList = ref([])
const map = ref(null)
onMounted(() => {
  form.value = JSON.parse(decodeURIComponent(route.query.detail))
  getData()

})

function getData() {
  loading.value = true
  query.value.hotelId = route.query.id
  console.log(query.value)
  getMenuById(query.value).then(res => {
    loading.value = false
    roomList.value = res.rows
    for (let m of roomList.value) {
      var arr = []
      m.photosList = []
      arr = m.photos?.split(',')
      for (var a of arr) {
        m.photosList.push(fillImgUrl(a))
      }
      m.num = 0
      if (m.category == 0) {
        m.categoryName = language.value == 0 ? '早餐' : 'Breakfast'
      } else if (m.category == 1) {
        m.categoryName = language.value == 0 ? '午餐' : 'Lunch'
      } else {
        m.categoryName = language.value == 0 ? '晚餐' : 'Dinner'
      }
    }
  })
}

function goOrder(n) {
  if (!user) {
    useUserStore().setVisitor()
    return
  }
  router.push({
    name: 'dinnerOrder',
    params: {
      foodId: n.id
    },
    query: {
      food: encodeURIComponent(JSON.stringify(n)),
      restaurant: encodeURIComponent(JSON.stringify(form.value)),
    }
  })
}
</script>

<style scoped lang="scss">
.room {
  background: #FAFBFD;
  margin: 20px 0 0;
  padding: 20px;
  border: 1px solid #E5E5E5;

  .name {
    font-size: 20px;
    margin: 0 0 10px;

    span {
      font-weight: 400;
      padding: 0 10px;
      font-size: 16px;
    }
  }

  .roomImg {
    aspect-ratio: 16/9;
    border-radius: 10px;
    overflow: hidden;

    img {
      width: 100%;
      object-fit: cover;
      object-position: center;
      height: 100%;
    }
  }

  .price {
    color: #FF8124;
    font-size: 24px;

    span {
      font-size: 36px;
      font-family: "DIN Alternate"
    }
  }

  .bg-lineg {
    margin: auto;
    border-radius: 10px;
    text-align: center;
    padding: 7px 2px 2px;
    font-size: 24px;
    width: 66px;
    cursor: pointer;

    div {
      background: #fff;
      font-size: 13px;
      border-radius: 20px;
      padding: 0 10px;
      color: #453DEA;
      font-weight: 500;
    }
  }
}

.hotel {
  h3 {
    margin: 0 0 20px;
  }

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

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

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

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

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

.starBox {
  img {
    display: inline-block;
    margin-right: 4px
  }
}

.tagbox {
  margin: 15px 0;

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

  span {
    border-radius: 13px;
    font-size: 12px;
    padding: 4px 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);
  }
}

.mapBox {
  position: relative;
  overflow: hidden;
  height: 200px;

  #map {
    position: relative;
    left: -70px;
    width: calc(100% + 160px);
  }
}

.hotelImg {
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 16/9;

  img {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
  }
}
</style>