GCLS_Page_Exercise/src/views/exercise_questions/preview/DialoguePreview.vue

<!-- eslint-disable vue/no-v-html -->
<template>
  <div class="dialogue-preview">
    <div class="stem">
      <span class="question-number">{{ data.property.question_number }}.</span>
      <span v-html="sanitizeHTML(data.stem)"></span>
    </div>
    <div v-if="isEnable(data.property.is_enable_description)" class="description">{{ data.description }}</div>
    <div class="dialogue-wrapper">
      <ul>
        <li
          v-for="(item, i) in data.option_list"
          :key="i"
          :style="{ flexDirection: item.direction }"
          class="dialogue-item"
        >
          <span class="name" :style="{ backgroundColor: item.direction === 'row' ? '#4F73F4' : '#3ABD38' }">
            {{ item.name }}
          </span>
          <div class="content" :style="{ backgroundColor: item.direction === 'row' ? '#fff' : '#d0f3de' }">
            <template v-if="item.type === 'text'">
              {{ item.content }}
            </template>
            <template v-else>
              <div v-for="(li, j) in item.content" :key="j">
                <template v-if="li.type === 'input'">
                  <el-input v-model="li.content" :class="[item.direction === 'row' ? 'is_left' : 'is_right']" />
                </template>
                <template v-else>
                  {{ li.content }}
                </template>
              </div>
            </template>
          </div>
          <SoundRecordPreview v-if="item.type === 'input'" :wav-blob.sync="item.audio_file_id" type="small" />
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import PreviewMixin from './components/PreviewMixin';
import SoundRecordPreview from './components/common/SoundRecordPreview.vue';

export default {
  name: 'DialoguePreview',
  components: {
    SoundRecordPreview,
  },
  mixins: [PreviewMixin],
  data() {
    return {};
  },
  watch: {
    'data.option_list': {
      handler(val) {
        if (!val) return;
        this.answer.answer_list = val
          .map(({ type, content, audio_file_id, mark }) => {
            if (type === 'text') return;
            let _content = content
              .filter((item) => item.type === 'input')
              .map(({ content, ...data }) => {
                return {
                  value: content,
                  ...data,
                };
              });
            return {
              content: _content,
              mark,
              audio_file_id,
            };
          })
          .filter((item) => item);
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {},
};
</script>

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

.dialogue-preview {
  @include preview;

  .dialogue-wrapper {
    padding: 24px;
    background-color: #f9f8f9;
    border-radius: 16px;

    ul {
      display: flex;
      flex-direction: column;
      row-gap: 24px;

      .dialogue-item {
        display: flex;
        column-gap: 16px;

        .name {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 40px;
          min-width: 40px;
          height: 40px;
          min-height: 40px;
          font-size: 12px;
          font-weight: bold;
          color: #fff;
          border-radius: 50%;
        }

        .content {
          display: flex;
          flex-wrap: wrap;
          align-items: flex-end;
          padding: 8px 16px;
          color: #000;
          border-radius: 8px;

          .el-input {
            :deep .el-input__inner {
              border-width: 0;
              border-bottom: 1px solid #000;
              border-radius: 0;
            }

            &.is_left {
              :deep .el-input__inner {
                background-color: #fff;
              }
            }

            &.is_right {
              :deep .el-input__inner {
                background-color: #d0f3de;
              }
            }
          }
        }
      }
    }
  }
}
</style>