<!--
 * @Author: donghao donghao@supervision.ltd
 * @Date: 2025-06-12 10:37:10
 * @LastEditors: donghao donghao@supervision.ltd
 * @LastEditTime: 2025-06-16 16:16:04
 * @FilePath: \Web-Traffic-Police\src\views\dataView\components\Type4AudioDetection.vue
 * @Description: 递烟
-->
<template>
  <div class="type-fourth">
    <!-- <div class="type-fourth-top">
            <span>←</span> <span>车牌识别</span>
        </div> -->
    <div class="type-fourth-mid">
      <div class="type-fourth-mid-video">
        <div
          class="arrow-icon left-arrow"
          @click="toPrev()"
          v-if="info?.length > 1"
        ></div>
        <div class="h-[100%] flex flex-col justify-center items-center">
          <video :src="currentInfo?.video_url" controls></video>
          <p>{{ fetchFileNameByPath(currentInfo?.video_url) }}</p>
        </div>
        <div
          class="arrow-icon right-arrow"
          @click="toNext()"
          v-if="info?.length > 1"
        ></div>
      </div>
      <div class="type-fourth-mid-tab">
        <el-button
          v-for="v in regTypeMap"
          :type="currentRegType === v ? 'primary' : ''"
          class="w-[76px] h-[32px!important]"
          :key="v"
          @click="changeRegType(v)"
          >{{ v }}</el-button
        >
      </div>
      <div
        class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4 type-fourth-mid-box"
      >
        <div
          class="type-fourth-mid-crad"
          v-for="(item, index) in currentInfoList.slice(
            (pagination.page - 1) * pagination.pageSize,
            pagination.page * pagination.pageSize
          )"
          :key="index"
        >
          <div
            class="flex items-center justify-center type-fourth-mid-crad-image max-w-[100%] overflow-hidden"
          >
            <img :src="item['图片']" class="h-[100%]" />
          </div>
          <div class="type-fourth-mid-crad-text">
            <span style="color: #666">检测类型:</span> {{ item["检测类型"] }}
          </div>
        </div>
      </div>
    </div>
    <div class="type-fourth-bottom mt-[100px]" v-if="currentInfoList?.length">
      <BasePagination
        class="bg-transparent"
        :showTable="false"
        :total="currentInfoList?.length"
        :pageSize="pagination.pageSize"
        :dataSource="currentInfoList"
        :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: "Type3TargetRecog",
});
interface Props {
  typeKey: String;
  info: Record<string, any>;
  title: String;
}

const props = withDefaults(defineProps<Props>(), {
  typeKey: "3",
  info: {},
  title: String,
});
// 目标检测类型
const regTypeMap = ref<string[]>([]);
const currentRegType = ref<string>("全部");
const pagination = ref({ page: 1, pageSize: 8 });
const currentIndex = ref<number>(0); // 当前视频索引
const currentInfo = ref<Record<string, any> | null>(null);
const currentInfoList = ref<Record<string, any>[]>([]);
// 当前目标检测信息列表合并
function convertObjects(key) {
  const targetArr = currentInfo.value?.["目标检测"]?.[key];
  const result = [];
  for (let i = 0; i < targetArr.length; i++) {
    result.push({
      ["图片"]: targetArr[i],
      ["检测类型"]: key,
    });
  }
  return result;
}

// 分页
function changePage({ page, pageSize }) {
  pagination.value = { page, pageSize };
}

// 切换视频
function changeCurrentVideo(index: number) {
  currentIndex.value = index;
  currentInfo.value = props.info[index];
}
function toPrev() {
  if (currentIndex.value > 0) {
    changeCurrentVideo(toRaw(currentIndex.value) - 1);
  } else {
    changeCurrentVideo(props.info.length - 1);
  }
}
function toNext() {
  if (currentIndex.value < props.info.length - 1) {
    changeCurrentVideo(toRaw(currentIndex.value) + 1);
  } else {
    changeCurrentVideo(0);
  }
}

// 切换识别类型
function changeRegType(record) {
  currentRegType.value = record;
  console.log(record, "changeRegType");
}

watch(
  props.info,
  () => {
    currentInfo.value = props.info[0];
    regTypeMap.value = ['全部', ...Object.keys(currentInfo.value?.["目标检测"])];
  },
  {
    immediate: true,
    deep: true,
  }
);

watch(
  () => [currentIndex.value, currentRegType.value],
  () => {
    console.log(
      currentInfo.value,
      props.title,
      "watch-目标检测-currentInfo.value"
    );
    pagination.value = { ...toRaw(pagination.value), page: 1 };
    const currRegTypeKey = toRaw(currentRegType.value);
    if (currRegTypeKey === "全部") {
      let targerArr = []
      Object.keys(currentInfo.value?.["目标检测"]).forEach((key) => {
        targerArr = targerArr.concat([...convertObjects(key)])
      })
      currentInfoList.value = targerArr
    } else {
      currentInfoList.value = convertObjects(currRegTypeKey);
    }
  },
  {
    immediate: true,
    deep: true,
  }
);
</script>
<style lang="scss" scoped>
.type-fourth {
  .type-fourth-top {
    cursor: pointer;
    margin-bottom: 16px;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 20px;
    color: #1d2129;
  }
  .type-fourth-mid {
    .type-fourth-mid-video {
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 324px;
      border-radius: 4px;
      .arrow-icon {
        width: 40px;
        height: 40px;
        margin: 0 32px;
        cursor: pointer;
        background-image: url("@/assets/images/left_arrow.png");
        background-size: 100%;
        background-position: center;
        background-repeat: no-repeat;
      }
      .right-arrow {
        background-image: url("@/assets/images/right_arrow.png");
      }
      video {
        width: 720px;
        height: 100%;
        border-radius: 4px;
      }
    }
    .type-fourth-mid-tab {
      box-sizing: border-box;
      margin-top: 24px;
      margin-bottom: 16px;
      width: 100%;
      height: 32px;
    }
    .type-fourth-mid-box {
      min-height: 420px;
      max-height: 420px;
      overflow-y: auto;
      .type-fourth-mid-crad {
        box-sizing: border-box;
        width: 348px;
        height: 202px;
        background: #fff;
        border-radius: 4px;
        .type-fourth-mid-crad-image {
          box-sizing: border-box;
          width: 100%;
          height: 148px;
          img {
            border-radius: 4px 4px 0 0;
          }
        }
        .type-fourth-mid-crad-text {
          box-sizing: border-box;
          width: 100%;
          height: 54px;
          padding: 16px;
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          font-size: 14px;
          color: #1d2129;
        }
      }
    }
  }
}
</style>
