<template>
  <div class="content">
    <van-field
      v-model="element.stem"
      :label="element.stem"
      :required="element.config.is_required === 1"
      label-align="top"
      class="contenteditable-question-title"
    >
      <template #left-icon> {{ isPreview ? element.title : index + 1 }}. </template>
      <template #label>
        <contenteditable
          v-model="element.stem"
          :active="active"
          @blur="emitValue"
          className="contenteditable-label"
          :errorMessage="errorMessage"
        ></contenteditable>
      </template>
      <template #input>
        <div
          v-for="(optionItem, optionItemIndex) in element.list ?? element.options"
          :key="optionItemIndex"
          class="rate-content"
        >
          <div
            v-for="(item, optionIndex) in isPreview ? optionItem.options : optionItem"
            :key="optionIndex"
            class="rate-item"
            @click="chooseOption(item)"
          >
            <div class="mb10">
              <contenteditable v-model="item.option" :active="active"></contenteditable>
            </div>
            <div class="mb10 ratechart">
              <RateCharacter
                v-model:model="answerValue[optionIndex]"
                :config="element.config"
              ></RateCharacter>
            </div>

            <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 { defineModel, ref } from 'vue';
import RateCharacter from './RateCharacter.vue';
import { Position } from '@element-plus/icons-vue';

/**
 * @type {ModelRef<Object, string, Object, Object>}
 */
const element = defineModel('element', {
  type: Object,
  required: true
});

// 答案数值
const answerValue = defineModel('answerValue', {
  default: () => [],
  type: Array
});

const isPreview = defineModel('isPreview', { default: false, type: Boolean });
defineProps({
  active: {
    type: Boolean,
    default: false
  },
  index: {
    default: 0
  },
  sn: { type: String, default: '' },
  questionType: { type: [String, Number], default: 4 }
});
const errorMessage = defineModel('errorMessage', {
  type: String,
  default: ''
});
const emit = defineEmits(['update:element']);

const chooseId = ref('');

const emitValue = () => {
  emit('update:element', element.value);
};

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

<style scoped lang="scss">
.mb10 {
  margin-bottom: 10px;
}

.mb5 {
  margin-bottom: 5px;
}

.content {
  background-color: #fff;

  & .rate-content {
    width: 100%;
    margin-top: 12px;

    & .rate-item {
      //margin-bottom: 8px;
      //padding: 11px 5px;
      //border-bottom: 1px solid #f4f4f4;
      //border-radius: 8px;
      //background: #fafbfc;
      width: 87vw;
      overflow: scroll;
      box-sizing: border-box;

      & .ratechart {
        position: relative;
        padding-bottom: 20px;
        &::after {
          position: absolute;
          content: '';
          width: 100%;
          bottom: 0;
          border-bottom: 1px solid var(--van-border-color);
          transform: scaleY(0.5);
        }
      }
    }
  }
}

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