<template>
  <div class="container" style="padding-top: 13vw">
    <TopNav :navTitle="'通行轨迹'" :showLeft="true" />
    <van-list
      :finished="finished"
      finished-text="没有更多数据了"
      @load="onLoad"
      offset="1"
      :immediate-check="false"
    >
      <div class="txgj_box">
        <div class="item_img_box" v-for="(item, index) in list" :key="item.id">
          <van-image
            width="100%"
            height="30vw"
            :src="item.baseUrl"
            style="flex: 1"
            @click.stop="onClickImg(item.ryPhoto, index)"
          >
            <template v-slot:loading>
              <van-loading type="spinner" size="20" />
            </template>
          </van-image>
          <div class="time">{{ item.djsj }}</div>
          <div
            class="jcFlag"
            :class="{
              bg_green: item.inOut === 'in',
              bg_orange: item === 'out',
            }"
          >
            {{ item.inOut === "out" ? "出" : "进" }}
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { getBase64 } from "../../../utils/tools.js";
import TopNav from "../../../components/topNav.vue";
import { ImagePreview } from "vant";
import { ymPostRequest } from "../../../utils/tools.js";
import { useRoute } from "vue-router";
const route = useRoute();
const list = ref([]);
const finished = ref(false);
const queryList = ref({
  page: 1,
  psize: 10,
  gmsfhm: route.query.sfzh,
});
function _getBase64(item) {
  getBase64((res) => {
    item.baseUrl = res;
  }, item.ryPhoto);
}
const total = ref(0);
const getList = () => {
  ymPostRequest(
    "/person/record_list",
    { ...queryList.value },
    route.query.token,
    (res) => {
      if (queryList.value.page === 1) {
        list.value = res.data.content;
        list.value.map((item) => {
        _getBase64(item);
      });
      } else {
        res.data.content.map(item=>{
          _getBase64(item);
          list.value.push(item)
        })
      }
      total.value = res.data.totalElements;
    }
  );
};
function onLoad() {
  if (list.value.length === total.value) {
    finished.value = true;
  } else {
    queryList.value.page++;
    getList();
  }
}
function onClickImg(url, index) {
  ImagePreview({
    images: list.value.map((item) => item.baseUrl),
    startPosition: index,
  });
}
onMounted(() => {
  getList();
});
</script>

<style lang='scss' scoped>
@import "../../../assets/styles/mixin.scss";
.txgj_box {
  display: flex;
  padding: 16px 4.5% 0;
  justify-content: space-between;
  flex-wrap: wrap;
}
.item_img_box {
  //   border: 1px solid red;
  position: relative;
  width: 48%;
  .time {
    font-size: 11px;
    // @include font_size($font_medium_s);
  }
  .jcFlag {
    position: absolute;
    top: 0;
    right: 0;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    @include font_size($font_medium_s);
    padding: 1vw;
  }
}
</style>