<template>
  <!--  <van-field v-model="inputValue" v-focus placeholder="请输入内容"> </van-field>-->
  <!--  <completion />-->
  <completion
    v-model:completionValue="completionValue"
    :index="answerIndex"
    :element="question"
    :isPreview="true"
    :errorMessage="question.error"
  ></completion>
</template>
<script setup lang="ts">
import { computed, defineEmits, ref, watch } from 'vue';
import Completion from '@/views/Design/components/Questions/Completion.vue';
import type { IQuestion } from '@/types/question';
import { validateCompletion } from '@/views/Survey/views/Preview/components/questions/validate/previewCompletion';

interface ICompletionAnswer {
  value: string;
}

const answer = defineModel<ICompletionAnswer>('answer', { default: {} });

const answerIndex = computed(() => {
  return question.value.title;
});

const question = defineModel<IQuestion<ICompletionConfig>>('question', { default: () => {} });
const emit = defineEmits(['previous', 'next', 'update:modelValue', 'saveOption', 'changeAnswer']);

const completionValue = ref<string>(answer.value?.value ?? '');

// 进行提交答案
watch(
  () => completionValue.value,
  (value) => {
    console.log(value, 'update');

    // 答案校验，生成最终答案
    const { isError } = validateCompletion(question.value, question.value.config!, String(value));
    console.log(`isError, question`, isError, question.value);
    // if (isError) {
    // 有错误就不更新
    question.value.answer = void 0;
    // return;
    // }

    const res = generateAnswer(value);
    answer.value = res;
    question.value!.answer = res;

    // answer emit 提交失效
    // emit('changeAnswer', res);
  }
);

/**
 * 生成最终答案
 * @param answer {string}
 */
function generateAnswer(answer: string) {
  console.log(answer, 'asjd');

  return { value: answer };
}
</script>
<style scoped lang="scss"></style>
