<template>
  <div class="cont">
    <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>
        <contenteditable v-model="element.stem" :active="active" @blur="emitValue"></contenteditable>
      </template>
      <template #input>
        <textarea
          v-model="completionValue" class="other_input" :placeholder="element.config.placeholder"
          :rows="element.config.line_height"
        ></textarea>
      </template>
    </van-field>
  </div>
</template>

<script setup>
import { toRefs } from 'vue';

const completionValue = defineModel('completionValue', { default: '', type: String });
const props = defineProps({
  element: {
    type: Object,
    default: () => {
      // 补充
    }
  },
  index: {
    type: Number,
    default: 0
  },
  active: {
    type: Boolean,
    default: false
  },
  questionType: { type: [String, Number], default: 4 }
});
// 创建一个本地副本以保存更改
const emit = defineEmits(['update:element']);
const { element } = toRefs(props);
const emitValue = () => {
  emit('update:element', element.value);
};
</script>

<style scoped lang="scss">
.cont {
  .other_input {
    width: 100%;
    min-height: 40px;
    margin-bottom: 10px;
    padding: 12px;
    border: 1px solid #f4f4f4;
    border-radius: 5px;
    outline: none;
  }

  .other_input::placeholder {
    color: #d7d7d7;
    font-size: 14px;
  }
}

.text_value {
  border: 1px solid #ccc !important;
}
</style>
