<!--
 * @Author: donghao donghao@supervision.ltd
 * @Date: 2025-06-12 10:27:06
 * @LastEditors: donghao donghao@supervision.ltd
 * @LastEditTime: 2025-06-18 10:54:50
 * @FilePath: \Web-Traffic-Police\src\views\dataView\components\Type2LicensePlateRecog.vue
 * @Description: 车牌识别 人脸检测
-->
<template>
  <div class="type-second">
    <div class="type-second-mid">
      <div class="type-second-mid-video" v-if="info?.length > 0">
        <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>
      <ul
        class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4 type-second-mid-box"
      >
        <template v-if="title === '车牌识别'">
          <li
            class="type-second-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 overflow-hidden bg-black type-second-mid-crad-image"
            >
              <img :src="item['车牌图片']" class="max-h-[100%] max-w-[100%] scale-[1.5]" />
            </div>
            <div class="type-second-mid-crad-text text_color_6">
              <p>
                <span>牌照颜色：</span
                ><span :style="{ color: objectRegTypeMap[item['车牌颜色']] }">{{
                  item["车牌颜色"] ? item["车牌颜色"] + "色" : "未知"
                }}</span>
              </p>
              <p>
                <span>牌照号码：</span
                ><span class="text_des_1">{{ item["车牌号"] }}</span>
              </p>
            </div>
          </li>
        </template>
        <template v-else>
          <li
            class="type-second-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-second-mid-crad-image max-w-[100%] overflow-hidden"
            >
              <img :src="item['人脸图片']" class="h-[100%]" />
            </div>
            <div class="type-second-mid-crad-text text_color_6">
              <p>
                <span>人脸{{ item.faceNO }}</span>
              </p>
            </div>
          </li>
        </template>
      </ul>
    </div>
    <div class="type-second-bottom mt-[87px]" 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: "Type2LicensePlateRecogWarp",
});
interface Props {
  typeKey: String;
  info: Record<string, any>;
  title: String;
}
const props = withDefaults(defineProps<Props>(), {
  typeKey: "4",
  info: {},
  title: String,
});
// 目标检测类型
const objectRegTypeMap = {
  ["黄"]: "#E3A108",
  ["蓝"]: "#3B64AC",
  ["绿"]: "#2BC284",
  ["白"]: "#1d2129",
};
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 convertLPRArrToObjects() {
  const result = [];
  for (let i = 0; i < currentInfo.value?.["车牌图片"].length; i++) {
    result.push({
      ["车牌图片"]: currentInfo.value?.["车牌图片"][i],
      ["车牌号"]: currentInfo.value?.["车牌号"][i],
      ["车牌颜色"]: currentInfo.value?.["车牌颜色"][i],
    });
  }
  return result;
}
// 当前人脸识别图片信息列表合并
function convertFRArrToObjects() {
  const result = [];
  for (let i = 0; i < currentInfo.value?.["人脸图片"].length; i++) {
    result.push({
      ["人脸图片"]: currentInfo.value?.["人脸图片"][i],
      faceNO: (Number(i) + 1 < 10 ? "0" : "") + (Number(i) + 1),
    });
  }
  return result;
}

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

// 切换视频
function changeCurrentVideo(index: number) {
  pagination.value = { ...toRaw(pagination.value), page: 1 };
  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);
  }
}
watch(
  props.info,
  () => {
    currentInfo.value = props.info[0];
  },
  {
    immediate: true,
    deep: true,
  }
);

watch(
  () => [currentIndex.value],
  () => {
    console.log(
      currentInfo.value,
      props.title,
      "watch-车牌识别-currentInfo.value"
    );
    switch (props.title) {
      case "车牌识别":
        currentInfoList.value = convertLPRArrToObjects();
        break;
      default:
        currentInfoList.value = convertFRArrToObjects();
        break;
    }
  },
  {
    immediate: true,
    deep: true,
  }
);

/**人脸检测 */
</script>
<style lang="scss" scoped>
.type-second {
  .type-second-top {
    cursor: pointer;
    margin-bottom: 16px;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 20px;
  }
  .type-second-mid {
    .type-second-mid-video {
      box-sizing: border-box;
      margin-bottom: 24px;
      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-second-mid-box {
      // display: flex;
      // // justify-content: space-between;
      // align-content: space-between;
      // flex-direction: row;
      // flex-wrap: wrap;
      // height: 480px;
      min-height: 480px;
      max-height: 480px;
      overflow-y: auto;
      .type-second-mid-crad {
        box-sizing: border-box;
        width: 348px;
        height: 232px;
        background: #fff;
        border-radius: 4px;
        .type-second-mid-crad-image {
          box-sizing: border-box;
          width: 100%;
          height: 148px;
          img {
            border-radius: 4px 4px 0 0;
          }
        }

        .type-second-mid-crad-text {
          box-sizing: border-box;
          width: 100%;
          height: 84px;
          padding: 16px;
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          font-size: 14px;
        }
      }
    }
  }
}
</style>
