<!--
  Description: 识别结果
  Author: 李亚光
  Date: 2024-11-06
 -->
<script lang="ts" setup name="IdentifyResultPage">
import dayjs from 'dayjs'
import { getResultList, getResultPic } from '@/api/page/result'
import { getDeviceAll } from '@/api/page/device'
import img from '@/assets/image/loading.gif'
// 获取页面高度
const pageHeight = ref(window.innerHeight - 50 - 60 - 20 - 20 - 10 - 30 - 15 - 15)
window.addEventListener('resize', () => {
  pageHeight.value = window.innerHeight - 50 - 60 - 20 - 20 - 10 - 30 - 15 - 15
})
const deviceList = ref<any[]>([])
const publicPath = window.location.href.split('#')[0]
const loadingTable = ref(true)
const total = ref(0)
const list = ref<any[]>([])
//  查询条件
const listQuery = ref({
  limit: 20,
  offset: 1,
  device_name: '',
  frame_start_time: '',
  frame_end_time: '',
})
// 开始结束时间
const datetimerange = ref()
watch(() => datetimerange.value, (newVal) => {
  listQuery.value.frame_start_time = ''
  listQuery.value.frame_end_time = ''
  if (Array.isArray(newVal)) {
    if (newVal.length) {
      listQuery.value.frame_start_time = `${newVal[0]} 00:00:00`
      listQuery.value.frame_end_time = `${newVal[1]} 23:59:59`
    }
  }
})
// 获取数据
const fetchData = () => {
  loadingTable.value = true
  getResultList(listQuery.value).then((res) => {
    total.value = res.data.total
    list.value = res.data.items.map((item: any) => {
      return {
        ...item,
        time: dayjs(item.time).format('YYYY-MM-DD HH:mm:ss'),
        url: `${publicPath}/image/loading.gif`,
      }
    })
    list.value.forEach((element: any) => {
      getResultPic({ frame_id: element.id }).then((res) => {
        const reader = new FileReader()
        reader.onload = (e: any) => {
          element.url = e.target.result
        }
        reader.readAsDataURL(res.data)
      }).catch(() => {
        element.url = ''
      })
    })
    const seat = list.value.length % 4
    // 占位符 重要用来补充不足4的部分(布局需要)
    if (seat !== 0) {
      for (let i = 0; i < 4 - seat; i++) {
        console.log(i, 4 - (list.value.length % 4))
        list.value.push({
          id: '',
        })
      }
    }
    // const
    loadingTable.value = false
  }).catch(() => {
    loadingTable.value = false
  })
}
fetchData()
// 重置
const reset = () => {
  datetimerange.value = []
  listQuery.value = {
    limit: 20,
    offset: 1,
    device_name: '',
    frame_start_time: '',
    frame_end_time: '',
  }
  fetchData()
}
// 改变条数
const handleSizeChange = (value: any) => {
  listQuery.value.limit = value
  fetchData()
}
// 改变页码
const handleCurrentChange = (value: any) => {
  listQuery.value.offset = value
  fetchData()
}

// 获取下拉框数据
const fetchDict = () => {
  getDeviceAll({}).then((res) => {
    deviceList.value = res.data
  })
}
fetchDict()

const imgHeight = ref(160)
onMounted(() => {
  const width = window.innerWidth * 0.22
  imgHeight.value = (9 * width) / 16
})
window.addEventListener('resize', () => {
  const width = window.innerWidth * 0.22
  imgHeight.value = (9 * width) / 16
})
</script>

<template>
  <!-- 布局 -->
  <app-container>
    <search-area :need-clear="true" @search="fetchData" @clear="reset">
      <search-item>
        <el-select v-model="listQuery.device_name" placeholder="摄像头" clearable class="select" style="width: 192px;">
          <el-option v-for="item in deviceList" :key="item.id" :value="item.name" :label="item.name" />
        </el-select>
      </search-item>
      <search-item>
        <el-date-picker
          v-model="datetimerange" type="daterange" value-format="YYYY-MM-DD" format="YYYY-MM-DD"
          range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
        />
      </search-item>
    </search-area>
    <table-container v-loading="loadingTable">
      <!-- 页面展示 -->
      <el-scrollbar v-if="list.length" :height="`${pageHeight}px`">
        <div class="conatiner-scrollbar">
          <div v-for="item in list" :key="item.id" class="show-item" :class="`${item.id ? '' : 'none'}`">
            <el-image class="img" :style="{ height: `${imgHeight}px` }" :preview-src-list="[item.url]" :src="item.url" fit="cover" />
            <!-- <span class="title">口罩识别</span> -->
            <span class="time">{{ item.time }}</span>
          </div>
        </div>
      </el-scrollbar>
      <el-empty v-else description="暂无数据" :size="200" />
      <!-- 分页 -->
      <div style="width: 100%;margin: 0 auto;">
        <el-pagination
          :current-page="listQuery.offset" :page-sizes="[4, 8, 12, 16, 20]" :page-size="listQuery.limit"
          :total="total" layout="total, sizes, prev, pager, next" @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </table-container>
  </app-container>
</template>

<style lang="scss" scoped>
.conatiner-scrollbar {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;

  .show-item {
    width: 22%;
    box-sizing: border-box;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    // padding: 10px;
    border: 1px solid #ccc;
    // padding-top: 0;
    margin: 10px;

    .img {
      width: 100%;
      height: 160px;
    }

    .title {
      padding-left: 10px;
      margin-top: 10px;
      font-weight: 700;
      color: #3f3e3e;
    }

    .time {
      padding-left: 10px;
      margin-top: 10px;
      font-weight: 14px;
      color: #b1afaf;
      margin-bottom: 10px;
    }
  }
}

.none {
  opacity: 0;
}
</style>