<template>
  <ModuleBase :type="data.type">
    <template #content>
      <!-- eslint-disable max-len -->
      <div class="fill-wrapper">
        <template v-if="data.property.content_type === 'con'">
          <el-input v-model="data.content" placeholder="输入" type="textarea" @change="handleChangeContent"></el-input>
          <span class="tips">输入字或词请一字一行</span>
        </template>
        <template v-else>
          <UploadFile
            :courseware-id="courseware_id"
            :component-id="id"
            :type="'picture'"
            :single-size="data.single_size"
            :total-size="data.total_size"
            :file-list="data.file_list"
            :file-id-list="data.file_id_list"
            :file-info-list="data.file_info_list"
            :label-text="labelText"
            :accept-file-type="acceptFileType"
            :upload-tip="uploadTip"
            :icon-class="iconClass"
            @updateFileList="updateFileList"
          />
        </template>
      </div>
    </template>
  </ModuleBase>
</template>

<script>
import ModuleMixin from '../../common/ModuleMixin';
import SoundRecord from '@/views/book/courseware/create/components/question/fill/components/SoundRecord.vue';
import UploadAudio from '@/views/book/courseware/create/components/question/fill/components/UploadAudio.vue';
import UploadFile from '@/views/book/courseware/create/components/base/common/UploadFile.vue';

import { getWriteData } from '@/views/book/courseware/data/write';
import { GetStaticResources } from '@/api/app';
import cnchar from 'cnchar';
import { getRandomNumber } from '@/utils';

export default {
  name: 'WritePage',
  components: {
    SoundRecord,
    UploadAudio,
    UploadFile,
  },
  mixins: [ModuleMixin],
  data() {
    return {
      data: getWriteData(),
      labelText: '图片',
      acceptFileType: '.png,.jpg',
      uploadTip:
        'The size of the uploaded image should not exceed 2MB, the size of the uploaded audio file, pdf file, and excel file should not exceed 20MB, and the size of the uploaded audio file should not exceed 20MB',
      iconClass: 'picture',
    };
  },
  methods: {
    // 解析输入内容
    handleChangeContent() {
      if (this.data.content.trim()) {
        let contentArr = this.data.content.split('\n');
        let contentList = [];
        contentArr.forEach((item, index) => {
          if (item.trim()) {
            let content_arr = item.trim().split('');
            let content_arrs = [];
            let content_arr_strokes = [];
            content_arr.forEach((itemc) => {
              if (itemc.trim()) {
                content_arrs.push(itemc.trim());
              }
            });
            content_arrs.forEach((itemc, indexc) => {
              content_arr_strokes.push(null);
              let MethodName = 'hz_resource_manager-GetHZStrokesContent';
              let data = {
                hz: itemc,
              };
              GetStaticResources(MethodName, data).then((res) => {
                let obj = {
                  hz: itemc.trim(),
                  strokes: res,
                };
                content_arr_strokes[indexc] = obj;
              });
            });
            contentList.push({
              con: item.trim(),
              pinyin: cnchar.spell(item.trim(), 'array', 'low', 'tone').join(' '),
              audio_file_id: '',
              hz_strokes_list: content_arr_strokes,
              mark: getRandomNumber(),
            });
            this.handleMatic(item.trim(), contentList.length - 1);
          }
        });
        this.data.content_list = contentList;
      } else {
        this.data.content_list = [];
      }
    },
    // 自动生成音频
    handleMatic(con, index) {
      GetStaticResources('tool-TextToVoiceFile', {
        text: con.replace(/<[^>]+>/g, ''),
      })
        .then(({ status, file_id }) => {
          if (status === 1) {
            this.data.content_list[index].audio_file_id = file_id;
          }
        })
        .catch(() => {});
    },
    updateFileList({ file_list, file_id_list, file_info_list }) {
      this.data.file_list = file_list;
      this.data.file_id_list = file_id_list;
      this.data.file_info_list = file_info_list;
    },
  },
};
</script>

<style lang="scss" scoped>
.fill-wrapper {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  align-items: flex-start;

  :deep .rich-wrapper {
    width: 100%;
  }

  .tips {
    font-size: 12px;
    color: #999;
  }

  .auto-matic,
  .upload-audio-play {
    :deep .upload-wrapper {
      margin-top: 0;
    }

    .audio-wrapper {
      :deep .audio-play {
        width: 16px;
        height: 16px;
        color: #000;
        background-color: initial;
      }

      :deep .audio-play.not-url {
        color: #a1a1a1;
      }

      :deep .voice-play {
        width: 16px;
        height: 16px;
      }
    }
  }

  .auto-matic {
    display: flex;
    flex-shrink: 0;
    column-gap: 12px;
    align-items: center;
    width: 200px;
    padding: 5px 12px;
    background-color: $fill-color;
    border-radius: 2px;

    .auto-btn {
      font-size: 16px;
      font-weight: 400;
      line-height: 22px;
      color: #1d2129;
      cursor: pointer;
    }
  }

  .correct-answer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    .el-input {
      width: 180px;

      :deep &__prefix {
        display: flex;
        align-items: center;
        color: $text-color;
      }
    }
  }
}
</style>
