<!--
 * @Author: donghao donghao@supervision.ltd
 * @Date: 2025-06-12 10:37:10
 * @LastEditors: donghao donghao@supervision.ltd
 * @LastEditTime: 2025-06-18 10:50:56
 * @FilePath: \Web-Traffic-Police\src\views\dataView\components\Type4AudioDetection.vue
 * @Description: 音频检测
-->
<template>
  <div class="type-third">
    <div class="type-third-mid">
      <BaseTable
        class="bg-transparent"
        :isHaddenPagination="true"
        :total="info?.length"
        :pageSize="pagination.pageSize"
        :dataSource="info.slice(
            (pagination.page - 1) * pagination.pageSize,
            pagination.page * pagination.pageSize
          )"
        :isFixedPagination="true"
        :columns="columns"
        :page="pagination.page"
      >
      </BaseTable>
    </div>
    <div class="type-third-bottom mt-[104px]">
      <BasePagination
        class="bg-transparent"
        :showTable="false"
        :total="info?.length"
        :pageSize="pagination.pageSize"
        :dataSource="info"
        :isFixedPagination="true"
        :page="pagination.page"
        @change="changePage"
        :pageSizes="[6, 12, 24, 48]"
      >
      </BasePagination>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { BaseTable, BasePagination } from "@/components/CustomTable";
import onLineIcon from "@/assets/common/online_icon.png";
import { fetchFileNameByPath } from "@/utils/forFiles";

defineOptions({
  name: "Type4AudioDetectionWarp",
});

interface Props {
  typeKey: String;
  info: Record<string, any>;
  title: String;
}

const props = withDefaults(defineProps<Props>(), {
  typeKey: "4",
  info: {},
  title: String,
});

const pagination = ref({ page: 1, pageSize: 6, total: 0 });
const listData = ref([]); // 列表数据
const columns = [
  {
    label: "视频",
    property: "video_url",
    width: 200,
    formatter: (row) => {
      return h("video", {
        src: row.video_url,
        controls: "controls",
        style: {
          width: "160px",
          height: "100px",
        },
      });
    },
  },
  {
    label: "文件名称",
    property: "video_url",
    formatter: (row, column, value) => {
      if (value) {
        return fetchFileNameByPath(value);
      }
      return "-";
    },
  },
  {
    label: "告知执法依据",
    property: "告知执法依据",
    formatter: (row, column, value) => {
      if (value) {
        return h("img", {
          src: onLineIcon,
          style: {
            width: "20px",
            height: "20px",
            marginRight: "10px",
          },
        });
      }
    },
  },
  {
    label: "告知民警身份",
    property: "告知民警身份",
    formatter: (row, column, value) => {
      if (value) {
        return h("img", {
          src: onLineIcon,
          style: {
            width: "20px",
            height: "20px",
            marginRight: "10px",
          },
        });
      }
    },
  },
  // 告知处罚内容
  {
    label: "告知处罚内容",
    property: "告知处罚内容",
    formatter: (row, column, value) => {
      if (value) {
        return h("img", {
          src: onLineIcon,
          style: {
            width: "20px",
            height: "20px",
            marginRight: "10px",
          },
        });
      }
    },
  },
  {
    label: "告知申辩权利",
    property: "告知申辩权利",
    formatter: (row, column, value) => {
      if (value) {
        return h("img", {
          src: onLineIcon,
          style: {
            width: "20px",
            height: "20px",
            marginRight: "10px",
          },
        });
      }
    },
  },
  {
    label: "告知复议诉讼等救济途径",
    property: "告知复议诉讼等救济途径",
    width: 120,
    formatter: (row, column, value) => {
      if (value) {
        return h("img", {
          src: onLineIcon,
          style: {
            width: "20px",
            height: "20px",
            marginRight: "10px",
          },
        });
      }
    },
  },
  {
    label: "告知执法全程被记录",
    property: "告知执法全程被记录",
    width: 120,
    formatter: (row, column, value) => {
      if (value) {
        return h("img", {
          src: onLineIcon,
          style: {
            width: "20px",
            height: "20px",
            marginRight: "10px",
          },
        });
      }
    },
  },
  {
    label: "核实当事人身份信息",
    property: "核实当事人身份信息",
    width: 160,
    formatter: (row, column, value) => {
      if (value) {
        return h("img", {
          src: onLineIcon,
          style: {
            width: "20px",
            height: "20px",
            marginRight: "10px",
          },
        });
      }
    },
  },
  {
    label: "告知违法事实",
    property: "告知违法事实",
    formatter: (row, column, value) => {
      if (value) {
        return h("img", {
          src: onLineIcon,
          style: {
            width: "20px",
            height: "20px",
            marginRight: "10px",
          },
        });
      }
    },
  },
  {
    label: "语速",
    property: "语速",
  },
];

// 分页
function changePage({ page, pageSize }) {
  pagination.value = { page, pageSize };
}
</script>
<style lang="scss" scoped>
.type-third {
  .type-third-top {
    cursor: pointer;
    margin-bottom: 16px;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 20px;
    color: #1d2129;
  }

  .type-third-mid {
    width: 100%;
    min-height: 812px;
    max-height: 812px;
    overflow-y: auto;
    background: #fff;
  }
}
</style>
