<template>
  <van-popup
    v-model:show="showPopup"
    round
    closeable
    position="bottom"
    teleport="body"
    :style="{ height: '80%' }"
  >
    <QuestionnaireDetail
      v-if="showPopup"
      ref="questionnaireDetailRef"
      @submitCallBack="submitCallBack"
    />
  </van-popup>
</template>

<script setup>
import { ref, defineExpose, defineProps, watch, nextTick } from "vue";
import QuestionnaireDetail from "@/components/QuestionnaireDetail.vue";
const props = defineProps({
  questionId: {
    type: Number,
  },
});

const showPopup = ref(false);
const questionnaireDetailRef = ref();

watch(showPopup, (value) => {
  console.log(value);
  if (value) {
    nextTick(() => {
      questionnaireDetailRef.value.getQuestionDetail(props.questionId);
    });
  }
});

const submitCallBack = () => {
  showPopup.value = false;
};

defineExpose({
  showPopup,
});
</script>
<style scoped lang="scss"></style>
