<template>
  <transition
    name="dialog-fade"
    @after-enter="afterEnter"
    @after-leave="afterLeave"
  >
    <div v-show="visible" class="aegle-preview-wrapper">
      <div class="aegle-preview">
        <div class="aegle-preview-left">
          <div class="aegle-preview-top">
            <slot name="title">
              <span class="aegle-preview-title">{{ title }}</span>
            </slot>
          </div>
          <el-scrollbar tag="div" class="aegle-preview-bottom">
            <div
              class="filename-item"
              @click="changeIndex(item,index)"
              :class="{ active: currentUrl == index }"
              v-for="(item, index) in list"
              :key="index"
            >
              <i class="el-icon-tickets"></i><span>{{ item.label }}</span>
            </div>
          </el-scrollbar>
        </div>
        <div class="aegle-preview-right">
          <!-- <div style="width: 100%;height: 100%;">
            <iframe width="100%" height="100%" :src="laoclUrl"/>
          </div> -->
          <!-- 加载动画 -->
          <!-- <div v-show="showLoading" class="preview-loading">
            <el-progress :text-inside="true" :stroke-width="12" v-if="!isNaN(parseInt(percentage))" :percentage="percentage"></el-progress>
            <span>加载报告中...</span>
          </div> -->

          <!-- 加载失败显示 -->
          <!-- <div v-show="!showLoading && !isSuccessed" class="preview-loading-fail">
            <img src="@/assets/images/loadFail.png" alt="">
            <span>加载报告失败，请重试！</span>
            <div>
              <el-button
                class="cancel"
                size="small"
                plain
                @click="preview()"
                >取消</el-button
              >
              <el-button
                class="cancel"
                size="small"
                type="primary"
                @click="preview()"
                >重试</el-button
              >
            </div>
          </div> -->
          <!-- 预览区域 -->
          <div class="iframe-box" style="width:100%;height:100%">
            <div v-show="!fileType" style="display: flex;justify-content: center;align-items: center;height: 100vh;width: 100%;margin: 0;">
              <img style="max-width: 1000px;" :src="imgSrc"/>
            </div>
            <div style="width:100%;height: 100vh;">
              <iframe  width="100%" height="100%" :src="laoclUrl"/>
            </div>
          </div>
        </div>
        <div class="aegle-preview-button">
          <span class="close-icon" @click="handleClose">
            <i class="el-icon-close"></i>
          </span>
          <span class="aegle-preview-button-bottom">
            <template name='btnBottom'></template>
            <div><slot /></div>
          </span>
          
        </div>
      </div>
    </div>
  </transition>
</template>
<script>
import { httpproxyMethod } from 'aegle-sp-components/src/utils/index'
import { getNameType } from "aegle-sp-components/src/utils/index";
import pdf from "vue-pdf";
export default {
  name: "AeglePreview",
  props: {
    title: {
      type: String,
      default: "病例资料",
    },
    visible: {
      type: Boolean,
      default: false,
    },
    destroyOnClose: {
      type: Boolean,
      default: true,
    },
    list: {
      type: Array,
      default: [],
    },
    loading: {
      type: Boolean,
      default: false,
    }
  },
  components: { pdf },
  data() {
    return {
      closed: false,
      key: 0,
      currentUrl: "",
      imageUrl: [],
      numPages: 0,
      laoclUrl: "",
      imgSrc: "",
      showLoading: false,
      percentage: 0,
      timer: null,
      isSuccessed: true,
      fileType: true
    };
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.showLoading = true;
          this.percentage = 0
          this.$nextTick(() => {
            // this.$refs.myScrollbar.wrap.scrollTop = 0;
            document.body.appendChild(this.$el);
          });
          if(this.list.length){
            this.fileType = this.getFileType(this.list[0].url)
            if(this.fileType) {
              this.pdfToPng(this.list[0].url);
            } else {
              this.imgSrc = httpproxyMethod(this.list[0].url)
            }
          }
        } else {
          clearInterval(this.timer);
          this.showLoading = true;
          this.imgSrc = ''
          this.laoclUrl = ''
          this.currentUrl = ''
          this.isSuccessed = true
          if (this.destroyOnClose) {
            this.$nextTick(() => {
              this.key++;
            });
          }
        }
      },
      immediate: true
    },
  },
  mounted() {
    if (this.visible) {
      document.body.appendChild(this.$el);
    }
  },
  methods: {
    getFileType(d) {
      const type = getNameType(d)
      return ['pdf','PDF'].includes(type)
    },
    afterEnter() {
      this.$emit("opened");
    },
    afterLeave() {
      this.$emit("closed");
    },
    updatePopper() {
      this.broadcast("ElSelectDropdown", "updatePopper");
      this.broadcast("ElDropdownMenu", "updatePopper");
    },
    handleClose() {
      this.$emit("update:visible", false);
    },
    pdfToPng(url) {
      url = httpproxyMethod(url)
      if(!url) {
        this.showLoading = false;
        this.isSuccessed = true;
        this.percentage = 100
        return
      };
      this.laoclUrl = url
      this.loading = false;
      this.showLoading = false;
      this.isSuccessed = true
      // this.setTime()
      // this.$nextTick(async () => {
			// 	const loadTask = pdf.createLoadingTask(url);
      //   this.laoclUrl = loadTask;
      //   console.log(loadTask);
			// 	loadTask.promise.then((_pdf) => {
			// 		this.numPages = _pdf.numPages;
      //     this.loading = false;
      //     this.showLoading = false;
      //     this.isSuccessed = true
      //     console.log('解析完成');
			// 	});
			// });
    },
		changeIndex(d,index) {
      this.percentage = 0
      this.showLoading = true
      this.isSuccessed = false
			this.currentUrl = index;
      this.fileType = this.getFileType(d.url)
      if(!this.fileType) {
        this.showLoading = false
        this.isSuccessed = true
        this.imgSrc = httpproxyMethod(d.url)
        this.percentage = 100
        return;
      }
			this.pdfToPng(d.url)
		},
    setTime(type, flag = false) {
      clearInterval(this.timer);
      this.timer = setInterval(()=> {
          this.percentage = this.percentage + Math.round(Math.random()*10);
          console.log(this.percentage);
          if(this.percentage >= 80) clearInterval(this.timer);
        },500);
    }
  },
  destroyed() {
    if (this.$el && this.$el.parentNode) {
      this.$el.parentNode.removeChild(this.$el);
    }
  },
};
</script>
<style lang="less" scoped>
.aegle-preview-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  z-index: 999;
}
.aegle-preview {
  height: 100%;
  display: flex;

  &-left {
    flex: 0 0 200px;
    height: 100%;
    padding: 20px;

    .aegle-preview-top {
      height: 45px;
      font-size: 16px;
      font-family: PingFangSC, PingFangSC-Semibold;
      font-weight: 600;
      text-align: left;
      color: rgba(0, 0, 0, 0.85);
      line-height: 22px;
      padding-bottom: 20px;
    }
    .aegle-preview-bottom {
      height: calc(100% - 45px);
      /deep/ .el-scrollbar__wrap {
        overflow-x: hidden;
      }
    }
    .filename-item {
      display: flex;
      align-items: flex-start;
      color: rgba(0, 0, 0, 0.4);
      height: 30px;
      width: 160px;
      margin-bottom: 5px;
      cursor: pointer;
      i {
        font-size: 13px;
        padding-top: 2px;
      }
      span {
        padding-left: 4px;
        font-size: 12px;
        font-family: PingFangSC, PingFangSC-Semibold;
        font-weight: 600;
        text-align: left;
        line-height: 17px;
        letter-spacing: 0.18px;
        flex: 1;
        display: -webkit-box;
        word-break: break-all;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        // white-space: nowrap;
        overflow: hidden;
      }
      &.active span {
        color: #1890ff;
      }
    }
  }
  &-right {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    background-color: rgba(216, 216, 216, 0.3);
    /deep/ .el-scrollbar__wrap {
      overflow-x: hidden;
    }
    .iframe-box {
      width: 100%;
      height: 100%;
    }
  }
  &-button {
    width: 85px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px 0;
    > span {
      position: absolute;
      right: 22px;
      top: 20px;
      font-size: 32px;
      cursor: pointer;
      z-index: 1000;
      color: rgba(0, 0, 0, 0.6);
      &:hover {
        color: #1890ff;
      }
    }
  }
  .aegle-preview-button-bottom {
    position: absolute;
    top: auto;
    bottom: 32px;
  }
      .preview-loading {
      height: 100%;
      width: 100%;
      // display: flex;
      /deep/ .el-progress{
        position: relative;
        top: 50%;
        left: 50%;
        margin-top: -32px;
        margin-left: -80px;
        width: 160px;
        .el-progress-bar__outer {
          background-color: rgba(0,0,0,0.06);
        }
        .el-progress-bar__innerText {
          display: none;
        }
      }
      span {
        width: 100%;
        // height: 20px;
        font-size: 14px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        color: rgba(0,0,0,0.40);
        line-height: 20px;
        display: inline-block;
        text-align: center;
        position: relative;
        left: 0;
        top: 50%;
        margin-top: 20px;
      }
    }
  .preview-loading-fail {
      position: absolute;
      top: 50%;
      left: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      span {
        margin: 10px 0 20px 0;
      }
      img {
        width: 80px;
        height: 80px;
      }

  }
}
</style>