<template>
  <el-dialog v-model="show" :title="title" @close="close" >
    <div>
      <h2 v-if="cptName && type!=10" class="text-warning text-center">{{ 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==10" class="plr20" >
<!--        <el-link v-for="v in fileList" :href="fillImgUrl(v.url)" :underline="false" class="link" target="_blank"-->
<!--                 type="primary">-->
<!--                          <span style="border-bottom: 1px solid var(&#45;&#45;el-color-primary)">-->
<!--                            {{ v.name }}-->
<!--                            <el-icon style="margin-left: 10px;position: relative;bottom: -2px">-->
<!--                            <Download/>-->
<!--                          </el-icon>-->
<!--                          </span>-->

<!--        </el-link>-->
        <div class="or-html" v-if="content" v-html="content"/>
      </div>
      
      
           <el-row v-if="type==1" justify="center">
             <el-radio-group v-model="hotelType">
               <el-radio label="0">{{language==0?'运动队酒店':'Team Hotel Reservation'}}</el-radio>
               <el-radio label="1">{{language==0?'执委大会酒店':'Conference Hotel Reservation'}}</el-radio>
             </el-radio-group>
           </el-row>
    
    </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";
import {getppInfo} from "@/apiPc/match";

const emit = defineEmits(['submit'])
const {proxy} = getCurrentInstance()
const language = useStorage('language', 0)
import useUserStore from "@/store/modules/user";
import {ref} from "vue";

const user = useUserStore().user
const title = ref('')
const cptName = ref('')
const show = ref(false)
const form = ref({})
const hotelType = ref('')
const content = ref('')
const fileList = 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() {
  if (type == '10') {
    getppInfo("10000005").then(res => {
      if (res.data) {
        console.log(res.data)
        if (language.value == 0) {
          content.value = res.data.contextZh
          fileList.value = JSON.parse(res.data.fileZh)
        } else {
          content.value = res.data.contextEn
          fileList.value = JSON.parse(res.data.fileEn)
        }
        content.value = `<style>img { display: inline-block; } @media (max-width: 1750px){video{ width: auto;height: auto;}}</style>` + content.value
      } else {
        content.value = ''
        fileList.value = []
      }
    })
  } else {
    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, hotelType.value)
  // }
}
</script>

<style lang="scss" scoped>
</style>