<!-- 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
        v-if="isEnable(data.is_enable_input)"
        v-model="data.answer.answer_list.input"
        :class="['textarea']"
        type="textarea"
        placeholder=""
        maxlength="1000"
        :readonly="isJudgingRightWrong"
        :rows="5"
        @blur="data.answer.answer_list.input = data.answer.answer_list.input.trim()"
      />
      <div class="voice-luyin">
        <SoundRecord
          ref="record"
          :type="data.size"
          class="record-box"
          :answer-record-list="data.answer.answer_list.answer_record_list"
          :task-model="isJudgingRightWrong ? 'ANSWER' : ''"
          @handleWav="handleWav"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { getRecordInputData } from '@/views/book/courseware/data/recordInput';

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

export default {
  name: 'RecordInputPreview',
  components: {
    SoundRecord,
  },
  mixins: [PreviewMixin],
  watch: {
    'data.answer.answer_list.answer_record_list'(val) {
      this.data.answer.answer_list.answer_record_list = val;
    },
  },
  data() {
    return {
      data: getRecordInputData(),
    };
  },
  computed: {},
  created() {
    // console.log(getConfig());
    // this.answer.answer_list = {
    //   answerRecordList: [],
    //   input: '',
    // };
  },
  methods: {
    handleWav(data) {
      this.data.answer.answer_list.answer_record_list = data;
    },
  },
};
</script>

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

.select-preview {
  @include preview-base;

  .voice-luyin {
    display: flex;
    align-items: center;
    border-radius: 0 0 8px 8px;

    :deep .record {
      max-width: 280px;
    }
  }

  .record-box {
    width: max-content;
    padding: 6px 12px;
    background-color: #fff;
  }
}
</style>
