<template>
  <div class="espoViewStyle">
    <div class="header">
      <!-- <div class="imgView">
        <el-image class="img" :src="getImgurl(srcList[selectImgIndex]?.imgUrl)" :initial-index="selectImgIndex"
          :preview-src-list="showSrcList" fit="cover" />
      </div> -->
      <div class="imgView">
        <el-scrollbar ref="scrollbarRef" class="pdmView">
          <!-- <PDFView :need-to-show-pdf="true" :show-pdf-number="3" :is-link="true"
            pdf-source="http://192.168.101.4:9000/jgfile/2024/04/20/%E7%AC%AC08%E7%AB%A0_%E8%81%9A%E5%90%88%E5%87%BD%E6%95%B0.pdf" /> -->
          <PDFView
            :need-to-show-pdf="true"
            :pageNumber="srcList[selectImgIndex]?.showAppointPageNum"
            :is-link="true"
            :pdf-source="baseUrl + srcList[selectImgIndex]?.filePath"
          />
          <Empty v-if="srcList.length < 1" />
        </el-scrollbar>
      </div>
      <!-- <div class="textBox">
        <el-scrollbar :max-height="scrollbarHeight">
          <div class="title">{{ srcList[selectImgIndex]?.title }}</div>
          <div class="describe">
            {{ srcList[selectImgIndex]?.content }}
          </div>
        </el-scrollbar>
      </div> -->
    </div>

    <div class="footer">
      <el-scrollbar>
        <div class="scrollbar-flex-content">
          <div
            :class="
              selectImgIndex == index
                ? 'scrollbar-demo-item '
                : 'scrollbar-demo-item unScrollbarItemBorder'
            "
            v-for="(item, index) in srcList"
            @click="setImgIndex(index)"
          >
            <span>{{ item.title }}</span>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { esopData } from "@/api/prosteps/espo";
import { useProcessStore } from "@/store";
import PDFView from "@/components/PDFView/index.vue";
const store = useProcessStore();
const baseUrl = import.meta.env.VITE_APP_UPLOAD_URL;
defineOptions({
  name: "Esop",
});
//配置当前div高度
const scrollbarHeight = ref(0);
const scrollbarRef = ref(null);
//选取的图片索引
const selectImgIndex = ref(0);
const setImgIndex = (index: number) => {
  selectImgIndex.value = index;
  toTop();
};
const setScrollbarHeight = () => {
  const viewportHeight = window.innerHeight;
  scrollbarHeight.value = viewportHeight - 300;
};
const srcList = ref([]);
const getPdfListData = async () => {
  const { data } = await esopData({
    operationId: store.odersData.operationId,
    pageNo: 1,
    pageSize: 999,
  });
  srcList.value = data.records;
};
const toTop = () => {
  scrollbarRef.value!.setScrollTop(0);
};
onMounted(async () => {
  setScrollbarHeight();
  await getPdfListData();
});
</script>

<style lang="scss" scoped>
.espoViewStyle {
  display: flex;
  max-height: calc(100vh - 234px);
  width: calc(100vw / 6 * 5 - 50px);
  flex-direction: column;
}

.header {
  flex: 1;
  display: flex;
  position: relative;

  .imgView {
    flex: 1;
    height: calc(100vh - 368px);
    @include flex;
    justify-content: center;
    padding: $p10 0;

    .pdmView {
      width: 100%;
      padding: $p20;
    }

    .img {
      height: 100%;
      border: 0px solid;
    }
  }

  .textBox {
    width: 30%;
    min-width: 250px;
    padding: $p5 $p20;
    right: 0;

    .title {
      font-size: $f24;
      font-weight: $Medium;
      width: 100%;
    }

    .describe {
      font-size: $f20;
      color: $font-default-60;
    }
  }
}

.footer {
  height: 20%;
  min-height: 110px;
  padding: 0 $p10;

  .scrollbar-flex-content {
    display: flex;

    .scrollbar-demo-item {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 110px;
      height: 110px;
      margin-right: 10px;
      @include flex;
      border: 2px solid #0a59f7;
      border-radius: 16px;
      box-sizing: border-box;
      color: #0a59f7;

      span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 5px;
      }

      .bottomImgBox {
        width: 90px;
        height: 90px;
        border-radius: 16px;
        background-color: white;
        @include flex;
      }
    }

    .unScrollbarItemBorder {
      border: 2px solid black;
      color: black;
      background-color: transparent;
    }
  }
}
</style>
