<template>
  <view class="page-container">
    <BackBar title="历史截屏" />
    <scroll-view scroll-y class="scroll-container">
      <view v-if="dataList.length === 0" class="empty_box">
        <Empty content="暂无历史截屏数据哦～" />
      </view>
      <view v-else 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>
    </scroll-view>
  </view>
</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 simSerialNumber = ref();

function loadData() {
  deviceScreenshotRecordList({
    size: 1000,
    current: 1,
    simSerialNumber: simSerialNumber.value,
  }).then(res => {
    dataList.value = res.rows || [];
  }).catch(() => {
    dataList.value = [];
  });
}

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(() => {
    loadData();
  }, 500);
});
</script>

<style lang="scss" scoped>
.page-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.scroll-container {
  flex: 1;
  height: 0;
}

.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>
