<template>
  <div class="item-list" ref="container">
    <a-table
      :data="audio_list"
      :pagination="{ pageSize: PAGE_SIZE }"
      stripe
      :scroll="scroll"
      :expandable="expandable"
      @change="handleTableChange_Father"
    >
      <template #expand-icon="{ expanded, record }">
        <icon-up v-if="expanded" />
        <icon-down v-else />
      </template>
      <template #expand-row="{ record }">
        <a-table
          :data="record.expandRow"
          :show-header="false"
          :expandable="expandable"
          stripe
          :pagination="{ pageSize: 5 }"
          @change="handleTableChange_Son"
        >
          <template #expand-icon="{ expanded, record }"> </template>
          <template #columns>
            <a-table-column title="音频列表" data-index="name" width="180">
              <template #cell="{ record }">
                <a-tooltip :content="record.name">
                  <div class="tip-content tip-name">{{ record.name }}</div>
                </a-tooltip>
              </template>
            </a-table-column>
            <a-table-column title="开始时间" data-index="start_time">
              <template #cell="{ record }">
                {{ formatSeconds(record.start) || '-' }}
              </template>
            </a-table-column>
            <a-table-column title="结束时间" data-index="end_time">
              <template #cell="{ record }">
                {{ formatSeconds(record.end) || '-' }}
              </template>
            </a-table-column>
            <a-table-column title="情感标签" data-index="emotion">
              <template #cell="{ record }">
                <!-- {{ record.emotion }} -->
                <!-- <div class="emotion-tags"> -->
                <a-space>
                  <!-- <a-tag v-for="(tag, index) of emotions.slice(0, 2)" :key="index" :color="'#168cff'">{{ tag }}</a-tag>
                  <a-tag v-if="emotions.length > 2" :color="'#168cff'" @click="handleToDetail" style="cursor: pointer"
                    >...</a-tag
                  > -->
                </a-space>
                <!-- </div> -->
              </template>
            </a-table-column>
            <a-table-column title="路径" data-index="file_path" width="220">
              <template #cell="{ record }">
                <a-tooltip :content="record.file_path">
                  <div class="tip-content">{{ record.file_path }}</div>
                </a-tooltip>
              </template>
            </a-table-column>
            <a-table-column title="操作" data-index="operation" width="450">
              <template #cell="{ record }">
                <AudioPlayer
                  v-if="!record.loading_path"
                  :audioSrc="record.audio_src"
                  :startTime="record.start"
                  :endTime="record.end"
                  :content="record.content"
                  @playingContent="playingContent"
                ></AudioPlayer>
                <div v-else class="loading-tips">音频解析中 <a-spin> </a-spin></div>
              </template>
            </a-table-column>
          </template>
        </a-table>
      </template>
      <template #columns>
        <a-table-column title="音频列表" data-index="name" width="150">
          <template #cell="{ record }">
            <a-tooltip :content="record.name">
              <div class="tip-content tip-name">{{ record.name }}</div>
            </a-tooltip>
          </template>
        </a-table-column>
        <a-table-column title="开始时间" data-index="start_time">
          <template #cell="{ record }">
            {{ formatSeconds(record.start) || '-' }}
          </template>
        </a-table-column>
        <a-table-column title="结束时间" data-index="end_time">
          <template #cell="{ record }">
            {{ formatSeconds(record.end) || '-' }}
          </template>
        </a-table-column>
        <a-table-column title="情感标签" data-index="emotion">
          <template #cell="{ record }">
            <!-- {{ record.emotion }} -->
            <!-- <div class="emotion-tags"> -->
            <a-space>
              <a-tag v-for="(tag, index) of emotions.slice(0, 1)" :key="index" :color="'#168cff'">{{
                tag.emotion
              }}</a-tag>
              <a-tag v-if="emotions.length > 2" :color="'#168cff'" @click="handleToDetail" style="cursor: pointer"
                >...</a-tag
              >
            </a-space>
            <!-- </div> -->
          </template>
        </a-table-column>
        <a-table-column title="路径" data-index="file_path" width="220">
          <template #cell="{ record }">
            <a-tooltip :content="record.file_path">
              <div class="tip-content">{{ record.file_path }}</div>
            </a-tooltip>
          </template>
        </a-table-column>
        <a-table-column title="操作" data-index="operation" width="450">
          <template #cell="{ record }">
            <AudioPlayer
              v-if="!record.loading_path"
              :audioSrc="record.audio_src"
              :startTime="record.start"
              :endTime="record.end"
              :content="record.content"
              @playingContent="playingContent"
            ></AudioPlayer>
            <div v-else class="loading-tips">音频解析中 <a-spin> </a-spin></div>
          </template>
        </a-table-column>
      </template>
    </a-table>
  </div>
  <TagsDetail
    v-if="show_tags_detail"
    :visible.sync="show_tags_detail"
    :detail_audio_emotion_list="detail_audio_emotion_list"
    @cancel="handleDetailCancel"
  ></TagsDetail>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import AudioPlayer from './AudioPlayer.vue';
import TagsDetail from './TagsDetail.vue';
import { downloadWar } from '../../apis/home';
import { formatSeconds } from '../../utils/format-content';

const props = defineProps({
  detail_audio_list: {
    type: Array,
    default: () => []
  },
  detail_audio_split_list: {
    type: Array,
    default: () => []
  },
  detail_audio_emotion_list: {
    type: Array,
    default: () => []
  },
  file_id: {
    type: String,
    default: ''
  },
  PAGE_SIZE: {
    type: Number,
    default: 7
  }
});
const emit = defineEmits(['playing-content']);

const container = ref(null);
const scroll = { x: '100%', y: '' };
const expandable = {
  title: '',
  width: 80
};
const show_tags_detail = ref(false);

const audio_list = computed(() => {
  const table_data = props.detail_audio_list;
  /**
   * 这里所有的音频共用同一个detail_audio_split_list
   *
   * */
  if (props.detail_audio_split_list.length) {
    table_data.forEach((item) => {
      const expand = props.detail_audio_split_list.map((it) => {
        return {
          ...it,
          audio_src: item.audio_src,
          name: item.name,
          file_path: item.file_path,
          loading_path: item.loading_path
        };
      });
      item.expandRow = [...expand];
    });
  }
  return table_data;
});
const emotions = computed(() => {
  return props.detail_audio_emotion_list;
});

const handleTableChange_Father = (current_page_data, filters) => {
  current_page_data.forEach(async (item) => {
    if (item.audio_src === undefined) {
      item.loading_path = true;
      item.audio_src = await toDownloadWar(props.file_id, item.id);
      item.loading_path = false;
    }
  });
};
const handleTableChange_Son = (current_page_data, filters) => {
  current_page_data.forEach((item) => {
    item.loading_path = true;
  });
  setTimeout(() => {
    current_page_data.forEach((item) => {
      item.loading_path = false;
    });
  }, 0);
};
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 handleToDetail = () => {
  show_tags_detail.value = true;
};
const handleDetailCancel = () => {
  show_tags_detail.value = false;
};

const playingContent = (content) => {
  emit('playing-content', content);
};
onMounted(() => {
  scroll.y = container.value.offsetHeight - 100;
});
</script>
<style scoped>
.item-list {
  height: calc(100% - 370px);
  background-color: #fff;
}
.tip-name {
  width: 180px;
}
.tip-content {
  width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.emotion-tags {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;
  max-height: 3em;
}
.loading-tips {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 450px;
  color: #3d68e1;
}

:deep(.arco-table-tr .arco-table-th) {
  height: 46px;
  background: #7786bc;
  color: #fff;
  font-size: 16px;
}
:deep(.arco-table-tr .arco-table-th:first-child) {
  border-radius: 10px 0 0 0;
}
:deep(.arco-table-tr .arco-table-th:last-child) {
  border-radius: 0 10px 0 0;
}
</style>
