<!--
 * @Author: donghao donghao@supervision.ltd
 * @Date: 2025-06-12 10:26:59
 * @LastEditors: donghao donghao@supervision.ltd
 * @LastEditTime: 2025-06-18 11:01:59
 * @FilePath: \Web-Traffic-Police\src\views\dataView\components\Type1ObjectDetect.vue
 * @Description: 目标检测
-->
<template>
  <div class="type-first">
    <div
      class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4 type-first-mid"
    >
      <div
        class="type-first-mid-box"
        v-for="(item, index) in currentInfo.slice(
          (pagination.page - 1) * pagination.pageSize,
          pagination.page * pagination.pageSize
        )"
        :key="index"
      >
        <div class="type-first-mid-box-video">
          <video
            class="w-[100%] h-[100%]"
            :src="item.video_url"
            controls
          ></video>
        </div>
        <div class="type-first-mid-box-text max-h-[140px] overflow-auto">
          <div>
            <span>视频名称：</span>
            <span style="font-weight: normal">{{
              fetchFileNameByPath(item?.video_url)
            }}</span>
          </div>
          <template v-if="title === '酒精度数'">
            <div>
              <span>酒精度数：</span>
              <span style="font-weight: normal"
                >{{ item["酒精度数"] }}mg/100ml</span
              >
            </div>
            <div>
              <span>酒精检测时间：</span>
              <span style="font-weight: normal"
                >{{ item["酒精检测时间"] }}</span
              >
            </div>
          </template>

          <div v-else-if="title === '语音角色'">
            <span>语音角色：</span>
            <div class="max-h-[75px] overflow-auto">
              <div v-for="(v, k) in item['语音角色']" :key="k">
                <span>角色{{ Number(k) + 1 }}：</span>
                <span style="font-weight: normal">{{
                  transformKeyframes(v)
                }}</span>
              </div>
            </div>
          </div>
          <div v-else>
            <span>关键帧：</span>
            <span style="font-weight: normal">{{
              transformKeyframes(item[`${title}时间`])
            }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="type-first-bottom mt-[87px]" v-if="currentInfo?.length">
      <BasePagination
        class="bg-transparent"
        :showTable="false"
        :total="currentInfo?.length"
        :pageSize="pagination.pageSize"
        :dataSource="currentInfo"
        :isFixedPagination="true"
        :page="pagination.page"
        @change="changePage"
      >
      </BasePagination>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { BasePagination } from "@/components/CustomTable";
import { fetchFileNameByPath } from "@/utils/forFiles";

defineOptions({
  name: "Type1ObjectDetectWarp",
});
interface Props {
  typeKey: String;
  info: Record<string, any>;
  title: String;
}
const props = withDefaults(defineProps<Props>(), {
  typeKey: "1",
  info: {},
  title: String,
});
const pagination = ref({ page: 1, pageSize: 8 });
const currentInfo = ref<Record<string, any> | null>(null);

// 分页
function changePage({ page, pageSize }) {
  pagination.value = { page, pageSize };
}
function transformKeyframes(data) {
  if (!Array.isArray(data)) {
    return "";
  }
  // 直接遍历数组
  const result = data.map((item) => {
    // 假设每个 item 是 [开始时间, 结束时间] 的数组
    if (Array.isArray(item) && item.length === 2) {
      return `${item[0]}-${item[1]}`;
    }
    return ""; // 处理异常情况
  });

  // 过滤空值并拼接成字符串
  return `["${result.filter(Boolean).join('", "')}"]`;
}

watch(
  props.info,
  () => {
    if (["遮挡", "人机分离"].includes(props.title)) {
      currentInfo.value = props.info.filter((item) => item?.[props.title]);
    } else {
      currentInfo.value = props.info;
    }
  },
  {
    immediate: true,
    deep: true,
  }
);

</script>
<style lang="scss" scoped>
.type-first {
  .type-first-top {
    cursor: pointer;
    margin-bottom: 16px;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 20px;
    color: #1d2129;
  }
  .type-first-mid {
    min-height: 744px;
    max-height: 744px;
    overflow-y: auto;
    .type-first-mid-box {
      box-sizing: border-box;
      width: 348px;
      height: 360px;
      background: #fff;
      border-radius: 4px;
      .type-first-mid-box-video {
        box-sizing: border-box;
        width: 100%;
        height: 198px;
        img {
          border-radius: 4px 4px 0 0;
        }
      }
      .type-first-mid-box-text {
        box-sizing: border-box;
        width: 100%;
        height: 162px;
        padding: 16px 16px 0;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 14px;
        color: #1d2129;
      }
    }
  }
}
</style>
