<template>
  <el-scrollbar style="width: 100%; height: 100%">
    <div class="media-container">
      <CameraUpload
        @reset-select="clickReset"
        @upload-finish="finish"
        @delete-all="clickDeleteAll"
        @camera-ohos="camera_ohos"
        @select-ohos="select_ohos"
      />
      <div
        v-for="(item, index) in medias.filter((item: any) => item.filePath)"
        :key="index"
        class="media-item"
        @click="item.isSelected = !item.isSelected"
      >
        <!--        <img :src="getImgurl(item)" alt="" class="img-box" object-fit="cover" />-->
        <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 class="checkB-border"></div>
        <i-ep-delete
          v-show="item.isSelected"
          class="check"
          color="#ff4d4f"
          size="20px"
        />
      </div>
    </div>
  </el-scrollbar>
</template>

<script lang="ts" setup>
import { useProcessStore } from "@/store";
import { addMedia, deleteMedias, pageMedias } 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",
});

const input = ref("");

const finish = (value: string) => {
  addMedia({
    filePath: value,
    operationMediaId: proStore.odersData.operationId,
    processId: proStore.scanInfo.id,
    seqNo: proStore.scanInfo.seqNo,
  }).then((res) => {
    getListData();
    ElMessage.success("上传成功");
  });
};

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

const getListData = () => {
  pageMedias(
    proStore.odersData.operationId,
    proStore.scanInfo.id,
    proStore.scanInfo.seqNo
  ).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 = () => {
  // medias.value.forEach((item: any) => {
  //   item.isSelected = false;
  // });
  getListData();
};

const clickDeleteAll = () => {
  let ids = medias.value
    .filter((item: any) => item.isSelected)
    .map((item: any) => item.id);

  ids &&
    ids.length > 0 &&
    deleteMedias(ids).then(() => {
      getListData();
    });
};

const select_ohos = () => {
  let p = {
    token: localStorage.getItem("token"),

    operationMediaId: proStore.odersData.operationId,
    processId: proStore.scanInfo.id,
    seqNo: proStore.scanInfo.seqNo,
    methodName: "selectFile",
    apiUrlPath: "/api/v1/process/media/add", //上传完成后调的接口 不包含baseurl
    method: "post",
  };

  if (window.openHarmonyBridge && window.openHarmonyBridge.selectFile) {
    window.openHarmonyBridge.selectFile(JSON.stringify(p));
  }
};

const camera_ohos = () => {
  let p = {
    token: localStorage.getItem("token"),
    operationMediaId: proStore.odersData.operationId,
    processId: proStore.scanInfo.id,
    seqNo: proStore.scanInfo.seqNo,
    apiUrlPath: "/api/v1/process/media/add", //上传完成后调的接口 不包含baseurl
    method: "post",
    methodName: "startCamera",
  };
  if (window.openHarmonyBridge && window.openHarmonyBridge.startCamera) {
    window.openHarmonyBridge.startCamera(JSON.stringify(p));
  }
};
</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;
}

.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;
  }
}
</style>
