<template>
  <div class="text-with-images-container">
    <van-field
      readonly
      :label="element.stem"
      :required="element.config?.is_required === 1"
      label-align="top"
      class="base-select contenteditable-question-title"
    >
      <template #left-icon> {{ isPreview ? element.title : index + 1 }}. </template>
      <template #label>
        <contenteditable
          v-model="element.stem"
          :active="active"
          className="contenteditable-label"
          @blur="emitValue"
          :errorMessage="errorMessage"
        ></contenteditable>
      </template>
    </van-field>
  </div>
</template>
<script setup>
import contenteditable from '@/components/contenteditable.vue';
import { defineModel, toRefs } from 'vue';
const props = defineProps({
  isPreview: {
    type: Boolean,
    default: false
  },
  element: {
    type: Object,
    default: () => {
      return {
        stem: ''
      };
    }
  },
  active: {
    type: Boolean,
    default: false
  },
  index: {
    default: 0
  }
});
const errorMessage = defineModel('errorMessage', {
  type: String,
  default: ''
});
const { element } = toRefs(props);

const emit = defineEmits(['update:element']);
const emitValue = () => {
  emit('update:element', element.value);
};
</script>
<style scoped lang="scss"></style>
