<template>
  <el-scrollbar style="width: 100%; height: 100%">
    <div class="media-container">
      <div
        v-for="(item, index) in medias.filter((item: any) => item.filePath)"
        :key="index"
        class="media-item"
        @click="item.isSelected = !item.isSelected"
      >
        <el-image
          :initial-index="index"
          :max-scale="7"
          :min-scale="0.2"
          :preview-src-list="urlList"
          :src="getImgurl(item)"
          :zoom-rate="1.2"
          class="img-box"
          fit="cover"
        />
      </div>
      <div style="width: 70px;height: 70px;display: inline;">
        <RefreshRight
        color="#0a59f7"
        size="70px"
        class="refresh-btn"
        @click="clickReset"
      />
      </div>
    </div>
  </el-scrollbar>
</template>

<script lang="ts" setup>
import { useProcessStore } from "@/store";
import { RefreshRight } from "@element-plus/icons-vue";
import { pageMediasV2, syncMedias } from "@/api/prosteps/medias";

import CameraUpload from "@/components/Upload/CameraUpload.vue";

const proStore = useProcessStore();
const medias = ref<any>([]);
const urlList = ref<string[]>([]);

defineOptions({
  name: "Wuliaocaiji",
});

onMounted(() => {
  getListData();
});

const getListData = async () => {
  let p = {
    workOrderCode: proStore.scanInfo.workOrderCode,
    operationId: proStore.scanInfo.operationId,
    processId: proStore.scanInfo.id,
    seqNo: proStore.scanInfo.seqNo,
    operationMediaId: proStore.scanInfo.operationId,
  };
  await syncMedias(p);
  pageMediasV2(p).then((res: any) => {
    medias.value = res.data.records || [];
    urlList.value = res.data.records.map((item: any) => {
      return import.meta.env.VITE_APP_UPLOAD_URL + item.filePath;
    });
  });
};

const getImgurl = (item: any) => {
  let url = import.meta.env.VITE_APP_UPLOAD_URL + item.filePath;
  return url;
};

const clickReset = () => {
  getListData();
};
</script>

<style lang="scss" scoped>
.media-container {
  width: 100%;
  display: grid;
  /*行间距*/
  //grid-row-gap: 24px;
  ///*列间距*/
  //grid-column-gap: 24px;
  /*每3行有2个行间距，所以每个格子的宽高都要减去(24*2) / 3 */
  //grid-template-columns: repeat(4, calc(33.33% - 16px));
  //grid-template-rows: repeat(4, calc(33.33% - 16px));
  //grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-columns: repeat(auto-fit, 300px);
  grid-auto-rows: 300px;
  grid-gap: 24px; /* 设置元素之间的间距 */
  overflow-y: auto;
  position: relative;
}

.media-item {
  width: 292px;
  height: 292px;
  flex-shrink: 0;
  margin-bottom: 49px;
  border: 1px solid #ccc;
  border-radius: 16px 16px 16px 16px;
  overflow: hidden;
  position: relative;

  .img-box {
    width: 292px;
    height: 292px;
  }

  .checkB-border {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border: 2px solid #1482f0;
  }

  .check {
    position: absolute;
    top: 30px;
    right: 30px;
  }
}

.refresh-btn {
  position: absolute;
  top: 0;
  left: 0;
}
</style>
