<template>
  <ModuleBase :type="data.type">
    <template #content>
      <div class="option-list">
        <div v-for="(item, i) in data.option_list" :key="i" class="voice-matrix">
          <div v-for="li in item" :key="li.mark" class="matrix-item">
            <!-- eslint-disable max-len -->
            <RichText
              v-model="li.content"
              :inline="true"
              toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright"
            />
          </div>
        </div>
      </div>

      <SelectUpload label="矩阵音频" type="audio" width="500px" @uploadSuccess="uploadAudioSuccess" />
      <div v-if="data.audio_data.url.length > 0" class="upload-file">
        <div class="file-name">
          <span>
            <SvgIcon icon-class="note" size="12" />
            <span>{{ data.audio_data.name }}</span>
          </span>
        </div>
        <SvgIcon icon-class="delete-black" size="12" @click="removeFile('audio')" />
      </div>
      <SelectUpload label="lrc 文件" :limit="1" type="lrc" width="500px" @uploadSuccess="uploadLrcSuccess" />
      <div v-if="data.lrc_data.url.length > 0" class="upload-file">
        <div class="file-name">
          <span>
            <SvgIcon icon-class="note" size="12" />
            <span>{{ data.lrc_data.name }}</span>
          </span>
        </div>
        <SvgIcon icon-class="delete-black" size="12" @click="removeFile('lrc')" />
      </div>
    </template>
  </ModuleBase>
</template>

<script>
import ModuleMixin from '../../common/ModuleMixin';
import SelectUpload from '@/views/book/courseware/create/components/common/SelectUpload.vue';

import { getVoiceMatrixData, getOption } from '@/views/book/courseware/data/voiceMatrix';
import { GetStaticResources } from '@/api/app';

export default {
  name: 'VoiceMatrix',
  components: {
    SelectUpload,
  },
  mixins: [ModuleMixin],
  data() {
    return {
      data: getVoiceMatrixData(),
    };
  },
  watch: {
    'data.property.row_count': {
      handler(val) {
        if (val < this.data.option_list.length) {
          this.data.option_list = this.data.option_list.slice(0, val);
        } else {
          const diff = val - this.data.option_list.length;
          for (let i = 0; i < diff; i++) {
            this.data.option_list.push(Array.from({ length: this.data.property.column_count }, getOption));
          }
        }
      },
    },
    'data.property.column_count': {
      handler(val) {
        this.data.option_list = this.data.option_list.map((row) => {
          if (val < row.length) {
            return row.slice(0, val);
          }
          const diff = val - row.length;
          return row.concat(Array.from({ length: diff }, getOption));
        });
      },
    },
  },
  methods: {
    /**
     * 解析lrc文件
     */
    parseLrcFile() {
      if (this.data.lrc_data.file_id.length === 0) {
        return this.$message.warning('请先上传lrc文件');
      }
      const loading = this.$loading({ text: '解析lrc文件中' });
      GetStaticResources('tool-ParseLRCFile', {
        content_type: 'FILE',
        file_id: this.data.lrc_data.file_id,
      }).then(({ lrc_list }) => {
        this.data.lrc_arr = lrc_list;
        this.distribution();
        loading.close();
      });
    },
    /**
     * 分配标记
     */
    distribution() {
      const lrcArr = this.data.lrc_arr;
      if (lrcArr.length === 0) {
        return this.$message.warning('没有标记可分配');
      }
      let curIndex = 0;
      this.data.option_list.forEach((row) => {
        row.forEach((item, i) => {
          const lrcData = lrcArr[curIndex];
          if (lrcData) {
            row[i].lrc_data = lrcData;
            curIndex += 1;
          }
        });
      });
    },
    uploadLrcSuccess(fileList) {
      if (fileList.length > 0) {
        const { file_name: name, file_url: url, file_id } = fileList[0];
        this.data.lrc_data = {
          name,
          url,
          id: `[FID##${file_id}##FID]`,
          file_id,
        };
        this.parseLrcFile();
      }
    },
    uploadAudioSuccess(fileList) {
      if (fileList.length > 0) {
        const { file_name: name, file_url: temporary_url, file_id, media_duration } = fileList[0];
        this.data.audio_data = {
          name,
          media_duration,
          temporary_url,
          url: `[FID##${file_id}##FID]`,
          file_id,
        };
      }
    },
    /**
     * 删除文件
     * @param {'audio' | 'lrc'} type
     */
    removeFile(type) {
      if (type === 'audio') {
        this.data.audio_data = {
          name: '',
          media_duration: 0,
          temporary_url: '',
          url: '',
          file_id: '',
        };
      } else if (type === 'lrc') {
        this.data.lrc_data = {
          name: '',
          url: '',
          id: '',
          file_id: '',
        };
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.option-list {
  margin-bottom: 12px;

  .voice-matrix {
    display: flex;
    row-gap: 16px;

    + .voice-matrix {
      margin-top: 16px;
    }

    .matrix-item {
      flex: 1;
      min-width: 75px;
      padding: 8px;
      border: 1px solid $border-color;

      &:not(:last-child) {
        border-right: 0;
      }

      :deep p {
        margin: 0;
      }
    }
  }
}

.upload-file {
  display: flex;
  column-gap: 12px;
  align-items: center;
  margin: 8px 0;

  .file-name {
    display: flex;
    column-gap: 14px;
    align-items: center;
    justify-content: space-between;
    max-width: 360px;
    padding: 8px 12px;
    font-size: 14px;
    color: #1d2129;
    background-color: #f7f8fa;

    span {
      display: flex;
      column-gap: 14px;
      align-items: center;
    }
  }

  .svg-icon {
    cursor: pointer;
  }
}
</style>
