<template>
  <q-card flat bordered class="bg-white column" style="width:50vw;height: 70vh;">
    <div style="height:72px;overflow:hidden;">
      <chosen-header></chosen-header>
    </div>
    <div class="col" :class="{'light-shadow bg-white rounded-border':$q.platform.is.desktop}">
      <chosen-table @finish="finishHandler"></chosen-table>
    </div>
  </q-card>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
import ChosenHeader from "./ChosenHeader.vue";
import ChosenTable from "./ChosenTable.vue";
export default defineComponent({
  components: { ChosenHeader, ChosenTable },
  emits:["finish"],
  setup(props,context) {

    const data=reactive({})

    const methods = {
      finishHandler(hotel:any){
        context.emit('finish',hotel)
      }
    }

    return {
      ...toRefs(data),
      ...methods
    }

  }
})
</script>

<style>

</style>
