<template>
  <com-dialog
    title="分享"
    :show="show"
    hideFloor
    @update:show="val => $emit('update:show', val)">

    <div class="share-layer">

      <div class="code">
        <div class="share-code">
          <img :src="codeImg + '?m=' + Date.now()" class="code" />
          <img :src="_logo" class="logo" v-if="_logo">
        </div>
        <div class="share-upload" v-if="setLogo === '' || setLogo">
          <span class="makre">LOGO</span>
          <el-button type="primary" class="file-upload">
            <label for="file-upload">自定义上传</label>
          </el-button>
          <input type="file" id="file-upload" @change="fileChange">
          <span class="size">120*120px，jpg/png格式，不超过1M</span>
        </div>
      </div>

      <div class="copy">
        <label>分享链接：</label>
        <el-input placeholder="输入链接" v-model="_link" />
        <el-button type="primary" class="btn" @click="copyLink">复制</el-button>
      </div>

    </div>
  </com-dialog>
</template>

<script>
import comDialog from "@/components/dialog";
import {ref} from 'vue'
import { copyText } from '@/util'
import { getApp } from '@/app'

export default {
  props: ['show', 'link', 'logo', 'setLogo', 'codeImg'],
  setup(props, context) {
    const _link = ref(props.link)
    const _logo = ref(props.logo)

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

      if (file.type !== 'image/png' && file.type !== 'image/jpeg') return getApp().$message.error('请上传jpg/png格式', '提示')
      if (file.size / 1024 / 1024 > 1)  return getApp().$message.error('请上传1M以内的图片', '提示')
      
      let render = new FileReader()

      render.onload = ev => {
        _logo.value = ev.target.result
      }

      render.readAsDataURL(file)
      context.emit('changeLogo', file)
    }
    return { _link, fileChange, _logo }
  },
  methods: {
    copyLink() {
      copyText(this._link)
      this.$message('链接复制成功');
    }
  },
  components: {
    "com-dialog": comDialog
  }  
}
</script>

<style lang="scss" scoped>
.share-layer {
  margin: 0 68px;
}

.code {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;

  .share-code {
    width: 160px;
    height: 160px;
    position: relative;

    .code {
      width: 100%;
      height: 100%;
    }

    .logo {
      width: 40px;
      height: 40px;
      position: absolute;
      z-index: 1;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }

  .share-upload {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    font-size: 0.825rem;
    margin-left: 8px;
  }

  .makre {
    margin-bottom: 12px;
  }

  .size {
    margin-top: 8px;
    color: #909399;
  }

  .file-upload {
    padding: 0;
    max-width: 120px;

    label {
      display: inline-block;
      padding: 12px 20px;
    }
  }

  input[type='file'] {
    display: none;
  }
}

.copy {
  padding: 0 80px 0 70px;
  position: relative;

  label,
  .btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  label {
    left: 0;
    font-size: 0.825rem;
  }

  .btn {
    right: 0;
  }
}
</style>
