<template>
  <a-modal v-model:visible="visible" :footer="false" @cancel="handleCancel">
    <template #title>情感标签详情</template>
    <div>
      <a-table :columns="columns" :data="detail_data" :pagination="pagination" />
    </div>
  </a-modal>
</template>

<script setup>
import { toRefs, reactive, computed } from 'vue';
import { formatSeconds } from '../../utils/format-content';
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  detail_audio_emotion_list: {
    type: Array,
    default: () => []
  }
});
const emit = defineEmits(['cancel']);

const { visible } = toRefs(props);

const columns = [
  {
    title: '开始时间 — 结束时间',
    dataIndex: 'times',
    key: 'times'
  },
  {
    title: '情感标签',
    dataIndex: 'tags',
    key: 'tags'
  }
];
const pagination = { pageSize: 5 };

const detail_data = computed(() => {
  return props.detail_audio_emotion_list.map((item) => {
    return {
      times: `${formatSeconds(item.start)} — ${formatSeconds(item.end)}`,
      tags: item.emotion
    };
  });
});

const handleCancel = () => {
  emit('cancel');
};
</script>
<style scoped lang="css">
: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>
