<template>
  <van-popup
    v-model:show="showPopup"
    round
    position="center"
    :style="{ background: 'none' }"
  >
    <div class="questionnaire">
      <p>《{{ questionTitle }}》</p>
      <button @click="goAnswer">去填写</button>
    </div>
    <i class="close" @click="showPopup = false"></i>
  </van-popup>
  <QuestionnairePopup ref="questionnairePopupRef" :questionId="questionId" />
</template>

<script setup>
import { ref, defineExpose, defineProps } from "vue";
import QuestionnairePopup from "../components/QuestionnairePopup.vue";

defineProps({
  questionId: {
    type: Number,
  },
  questionTitle: {
    type: String,
  },
});

const showPopup = ref(false);
const questionnairePopupRef = ref();
const goAnswer = () => {
  questionnairePopupRef.value.showPopup = true;
  showPopup.value = false;
};

defineExpose({
  showPopup,
  questionnairePopupRef,
});
</script>
<style scoped lang="scss">
.questionnaire {
  position: relative;
  width: 590px;
  height: 722px;
  background: url(../../../assets/images/questionnaire-bg.png) no-repeat center;
  background-size: cover;
  p {
    position: absolute;
    bottom: 200px;
    color: #333333;
    font-size: 32px;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
  }
  button {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    background: #f02e18;
    font-size: 28px;
    color: #fff;
    height: 76px;
    width: 526px;
    border-radius: 38px;
  }
}
.close {
  display: block;
  width: 64px;
  height: 64px;
  background: url(../../../assets/images/close-icon1.png) no-repeat center;
  background-size: cover;
  margin: 100px auto 0;
}
</style>
