<template>
  <div v-loading="loading" style="filter: opacity(1)">
    <el-row v-if="language==0" :gutter="15" class="btnbox" justify="space-between">
      <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 :gutter="15" class="btnbox enBtnbox" justify="space-between">
      <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, ref } 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 loading = ref(true)
const form = ref()
onMounted(() => {
  loading.value = true
  getBaseInfoByActiveId(props.matchId).then(res => {
    form.value = res.data || null
    loading.value = false
  }).catch(err => {
    form.value = null
    loading.value = false
    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 (!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.isTicketView == 0 && type == '0') ||
    (form.value.isScenicView == 0 && type == '8')
  ) {
    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
    case 8:
      // 旅游
      router.push({ path: `/booking/travel/${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>