<template>
  <el-dialog v-model="show" :title="title" destroy-on-close width="400px" @close="close">
    <div>
      <h2 v-if="cptName" class="text-warning text-center">{{ cptName }}</h2>
      
      <div v-if="type==1" class="plr20" v-html="form.reserveDes" />
      <div v-if="type==2" class="plr20" v-html="form.reserveDesCar" />
      <div v-if="type==3" class="plr20" v-html="form.reserveDesFood" />
      <div v-if="type==4" class="plr20" v-html="form.reserveDesMeal" />
      <div v-if="type==5" class="plr20" v-html="form.reserveDesPhoto" />
      <div v-if="type==0" class="plr20" v-html="form.reserveDesTitck" />
      <div v-if="type==8" class="plr20" v-html="form.reserveDesScenic" />
    </div>
    <template #footer>
      <div class="dialog-footer text-center">
        <el-button class="btn-lineG w200px" round type="primary" @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 lang="scss" scoped>

</style>