<template>
  <div class="content">
    <van-field
      v-model="element.stem"
      :label="element.stem"
      :required="element.config.is_required === 1"
      label-align="top"
    >
      <template #left-icon>
        {{ index + 1 }}
      </template>
      <template #label>
        <div
          :contenteditable="active"
          class="van-field"
          @blur="saveStem($event, element)"
          v-html="element.stem"
        ></div>
      </template>
      <template #input>
        <div v-for="(optionItem, optionItemIndex) in element.options" :key="optionItemIndex">
          <div
            v-for="(item, optionIndex) in optionItem"
            :key="optionIndex"
            @click="chooseOption(item)"
          >
            <RateCharacter v-model="answerValue" :config="element.config"></RateCharacter>
            <div class="tips">
              <p>{{ element.config.prompt_left }}</p>
              <p>{{ element.config.prompt_center }}</p>
              <p>{{ element.config.prompt_right }}</p>
            </div>
          </div>
        </div>
      </template>
    </van-field>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import RateCharacter from './RateCharacter.vue';

const props = defineProps({
  element: {
    type: Object
  },
  index: {
    type: Number,
    default: 0
  },
  active: {
    type: Boolean,
    default: false
  },
  sn: { type: String, default: '' },
  questionType: { type: [String, Number], default: 4 }
});

const answerValue = ref()
// NPS 的答案
const NPSAnswer = ref({
  'question_index': props.index,
  'answer': {
    '1': answerValue.value
  }
});

const element = ref(props.element);
const chooseId = ref('');
// 创建一个本地副本以保存更改
const localElement = ref({ ...props.element });

const saveStem = (e) => {
  localElement.value.stem = e.target.innerHTML;
};

const chooseOption = (item) => {
  chooseId.value = item.id;
};
</script>

<style scoped lang="scss">
.content {
  background-color: #fff;
}

.tips {
  display: flex;
  justify-content: space-between;
  color: #bfbfbf;
}
</style>