<script setup lang="ts">
import SignQuestion from '@/views/Design/components/Questions/SignQuestion.vue';
import { ref, watch, computed } from 'vue';

const question = defineModel<question>('question', { default: {} });
const answer = defineModel<{ value: string }>('answer', { default: undefined });
const answerValue = ref<string>('');
const answerIndex = computed(() => question.value?.title ?? 0);
// emit
const emit = defineEmits(['changeAnswer']);

// 如果 answer 不为空，需要解析答案
answer.value?.value && parseAnswer();

/**
 * 监听答案，如果答案变动，重新生成答案，然后提交
 */
watch(answerValue, (newValue) => {
  // console.log(newValue);
  question.value.answer = { value: newValue };
  // emit('changeAnswer', { value: newValue });
});
/**
 * 解析答案
 * answer 格式
 * {
 *   value: 'url'
 * }
 */
function parseAnswer() {
  answerValue.value = answer.value.value;
}
</script>

<template>
  <sign-question
    :element="question"
    :active="false"
    :isPreview="true"
    :index="answerIndex"
    v-model:answer="answerValue"
    :error-message="question.error"
  />
</template>
<style scoped lang="scss"></style>
