<script setup lang="ts">
import { useWindowSize } from "@vueuse/core";
import { ref, reactive, onMounted } from "vue";
import { PureTable } from "@pureadmin/table";
import { type PaginationProps } from "@pureadmin/table";
import { ElMessage } from "element-plus";
import { videoUtil } from "./hook";
import { useRouter, useRoute } from "vue-router";
import { isEmpty } from "@pureadmin/utils";
import { Back } from "@element-plus/icons-vue";

import { getPicList, getTPList } from "@/api/videoParse";

defineOptions({
  name: "videoParse"
});
const { columns, openDialog } = videoUtil();
const router = useRouter();
const route = useRoute();
const getParameter = isEmpty(route.params) ? route.query : route.params;
// console.log(getParameter);

const { height } = useWindowSize();

const videoData = ref([]);
const loading = ref(true);
const currentPage = ref(1);
const totalNumber = ref(0);
const pageSize = ref(10);
// const isDisplay = true;
const pagination = reactive<PaginationProps>({
  total: totalNumber.value,
  pageSize: pageSize.value,
  currentPage: currentPage.value,
  background: true
});
const personOddList = ref([]);
const personEvenList = ref([]);
const carOddList = ref([]);
const carEvenList = ref([]);

function handleUpdate(row) {
  openDialog("我的", row);
  console.log(row);
}
function handleSizeChange(val) {
  pageSize.value = val;
  onSearch();
}

function handleCurrentChange(val) {
  currentPage.value = val;
  onSearch();
}
const hightFlag = ref(false);
function onSearch() {
  const video_name = getParameter.video_name || undefined;
  // if (fileList.value.length > 0) {
  //   video_name = fileList.value[0].name;
  // }
  const params = {
    video_name: video_name,
    page: currentPage.value || undefined,
    page_size: pageSize.value || undefined
  };
  getTPList(params).then(response => {
    if (response.success) {
      const dataList = response;
      totalNumber.value = dataList.count;
      pagination.total = dataList.count;
      videoData.value = dataList.results;
      setTimeout(() => {
        loading.value = false;
      }, 500);
    } else {
      ElMessage.warning(`提示：${response.msg}，请稍后再试！`);
    }
  });
  getPicList(params).then(response => {
    if (response.success) {
      const dataList = response;
      personOddList.value = dataList.data.person.filter(
        (item, index) => (index + 1) % 2 == 1
      );
      personEvenList.value = dataList.data.person.filter(
        (item, index) => (index + 1) % 2 == 0
      );
      carOddList.value = dataList.data.car.filter(
        (item, index) => (index + 1) % 2 == 1
      );
      carEvenList.value = dataList.data.car.filter(
        (item, index) => (index + 1) % 2 == 0
      );
      if (dataList.data.person.length > dataList.data.car.length) {
        if (dataList.data.person.length > 4) {
          hightFlag.value = true;
        } else {
          hightFlag.value = false;
        }
      } else {
        if (dataList.data.person.length > 4) {
          hightFlag.value = true;
        } else {
          hightFlag.value = false;
        }
      }
      setTimeout(() => {
        loading.value = false;
      }, 500);
    }
  });
}

// function spanStyle(type) {
//   switch (type) {
//     case 1:
//       return "span-first";
//     case 2:
//       return "span-second";
//     case 3:
//       return "span-third";
//     default:
//       return "span-default";
//   }
// }

function tagStyle(type) {
  switch (type) {
    case "疑似遮挡":
      return "span-occlusion";
    case "疑似递烟":
      return "span-smoke";
    case "疑似递钱":
      return "span-money";
    case "疑似静止":
      return "span-stillness";
    default:
      return "span-shake";
  }
}

function getRandType(type) {
  // const type = Math.floor(Math.random() * 5) + 1;
  switch (type) {
    case "画面异常":
      return "warning";
    default:
      return "danger";
  }
}

onMounted(() => {
  onSearch();
  // setInterval(() => {
  //   onSearch();
  // }, 1000 * 60 * 5);
});
</script>

<template>
  <div class="main">
    <el-row :gutter="24">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="w-full flex justify-between mb-4">
          <el-button
            :icon="Back"
            key="视频详情"
            link
            text
            class="btn-style"
            @click="router.push('/videoList/index')"
            >视频详情</el-button
          >
        </div>
        <el-card
          class="box-card"
          shadow="never"
          :style="{ height: `calc(${height}px - 140px)` }"
        >
          <div class="w-full h-[58px] flex items-center">
            <h4>异常标签</h4>
          </div>
          <div class="w-full h-[58px]">
            <span :class="tagStyle('疑似遮挡')">{{ "疑似遮挡" }}</span>
          </div>
          <div class="w-full h-[58px] flex items-center">
            <h4>视频分析列表</h4>
          </div>
          <pure-table
            adaptive
            align-whole="left"
            table-layout="auto"
            :loading="loading"
            :data="videoData"
            :columns="columns"
            :pagination="pagination"
            :paginationSmall="false"
            :header-cell-style="{
              background: 'var(--el-table-row-hover-bg-color)',
              color: 'var(--el-text-color-primary)'
              // color: 'blue'
            }"
            @page-size-change="handleSizeChange"
            @page-current-change="handleCurrentChange"
          >
            <template #behavior="{ row }">
              <span :class="tagStyle(row.abnormal_behavior)">{{
                row.abnormal_behavior
              }}</span>
            </template>
            <template #image="{ row, index }">
              <el-image
                preview-teleported
                loading="lazy"
                :src="row.abnormal_pic"
                :preview-src-list="[row.abnormal_pic]"
                :initial-index="index"
                fit="cover"
                class="h-[56px] rounded"
              />
            </template>
            <template #exception_type="{ row }">
              <span
                :class="
                  row.exception_type == '行为异常'
                    ? 'isbehavior'
                    : 'default-behavior'
                "
                :type="getRandType(row.exception_type)"
              >
                {{ row.exception_type }}
              </span>
            </template>
            <template #video="{ row }">
              <el-button
                class="reset-margin"
                link
                type="primary"
                @click="handleUpdate(row)"
              >
                播放视频
              </el-button>
            </template>
          </pure-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<style scoped lang="scss">
.card-header {
  span {
    font-weight: bold;
  }
}

.file-upload {
  height: 60px;

  .upload-box {
    width: 300px;

    .upload {
      span {
        margin-right: 10px;
      }
    }
  }
}

.analysis-content {
  .analysis-box {
    width: 49.5%;
    // padding: 20px;
    // box-shadow: 5px 5px 5px rgb(0 0 0 / 2.5%), 5px -5px 5px rgb(0 0 0 / 2.5%),
    //   -5px 5px 5px rgb(0 0 0 / 2.5%), -5px -5px 5px rgb(0 0 0 / 2.5%);
    // background: skyblue;
    // height: 400px;
    // border: 1px solid #eee;
    // border-radius: 4px;
    .analysis-box-label {
      display: block;
      margin-bottom: 16px;
      font-size: 16px;
      font-weight: 600;
      color: rgb(51 51 51 / 100%);
    }

    .analysis-table {
      display: flex;
      justify-content: space-between;
      width: 100%;
      border: 1px solid #eee;
      border-radius: 4px;

      .analysis-table-left {
        // width: 45%;
        flex: 1;

        .analysis-box-lable {
          display: flex;
          align-items: center;
          justify-content: space-around;
          // padding-left: 20px;
          height: 48px;
          padding-right: 10px;
          font-size: 14px;
          color: #303133;
          background: #f5f7fa;
        }

        .scrollbar-item {
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: space-around;
          height: 90px;
          padding: 10px 20px 10px 0;
          font-size: 14px;
          border-bottom: 1px solid #eee;
          // margin-bottom: 20px;

          .defect-image {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 120px;
            height: 70px;
            background: #eee;
            border-radius: 4px;

            span {
              position: absolute;
              bottom: 0;
              left: 0;
              width: 100%;
              height: 24px;
              font-size: 12px;
              line-height: 24px;
              color: #fff;
              text-align: center;
              background-color: rgb(0 0 0 / 60%);
              border-radius: 0 0 4px 4px;
            }
          }
        }
      }
    }
  }
}

:deep(.analysis-box-line) {
  height: 320px;
}

.span-first {
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  font-size: 14px;
  line-height: 20px;
  color: #fff;
  text-align: center;
  background: rgb(224 40 40 / 100%);
  border: 3px solid rgb(252 171 171 / 100%);
  border-radius: 50%;
}

.span-second {
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  font-size: 14px;
  line-height: 20px;
  color: #fff;
  text-align: center;
  background: rgb(229 139 3 / 100%);
  border: 3px solid rgb(255 223 173 / 100%);
  border-radius: 50%;
}

.span-third {
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  font-size: 14px;
  line-height: 20px;
  color: #fff;
  text-align: center;
  background: rgb(81 110 224 / 100%);
  border: 3px solid rgb(173 190 255 / 100%);
  border-radius: 50%;
}

.span-default {
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  font-size: 14px;
  line-height: 24px;
  color: rgb(51 51 51 / 100%);
  text-align: center;
  background: rgb(28 13 130 / 15%);
  border-radius: 50%;
}

.btn-style {
  font-size: 20px;
  font-weight: 600;
  color: rgb(51 51 51 / 100%);
}

.isbehavior,
.default-behavior {
  box-sizing: border-box;
  display: inline-block;
  width: 64px;
  height: 24px;
  font-size: 12px;
  color: #fff;
  text-align: center;
  background: #f56c6c;
  border-radius: 2px;
}

.default-behavior {
  background: #448bf5;
}

.span-occlusion,
.span-smoke,
.span-money,
.span-stillness,
.span-shake {
  box-sizing: border-box;
  display: inline-block;
  width: 64px;
  height: 24px;
  font-size: 12px;
  line-height: 22px;
  color: rgb(247 95 25 / 100%);
  text-align: center;
  background: rgb(247 112 49 / 10%);
  border: 1px solid #f75f19;
  border-radius: 2px;
}

.span-smoke {
  color: rgb(2 36 215 / 100%);
  background: rgb(2 36 215 / 10%);
  border: 1px solid rgb(2 36 215 / 100%);
}

.span-money {
  color: rgb(232 13 13 / 100%);
  background: rgb(232 13 13 / 10%);
  border: 1px solid rgb(232 13 13 / 100%);
}

.span-stillness {
  color: rgb(68 174 245 / 100%);
  background: rgb(68 174 245 / 10%);
  border: 1px solid rgb(68 174 245 / 100%);
}

.span-shake {
  color: rgb(246 148 0 / 100%);
  background: rgb(246 148 0 / 10%);
  border: 1px solid rgb(246 148 0 / 100%);
}
</style>
