<template>
  <div style="filter: opacity(1)">
    <el-row v-if="language==0" class="btnbox" justify='space-between'>
      <el-col :lg="4" :md="7" :sm="11" :xs="11">
        <div class="funcBtn" @click="popRemark(0)">
          <img src="@/assets/dance/btn01.png"/>
          <h4>签证服务</h4>
        </div>
      </el-col>
      <el-col :lg="4" :md="7" :sm="11" :xs="11">
        <div class="funcBtn" @click="popRemark(1)">
          <img src="@/assets/dance/btn02.png"/>
          <h4>酒店预订</h4>
        </div>
      </el-col>
      <el-col :lg="4" :md="7" :sm="11" :xs="11">
        <div class="funcBtn" @click="popRemark(2)">
          <img src="@/assets/dance/btn03.png"/>
          <h4>接送服务</h4>
        </div>
      </el-col>
      <el-col :lg="4" :md="7" :sm="11" :xs="11">
        <div class="funcBtn" @click="goAbout">
          <img src="@/assets/dance/btn04.png"/>
          <h4>场地介绍</h4>
        </div>
      </el-col>
      <el-col :lg="4" :md="7" :sm="11" :xs="11">
        <div class="funcBtn" @click="liveClick">
          <img src="@/assets/dance/btn05.png"/>
          <h4>赛事直播</h4>
        </div>
      </el-col>
    </el-row>
    <el-row v-else class="btnbox" justify='space-between'>
      <el-col :lg="4" :md="7" :sm="11" :xs="11">
        <div class="funcBtn" @click="popRemark(0)">
          <img src="@/assets/dance/btn01.png"/>
          <h4>Visa Services</h4>
        </div>
      </el-col>
      <el-col :lg="4" :md="7" :sm="11" :xs="11">
        <div class="funcBtn" @click="popRemark(1)">
          <img src="@/assets/dance/btn02.png"/>
          <h4>HOTEL RESERVATION</h4>
        </div>
      </el-col>
      <el-col :lg="4" :md="7" :sm="11" :xs="11">
        <div class="funcBtn" @click="popRemark(2)">
          <img src="@/assets/dance/btn03.png"/>
          <h4>TRANSPORTATION RESERVATION</h4>
        </div>
      </el-col>
      <el-col :lg="4" :md="7" :sm="11" :xs="11">
        <div class="funcBtn" @click="goAbout">
          <img src="@/assets/dance/btn04.png"/>
          <h4>Venue Introduction</h4>
        </div>
      </el-col>
      <el-col :lg="4" :md="7" :sm="11" :xs="11">
        <div class="funcBtn" @click="liveClick">
          <img src="@/assets/dance/btn05.png"/>
          <h4>live streaming</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";
import * as match from "@/apiPc/match";

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()
const liveData = ref({})
onMounted(() => {
  getBaseInfoByActiveId(props.matchId).then(res => {
    form.value = res.data || null
  }).catch(err => {
    form.value = null
    console.log(err)
  })

  match.getInfoByCptId({ cptId:props.matchId }).then((res) => {
    liveData.value = res.data || {}
  })
})

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.')

}
const liveClick = () => {
  if (liveData.value.videoStatus=="1") {

    if(language.value==0){

      window.open(liveData.value.videoUrlCn)
    } else {
      window.open(liveData.value.videoUrlEn)
    }
  } else {
    ElMessage.warning(language.value == 0 ? '暂无直播' : 'No live')
  }
}
function popRemark(type) {
  if (type == 6) {
    return router.push({
      path: '/match/list/reservationSearch',
      query: {
        matchId: props.matchId,
      }
    })
  }

  if (type === 0 && language.value === 0) { //签证服务
    ElMessage.warning('请切换英文页面办理')
    return
  }

  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')
  ) {
    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
    }
  })
}
function goAbout() {
  router.push({path: `/about/wuDao`})
}
</script>

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

//.btnbox {
//  .el-col-lg-4 {
//    max-width: 14.28%;
//    flex: 0 0 14.28%;
//  }
//}
.funcBtn{text-transform: uppercase;
  h4 {display: flex;align-items: center;justify-content: center;height: 20%;}
}
.fixedKP {
  position: fixed;
  background: #000;
  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);
}
</style>