<template>
  <div class="main-container">
    <div class="left-list">
      <SearchList
        :current="page.current"
        :pageSize="page.pageSize"
        :total="search_total"
        :list="search_list"
        :setLoading="search_set_loading"
        @loadMore="loadMore"
        @checkDetail="checkDetail"
      />
    </div>
    <div class="right-detail">
      <ItemDetail :detail_content="detail_content" />
      <ItemList
        :detail_audio_list="detail_audio_list"
        :file_id="detail_file_id"
        :detail_audio_split_list="detail_audio_split_list"
        :detail_audio_emotion_list="detail_audio_emotion_list"
        :PAGE_SIZE="PAGE_SIZE"
        @playingContent="playingContent"
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import SearchList from './SearchList.vue';
import ItemDetail from './ItemDetail.vue';
import ItemList from './ItemList.vue';
import { searchAudio, getAudioDetail } from '../../apis/home';
import { bus_search } from '../../base/event-bus';
import { downloadWar } from '../../apis/home';

const current_keyword = ref('');
const page = ref({
  current: 1,
  pageSize: 50
});
const search_list = ref([]);
const search_total = ref(0);
const search_set_loading = ref(false);

const detail_content = ref('');
const detail_audio_list = ref([]); // 音频列表
const detail_audio_split_list = ref([]); // 切割后的音频列表
const detail_audio_emotion_list = ref([]);
const detail_file_id = ref('');
const PAGE_SIZE = 7;

const toSearchAudio = async () => {
  if (page.value.current == 1) {
    search_set_loading.value = true;
  }
  try {
    const res = await searchAudio(page.value.current, page.value.pageSize, current_keyword.value);
    if (res.code == 200) {
      search_list.value.push(...res.data.rows);
      search_total.value = res.data.total;
    }
  } catch (error) {
    console.log(error);
  } finally {
    search_set_loading.value = false;
  }
};

const loadMore = async () => {
  page.value.current += 1;
  toSearchAudio();
};

const checkDetail = async (item) => {
  try {
    detail_audio_list.value = [];
    detail_audio_split_list.value = [];
    detail_audio_emotion_list.value = [];
    const res = await getAudioDetail(item.id);
    if (res.code == 200) {
      detail_content.value = res.data.content;
      detail_audio_list.value = res.data.audioPath || [];
      detail_audio_split_list.value = res.data.contentList || [];
      detail_audio_emotion_list.value = res.data.emotionList || [];
      detail_audio_list.value.forEach((item) => {
        item.loading_path = true;
        item.content = res.data.content;
      });
      detail_file_id.value = res.data.id;
      const first_list = detail_audio_list.value.slice(0, PAGE_SIZE);
      first_list.forEach((item) => {
        toDownloadWar(res.data.id, item.id).then((res) => {
          item.audio_src = res;
          item.loading_path = false;
        });
      });
      detail_audio_list.value = first_list.concat(detail_audio_list.value.slice(PAGE_SIZE));
    }
  } catch (error) {
    console.log(error);
  }
};

const toDownloadWar = async (file_id, audio_id) => {
  try {
    const res = await downloadWar(file_id, audio_id);
    const audio_src = URL.createObjectURL(res);
    return audio_src;
  } catch (error) {
    console.log(error);
  }
};

const playingContent = (content) => {
  detail_content.value = content;
};

bus_search.on((keyword) => {
  current_keyword.value = keyword;
  search_list.value = [];
  search_total.value = 0;
  page.value.current = 1;
  detail_content.value = '';
  detail_audio_list.value = [];
  toSearchAudio();
});
</script>
<style scoped lang="css">
.main-container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 10px;
  min-height: calc(100vh - 150px);
  background-color: #fff;
  padding: 0 20px;
  .left-list,
  .right-detail {
    height: 100%;
  }
}
</style>
