<template>
 <el-dialog :title="title"  v-model="show" width="30%" @close="close">
   <div>
     <h2 class="text-warning text-center" v-if="cptName">{{cptName}}</h2>

     <div v-if="type==1" class="plr20" v-html="form.reserveDes"></div>
     <div v-if="type==2" class="plr20" v-html="form.reserveDesCar"></div>
     <div v-if="type==3" class="plr20" v-html="form.reserveDesFood"></div>
     <div v-if="type==4" class="plr20" v-html="form.reserveDesMeal"></div>
     <div v-if="type==5" class="plr20" v-html="form.reserveDesPhoto"></div>
     <div v-if="type==0" class="plr20" v-html="form.reserveDesTitck"></div>
   </div>
       <template #footer>
         <div class="dialog-footer text-center">
           <el-button type="primary" class="btn-lineG w200px" round @click="ok">{{language==0?'确定':'Confirm'}}</el-button>
         </div>
       </template>
 </el-dialog>
</template>

<script setup>
import {getBaseInfoByActiveId} from "@/apiPc/booking";
import {getCurrentInstance} from "@vue/runtime-core";
import {useStorage} from "@vueuse/core/index";
const emit = defineEmits([ 'submit'])
const {proxy} = getCurrentInstance()
const language= useStorage('language',0)
import useUserStore from "@/store/modules/user";
const user = useUserStore().user
const title = ref('')
const cptName = ref('')
const show = ref(false)
const form = ref({})
let matchId = ''
let type = ''
const open = (params) => {
  title.value = params.title
  cptName.value = params.cptName
  matchId = params.matchId
  type = params.type
  show.value = true
  getData()
}
defineExpose({
  open
})

function getData() {
  console.log(matchId)
  getBaseInfoByActiveId(matchId).then(res=>{
    form.value = res.data || {}
    console.log(form.value)
  }).catch(err=>{
    console.log(err)
  })
}
function close() {
  show.value = false
}
function ok() {
  // type
  show.value = false

  // if(!user){
  //   useUserStore().setVisitor()
  // } else {
    emit('submit', type)
  // }
}
</script>

<style scoped lang="scss">

</style>