<template>
  <transition
    name="dialog-fade"
    @after-enter="afterEnter"
    @after-leave="afterLeave"
  >
		<div :key="key" 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(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">
					<el-scrollbar tag="div" style="height: 100%" ref="myScrollbar">
						<div
              style="
                display: flex;
                align-items: center;
                padding-top: 25px;
								min-height:100vh;
								justify-content: center;
              "
            >
							<img style="max-width:1000px" :src="showUrl"/>
						</div>
					</el-scrollbar>
				</div>
				<div class="aegle-preview-button">
          <span class="close-icon" @click="handleClose">
            <i class="el-icon-close"></i>
          </span>
        </div>
			</div>
		</div>
  </transition>
</template>
<script>
import { httpproxyMethod } from 'aegle-sp-components/src/utils/index'
export default {
	name: 'AegleImgView',
	props: {
		title: {
      type: String,
      default: "病例资料",
    },
		visible: {
      type: Boolean,
      default: false,
    },
    destroyOnClose: {
      type: Boolean,
      default: true,
    },
    list: {
      type: Array,
      default: [],
    },
	},
	data() {
		return {
			closed: false,
      key: 0,
			currentUrl: '',
			laoclUrl: '',
      showUrl: ''
		}
	},
	watch: {
    visible(val) {
      if (val) {
        this.$nextTick(() => {
          this.$refs.myScrollbar.wrap.scrollTop = 0;
        });
        document.body.appendChild(this.$el);
        if (this.list.length) {
          this.currentUrl = 0;
        }
      } else {
        if (this.destroyOnClose) {
          this.$nextTick(() => {
            this.key++;
          });
        }
      }
    },
    currentUrl(v) {
      if (v !== null && v !== undefined) {
        this.$refs.myScrollbar.wrap.scrollTop = 0;
        // this.pdfToPng(this.list[v].url);
      }
    },
  },
  computed: {
    showUrl() {
      let url = this.list[this.currentUrl] ? this.list[this.currentUrl].url : '';
      return url ? httpproxyMethod(url) : ''
    }
  },
  methods: {
    afterEnter() {
    	this.$emit("opened");
    },
    afterLeave() {
  		this.$emit("closed");
    },
		updatePopper() {
      this.broadcast("ElSelectDropdown", "updatePopper");
      this.broadcast("ElDropdownMenu", "updatePopper");
    },
		handleClose() {
      this.$emit("update:visible", false);
    },
		changeIndex(index) {
			this.currentUrl = index;
			this.pdfToPng(this.list[index].url)
		},
		
  },
	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;
			min-height: 100%;
			.el-scrollbar__view {
				min-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;
      }
    }
		>div {
			flex: 1;
		}
  }
}
</style>