<!-- 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">预览开发中</div>
  </div>
</template>

<script>
import { getNotesData } from '@/views/book/courseware/data/notes';

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

export default {
  name: 'NotesPreview',
  components: {},
  mixins: [PreviewMixin],
  data() {
    return {
      data: getNotesData(),
    };
  },
  computed: {},
  created() {
    // this.answer.answer_list = this.data.model_essay
    //   .map((item) => {
    //     return item
    //       .map(({ type, content, mark }) => {
    //         if (type === 'input') {
    //           return {
    //             value: content,
    //             mark,
    //           };
    //         }
    //       })
    //       .filter((item) => item);
    //   })
    //   .flat();
  },
  methods: {},
};
</script>

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

.select-preview {
  @include preview-base;

  .main {
    display: grid;
    align-items: center;
  }

  .fill-wrapper {
    grid-area: fill;
    font-size: 16pt;

    p {
      margin: 0;
    }

    .el-input {
      display: inline-flex;
      align-items: center;
      width: 120px;
      margin: 0 2px;

      &.pinyin :deep input.el-input__inner {
        font-family: 'PINYIN-B', sans-serif;
      }

      &.chinese :deep input.el-input__inner {
        font-family: 'arial', sans-serif;
      }

      &.english :deep input.el-input__inner {
        font-family: 'arial', sans-serif;
      }

      :deep input.el-input__inner {
        padding: 0;
        font-size: 16pt;
        color: $font-color;
        text-align: center;
        background-color: #fff;
        border-width: 0;
        border-bottom: 1px solid $font-color;
        border-radius: 0;
      }
    }
  }

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

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