<template>
  <window-size>
    <div class="img-wrapper">
      <van-image
          width="100%"
          :src="imageSrc"
          fit="cover"
          class="img-rotate"
      />
    </div>
  </window-size>
</template>

<script setup>
import {useStore} from "vuex";
import {onMounted, ref} from "vue";
import router from "@/router";
import {fetchInspectionReportImage} from "@/utils/request";

const store = useStore()
const electroIndex = store.getters.getCurrentElectroIndex
const imageSrc = ref(null)

onMounted(() => {
  fetchInspectionReportImage({
    patientId: router.currentRoute.value.params.patientId,
    reportId: electroIndex.reqNo,
    reportUrl: electroIndex.reportUrl
  }).then(response => {
    imageSrc.value = response
  })
})
</script>

<style scoped>
.img-wrapper {
  width: 100vw;
  height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.img-rotate {
  transform: rotate(90deg);
  transform-origin: center center;
}
</style>