<template>
  <div class="u-common-wrap">
    <div class="u-common-info">
      <div class="file-info-icon">
        <img :src="previewData.fileIcon" alt="" />
        <p>
          {{ previewData.fileName || "" }}
          <span>（仅供在线预览，为了更好地查看文档，建议下载本地查看）</span>
        </p>
      </div>
    </div>
    <slot></slot>
    <div class="u-download" @click.stop="handleDownload" title="下载">
      <img
        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAadJREFUaEPtmu1NAzEMhu1N6CYwCWxSmIQyCd2kZZIgS5cjOiXxRxyFSu7f+uz3sd04yRXhwT/44PphGkBK6QYAT1uC7oh4mpGsAGhlNSog7LdooWghYau0zKKFooWihQYz8K9bKKVEe5lnRLxoOUcnsTR2cxXaHHwSAAB8IOK7BmIE4BgbAC6IeK/FrwIcHOTnVBBWAG3sXgUo+28HajGEBaAhniS8IOJVXIFsmFIyQ2gBLOJJJzuJrRAaAKt4EQAZWSCkACPixQAWCAnAqHgVgBaCA/AQrwbQQPQAvMSbAKQQLQBP8WYACUQNwFv8EAAHcQSgYQQAeWtSzqTmkJJsXdg5wDlpLbEA8FpcbJEbmqS0r3ITP1wBZmJz7EOZz86HK2CEcBHvVgElhJt4d4DODzszuoqfAtCBcBc/DaACMUX8VIAC4qt1GOGWKcn3bquQJNgMmwCYkVWNz6iAJlszbKMCM7Kq8blXYDtsnDUPL7L9Ka8aS4Dvyn59kUY27BUR6YD0d7F1OEGxHhYb7G/+ywrQPSi1UP57wGKN3fD73ipWodVl+gVurTpALWWFOAAAAABJRU5ErkJggg=="
        alt="download"
      />
    </div>
    <div class="u-close" @click.stop="handleClose" title="关闭">
      <img
        class="u-close-icon"
        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAaNJREFUaEPtmO1NxDAMhv1ucmxybAKTAJNwm8Amd5sYWWpRqdJ8+XVKpebvJfXzxMnJDuTgAwfnl1Ng7wyeGfjXGVDVi4hcAdxGg9bGzh4hVdUJ/AHgaZSEqr6IyOcU7wbgdSv2psC0A/fFwiESK3gL3ydgK1X1XUTeRkkk4L8BPOcyX/wXGiWhqlcR+VrAFuFtblFgRCZ64asFIiU88E0CERJe+GYBpgQDvkuAIcGC7xbwSDDhXQI9Emx4t0CLRAQ8RaBGIgqeJpCTiISnCmxJiIiV5POoKg9ytc/6t6pSouWDidopDJ6egZlUVa2Wt5r+dwCgb1aIQOLMzxIh/QR1VxLwj9UdoEvQBFLw1oZG9xMUgS34xZ0I6+zcAiX4aAmXQC18pES3QCt8lESXQC98hESzgBeeLdEkwIJnSlQLsOFZElUCUfAMiaJANLxXovQ6vX7uo9cyy4q1p+woCczP6xYnFD6TiQ8AVookR+3z+hD4DQnX87o1JZfcDrR0ay1zp6f2YuziJW4JusfcU2CPXf/Ta+8N4I1/HiHvDnrXHz4DP7qNQkA6gfpgAAAAAElFTkSuQmCC"
        alt="close"
      />
    </div>

    <Loading v-show="isDownloading" text="下载资源请求中..." />
  </div>
</template>

<script>
import common from "@/mixins/common";
import Loading from "@/directive/Loading.vue";
import { EventBus } from "@/utils/eventBus";

export default {
  name: "common-wrap",
  mixins: [common],
  components: {
    Loading,
  },
  methods: {
    /**
     * 关闭弹窗
     */
    handleClose() {
      console.log("filePreview Close");
      // this.$emit('close');
      EventBus.$emit("close");
    },
  },
};
</script>

<style lang="scss" scoped>
.u-common-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1000;
  .u-common-info {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 56px;
    background-color: rgb(50, 54, 57);
    z-index: 1001;
    .file-info-icon {
      height: 56px;
      position: relative;
      padding-left: 20px;
      display: flex;
      align-items: center;
      img {
        width: 20px;
        height: 20px;
      }
      p {
        margin-left: 10px;
        font-size: 16px;
        line-height: 56px;
        color: rgb(241, 241, 241);
        span {
          font-size: 12px;
        }
      }
    }
  }

  .u-download {
    position: absolute;
    top: 0;
    right: 40px;
    width: 40px;
    height: 56px;
    background-color: rgb(50, 54, 57);
    border-radius: 0 0 0 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1002;
    img {
      width: 16px;
      height: 16px;
    }
  }

  .u-close {
    position: absolute;
    top: 0;
    right: 0;
    width: 56px;
    height: 56px;
    background-color: rgb(50, 54, 57);
    border-radius: 0 0 0 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1002;
  }
  .u-close-icon {
    position: relative;
    left: 5px;
    width: 17px;
    height: 17px;
  }
}
</style>
