<template>
  <div class="share-layer">
    <div class="share-code" v-if="z_logo">
      <img class="logo" :src="z_logo" alt="" />
      <i class="el-icon-close" @click="$emit('close')"></i>
    </div>
    <div class="share-upload" v-else>
      <i class="el-icon-plus"></i>

      <label for="file-upload"></label>
      <input accept="image/png,image/jpeg" ref="upload" type="file" id="file-upload" @change="fileChange" />
    </div>
    <span class="size">支持png/jpg圖片格式，大小不超過1MB</span>

  </div>
</template>

<script>
import { computed } from "vue";
import { getApp } from "@/app";

export default {
  props: ["link", "logo", ],
  setup(props, context) {

    const fileChange = (ev) => {
      let file = ev.target.files[0];

      if (file.type !== "image/png" && file.type !== "image/jpeg") return getApp().$alert("請上傳jpg/png格式", "提示");
      if (file.size / 1024 / 1024 > 1) return getApp().$alert("請上傳1MB以內的圖片", "提示");

      let render = new FileReader();

      render.onload = (ev) => {
        z_logo.value = ev.target.result;
      };

      render.readAsDataURL(file);
      context.emit("changeLogo", file);
    };
    const z_logo = computed(() => props.logo )
    return {  fileChange, z_logo };
  }
};
</script>

<style lang="scss" scoped>
.share-layer {
  margin: 0;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  display: inline-block;
  width: 160px;
  height: 160px;
  .share-code {
    width: 100%;
    height: 100%;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    .logo {
      height: 100%;
      position: absolute;
      z-index: 1;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .el-icon-close {
      position: absolute;
      z-index: 33;
      top: 10px;
      right: 10px;
      background: var(--primaryColor);
      border-radius: 50%;
      color: #fff;
      display: none;
    }
    &:hover {
      .el-icon-close {
        display: inline-block;
      }
    }
  }

  .share-upload {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;

    .el-icon-plus {
      pointer-events: none;
      font-size: 32px;
      position: absolute;
      z-index: 1;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }

  label {
    display: inline-block;
    width: 100%;
    height: 100%;
    cursor: pointer;
  }

  input[type="file"] {
    display: none;
  }
 .size {
  font-size: 14px;
  display: inline-block;
  line-height: 2;
  margin-top: 10px;
}
}
</style>
