<!-- eslint-disable vue/no-v-html -->
<template>
  <div class="select-preview" :style="getAreaStyle()">
    <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />

    <div class="main">
      <el-input
        :class="['textarea']"
        type="textarea"
        v-model="answer.answer_list.input"
        @blur="answer.answer_list.input = answer.answer_list.input.trim()"
        placeholder=""
        maxlength="1000"
        :readonly="false"
        v-if="isEnable(data.is_enable_input)"
        :rows="5"
      ></el-input>
      <SoundRecord ref="record" :type="data.size" class="record-box" />
    </div>
  </div>
</template>

<script>
import { getFillData } from '@/views/book/courseware/data/fill';

import PreviewMixin from '../common/PreviewMixin';
import SoundRecord from '../../common/SoundRecord.vue';

export default {
  name: 'RecordInputPreview',
  components: {
    SoundRecord,
  },
  mixins: [PreviewMixin],
  data() {
    return {
      data: getFillData(),
    };
  },
  computed: {},
  created() {
    this.answer.answer_list = {
      answerRecordList: [],
      input: '',
    };
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
@use '@/styles/mixin.scss' as *;

.select-preview {
  @include preview-base;

  .record-box {
    width: max-content;
    padding: 6px 12px;
    background-color: $fill-color;

    :deep .record-time {
      width: 100px;
    }
  }
}
</style>
