<template>
  <div style="filter: opacity(1)">
    <el-row v-if="language==0" class="btnbox" justify='space-between' :gutter="15">
      <el-col :lg="3" :md="6" :sm="12" :xs="12">
        <div class="funcBtn" @click="popRemark(0)">
          <img src="@/assets/dance/btn04.png"/>
          <h4>票务预订</h4>
        </div>
      </el-col>
      <el-col :lg="3" :md="6" :sm="12" :xs="12">
        <div class="funcBtn" @click="popRemark(1)">
          <img src="@/assets/dance/btn01.png"/>
          <h4>酒店预订</h4>
        </div>
      </el-col>
      <el-col :lg="3" :md="6" :sm="12" :xs="11">
        <div class="funcBtn" @click="popRemark(8)">
          <img src="@/assets/dance/btn08.png"/>
          <h4>旅游服务</h4>
        </div>
      </el-col>
      <el-col :lg="3" :md="6" :sm="12" :xs="11">
        <div class="funcBtn" @click="popRemark(2)">
          <img src="@/assets/dance/btn02.png"/>
          <h4>车辆预订</h4>
        </div>
      </el-col>
      <el-col :lg="3" :md="6" :sm="12" :xs="11">
        <div class="funcBtn" @click="popRemark(6)">
          <img src="@/assets/dance/btn07.png"/>
          <h4>预订查询</h4>
        </div>
      </el-col>
      <el-col :lg="3" :md="6" :sm="12" :xs="11">
        <div class="funcBtn" @click="popRemark(3)">
          <img src="@/assets/dance/btn03.png"/>
          <h4>餐饮预订</h4>
        </div>
      </el-col>
      <el-col :lg="3" :md="6" :sm="12" :xs="11">
        <div class="funcBtn" @click="popRemark(4)">
          <img src="@/assets/dance/btn05.png"/>
          <h4>化妆预约</h4>
        </div>
      </el-col>
      <el-col :lg="3" :md="6" :sm="12" :xs="11">
        <div class="funcBtn" @click="popRemark(5)">
          <img src="@/assets/dance/btn06.png"/>
          <h4>拍照预约</h4>
        </div>
      </el-col>
    </el-row>


    <el-row v-else class="btnbox enBtnbox" justify='space-between' :gutter="15">
      <el-col :lg="3" :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="3" :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="3" :md="8" :sm="12" :xs="12">
        <div class="funcBtn" @click="popRemark(8)">
          <img src="@/assets/dance/btn08.png"/>
          <h4>TRAVEL SERVICE</h4>
        </div>
      </el-col>
      <el-col :lg="3" :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="3" :md="8" :sm="12" :xs="12">
        <div class="funcBtn" @click="popRemark(6)">
          <img src="@/assets/dance/btn07.png"/>
          <h4>RESERVATION SEARCH</h4>
        </div>
      </el-col>
      <el-col :lg="3" :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="3" :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="3" :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"/>

  <!--  <div class="fixedKP" @click="addInvoice">-->
  <!--    <img src="@/assets/img/kp.svg"/>-->
  <!--    开票-->
  <!--  </div>-->
</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'
  },
  cptName: {
    type: String,
    required: true,
    default: ''
  }
})
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.')

}

function popRemark(type) {
  if (type == 6) {
    return router.push({
      path: '/match/list/reservationSearch',
      query: {
        matchId: props.matchId,
      }
    })
  }
  if (type == 8) {
    //todo 旅游
  }
  if (!form.value) {
    building()
    return
  }

  if ((form.value.isJdView == 0 && type == '1')
    || (form.value.isCarView == 0 && type == '2')
    || (form.value.isFoodView == 0 && type == '3')
    || (form.value.isMealView == 0 && type == '4')
    || (form.value.isPhotoView == 0 && type == '5')
    || (form.value.isTicket == 0 && type == '0')
  ) {
    building()
    return
  }

  const params = {
    matchId: props.matchId,
    title: language.value == 0 ? '预订说明' : 'Booking Instructions',
    type: type,
    cptName: props.cptName
  }
  proxy.$refs['orderRemarkRef'].open(params)

}

function goBooking(n) {
  switch (n) {
    case 0:
      // 票务
      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:
      //化妆
      router.push({path: `/booking/makeup/${props.matchId}`})
      break;
    case 5:
      //拍照
      router.push({path: `/booking/photography/${props.matchId}`})
      break;
  }
}

function addInvoice() {
  router.push({
    name: 'invoice',
    query: {
      activeId: props.matchId
    }
  })
}
</script>

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

//.btnbox {
//  .el-col-lg-4 {
//    max-width: 14.28%;
//    flex: 0 0 14.28%;
//  }
//}

.fixedKP {
  position: fixed;
  background: linear-gradient(-90deg, #8623FC, #453DEA);
  left: 0;
  top: 450px;
  cursor: pointer;
  color: #fff;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  text-align: center;

  img {
    width: 26px;
    height: 26px;
    display: block;
    margin: 10px auto 0px;
  }

  font-size: 13px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
}

.enBtnbox{
  .funcBtn{
    h4{font-size:16px;display: flex;align-items: center;width: 100%;justify-content: center;height: 36px;}
  }
}
@media screen and (max-width: 1400px) {
  .enBtnbox .funcBtn{
    h4{font-size:14px;}
  }
}
@media screen and (max-width: 1250px) {
  .enBtnbox .funcBtn{
    h4{font-size:12px;}
  }
}
</style>