<template>
  <div>
    <NPS
      v-model:element="question"
      v-model:value="value"
      :active="false"
      :is-preview="true"
      :index="answerIndex"
      :errorMessage="question.error"
    />
  </div>
</template>

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

const value = ref(-1);
// // 预览新增 emit ['changeAnswer', 'previous', 'next']
const emit = defineEmits(['changeAnswer', 'previous', 'next', 'update:element']);
const question = defineModel<question>('question', { default: { config: { is_required: false } } });

/**
 * answer 的答案类型
 * {
 *     "1": 10
 * }
 */
const answer = defineModel<NPSAnswerType>('answer', { default: undefined });
const answerIndex = computed(() => {
  return question.value.title;
});

// 解析答案
// function parseAnswer() {
//   return answer.value[`1`];
// }
/**
 * 生成NPS答案
 */
function genAnswer(value: number): NPSAnswerType {
  const res: any = {};
  res[`1`] = value;
  return res;
}

watch(value, (newValue) => {
  // console.log(genAnswer(newValue as number));
  answer.value = genAnswer(newValue as number);
  // 提交答案
  emit('changeAnswer', answer.value);
});
</script>

<style scoped></style>
