<template>
  <z-paging ref="paging" v-model="dataList" :auto="false" @query="queryList">
    <BackBar title="历史截屏" />
    <template v-slot:empty>
      <view class="empty_box">
        <Empty content="暂无历史截屏数据哦～" />
      </view>
    </template>
    <view class="content">
      <view
        v-for="(item, index) in dataList"
        :key="index"
        class="item"
        @click="previewImageFun(index)"
      >
        <image class="itemImage" :src="item.imageUrl" mode="aspectFill" />
        <view class="time">{{ item.createTime.replace(/-/g, '.') }}</view>
      </view>
    </view>
  </z-paging>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { deviceScreenshotRecordList } from '@/api';
import { onLoad } from '@dcloudio/uni-app';
import Empty from '@/components/Empty/index.vue';
const dataList = ref([]);
const paging = ref();

const simSerialNumber = ref();
function queryList(pageNo: number, pageSize: number) {
  deviceScreenshotRecordList({
    size: pageSize,
    current: pageNo,
    simSerialNumber: simSerialNumber.value,
  }).then(res => {
    paging.value.complete(res.data.rows);
  });
}

function previewImageFun(idx: any) {
  let urls = dataList.value.map(item => {
    return item.imageUrl;
  });
  uni.previewImage({
    current: idx,
    urls: urls,
  });
}

onLoad(option => {
  simSerialNumber.value = option.simSerialNumber;
  setTimeout(() => {
    paging.value?.reload(); // 刷新列表
  }, 500);
});
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 30upx;
  box-sizing: border-box;
  gap: 30upx;
}
.empty_box {
  .empty {
    margin-top: 0 !important;
  }
}
.item {
  width: 47%;
  height: 280upx;
  display: flex;
  flex-direction: column;
  border-radius: 20upx;
  overflow: hidden;
  background: #fff;

  .itemImage {
    width: 100%;
    height: 206upx;
  }
  .time {
    font-size: 28upx;
    color: #a9aab5;
    margin: 10rpx 0 0 20rpx;
    width: 100%;
  }
}
</style>
