<template>
  <div style="filter: opacity(1)">
    <el-row :gutter="14" v-if="language==0">
      <el-col :lg="4" :md="8" :sm="12" :xs="12">
        <div class="funcBtn" @click="popRemark(0)">
          <img src="@/assets/dance/btn04.png"/>
          <h4>票务预订</h4>
        </div>
      </el-col>
      <el-col :lg="4" :md="8" :sm="12" :xs="12">
        <div class="funcBtn" @click="popRemark(1)">
          <img src="@/assets/dance/btn01.png"/>
          <h4>酒店预订</h4>
        </div>
      </el-col>
      <el-col :lg="4" :md="8" :sm="12" :xs="12">
        <div class="funcBtn" @click="popRemark(2)">
          <img src="@/assets/dance/btn02.png"/>
          <h4>车辆预订</h4>
        </div>
      </el-col>
      <el-col :lg="4" :md="8" :sm="12" :xs="12">
        <div class="funcBtn" @click="popRemark(3)">
          <img src="@/assets/dance/btn03.png"/>
          <h4>餐饮预订</h4>
        </div>
      </el-col>
      <el-col :lg="4" :md="8" :sm="12" :xs="12">
        <div class="funcBtn" @click="popRemark(4)">
          <img src="@/assets/dance/btn05.png"/>
          <h4>化妆预约</h4>
        </div>
      </el-col>
      <el-col :lg="4" :md="8" :sm="12" :xs="12">
        <div class="funcBtn" @click="popRemark(5)">
          <img src="@/assets/dance/btn06.png"/>
          <h4>拍照预约</h4>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="14" v-else>
      <el-col :lg="4" :md="8" :sm="12" :xs="12">
        <div class="funcBtn"  @click="popRemark(0)">
          <img src="@/assets/dance/btn04.png"/>
          <h4>TICKET BOOKING</h4>
        </div>
      </el-col>
      <el-col :lg="4" :md="8" :sm="12" :xs="12">
        <div class="funcBtn" @click="popRemark(1)">
          <img src="@/assets/dance/btn01.png"/>
          <h4>HOTEL RESERVATION</h4>
        </div>
      </el-col>
      <el-col :lg="4" :md="8" :sm="12" :xs="12">
        <div class="funcBtn"  @click="popRemark(2)">
          <img src="@/assets/dance/btn02.png"/>
          <h4>TRANSPORTATION RESERVATION</h4>
        </div>
      </el-col>
      <el-col :lg="4" :md="8" :sm="12" :xs="12">
        <div class="funcBtn"  @click="popRemark(3)">
          <img src="@/assets/dance/btn03.png"/>
          <h4>DINING RESERVATION</h4>
        </div>
      </el-col>
      <el-col :lg="4" :md="8" :sm="12" :xs="12">
        <div class="funcBtn" @click="popRemark(4)">
          <img src="@/assets/dance/btn05.png"/>
          <h4>MAKEUP APPOINTMENT</h4>
        </div>
      </el-col>
      <el-col :lg="4" :md="8" :sm="12" :xs="12">
        <div class="funcBtn" @click="popRemark(5)">
          <img src="@/assets/dance/btn06.png"/>
          <h4>PHOTOGRAPHY APPOINTMENT</h4>
        </div>
      </el-col>
    </el-row>
  </div>

  <order-remark ref="orderRemarkRef" @submit="goBooking"/>
</template>

<script setup>
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";
import {useStorage} from "@vueuse/core/index";
import OrderRemark from '@/viewsPc/components/orderRemark'
import {getBaseInfoByActiveId} from "@/apiPc/booking";
import {getCurrentInstance} from "@vue/runtime-core";
import {onMounted} from "vue";
const {proxy} = getCurrentInstance()

const router = useRouter()
const language= useStorage('language',0)
const props = defineProps({
  matchId: {
    type: String,
    required: true,
    default: '0'
  }
})
const form = ref({})
onMounted(()=>{
  getBaseInfoByActiveId(props.matchId).then(res=>{
    form.value = res.data || null
  }).catch(err=>{
    form.value = null
    console.log(err)
  })
})

function building() {
  ElMessage.warning(language.value==0?'感谢您对本次比赛的关注，该服务暂无可预订信息，敬请期待。':'Thank you for your attention to this competition. The service is currently unavailable for booking. Please stay tuned.')
  return
}
function popRemark(type){
  if(!form.value){
    building()
    return
  }
  if((form.value.isJdView == 0&&type=='1') || (form.value.isCarView == 0&&type=='2') || (form.value.isFoodView == 0&&type=='3') || type=='0' || type=='4' || type=='5'){
    building()
    return
  }
    const params = {
      matchId: props.matchId,
      title: language.value == 0 ?'预订说明':'Booking Instructions',
      type: type
    }
    proxy.$refs['orderRemarkRef'].open(params)
}
function goBooking(n) {
  switch (n) {
    case 0:
      // 票务
      building()
      router.push({path: `/booking/ticket/${props.matchId}`})
      break;
    case 1:
      //酒店
      router.push({path: `/booking/hotel/${props.matchId}`})
      break;
    case 2:
      //车辆
      router.push({path: `/booking/car/${props.matchId}`})
      break;
    case 3:
      //餐饮
      router.push({path: `/booking/dinner/${props.matchId}`})
      break;
    case 4:
      //化妆
      building()
      router.push({path: `/booking/makeup/${props.matchId}`})
      break;
    case 5:
      //拍照
      building()
      router.push({path: `/booking/photography/${props.matchId}`})
      break;
  }
}
</script>

<style scoped lang="scss">
  h4{padding: 0 10px;}
</style>