<!-- 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" :style="getMainStyle()">预览开发中</div>
  </div>
</template>

<script>
import { getArticleData, fillFontList, arrangeTypeList, audioPositionList } from '@/views/book/courseware/data/article';

import PreviewMixin from '../common/PreviewMixin';
import AudioFill from '../fill/components/AudioFillPlay.vue';
import SoundRecord from '../../common/SoundRecord.vue';

export default {
  name: 'ArticlePreview',
  components: {
    AudioFill,
    SoundRecord,
  },
  mixins: [PreviewMixin],
  data() {
    return {
      data: getArticleData(),
    };
  },
  computed: {
    fontFamily() {
      return fillFontList.find(({ value }) => this.data.property.fill_font === value).font;
    },
  },
  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: {
    getMainStyle() {
      // const isRow = this.data.property.arrange_type === arrangeTypeList[0].value;
      // const isFront = this.data.property.audio_position === audioPositionList[0].value;
      // const isEnableVoice = this.data.property.is_enable_voice_answer === 'true';
      // let _list = [
      //   { name: 'audio', value: '24px' },
      //   { name: 'fill', value: '1fr' },
      // ];
      // if (!isFront) {
      //   _list = _list.reverse();
      // }
      // let grid = isRow
      //   ? `"${_list[0].name} ${_list[1].name}${isEnableVoice ? ' record' : ''}" auto / ${_list[0].value} ${_list[1].value}${isEnableVoice ? ' 160px' : ''}`
      //   : `"${_list[0].name}" ${_list[0].value} "${_list[1].name}" ${_list[1].value}${isEnableVoice ? `" record" 32px ` : ''} / 1fr`;
      // let style = {
      //   'grid-auto-flow': isRow ? 'column' : 'row',
      //   'column-gap': isRow ? '16px' : undefined,
      //   'row-gap': isRow ? undefined : '8px',
      //   grid,
      // };
      // return style;
    },
  },
};
</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>
