<template>
  <el-dialog title="游戏链接下载" :visible.sync="show" width="600px" :before-close="close">
    <div class="link-tip">
      <i class="el-icon-info"></i>
      使用“小程序链接”，非会员进入游戏页面将提示进行认证注册成为会员，认证成功后自动返回游戏页面，建议采用小程序链接
    </div>
    <div class="link-title">
      <i class="icon iconfont icon-xiaochengxu4" style="color:#6457AD"></i>
      小程序链接
    </div>
    <div v-loading="loading" class="links-block">
      <div class="links__body">
        <div class="links__body--url">{{ miniprogram.link }}</div>
        <div class="links__body--btn">
          <el-button v-clipboard:text="miniprogram.link" type="text" icon="iconfont icon-lianjie fz14"> 复制链接</el-button>
        </div>
      </div>
      <div class="link__divider"></div>
      <div class="links__qr">
        <!-- <vue-qr id="qrWrap" :text="qcText" :size="102" :margin="0" :logoMargin="10"></vue-qr> -->
        <div style="text-align:center">
          <el-image style="width:102px;height:102px;border:4px solid #fff;cursor: pointer;" lazy :src="miniprogram.url" @click.native="onView(false)">
            <!-- <img slot="placeholder" style="width:102px;height:102px" src="@/assets/img/loaderror.png" /> -->
            <div slot="placeholder" style="display:flex;align-items:center;justify-content:center;width:100%;height:100%;">
              <i class="el-icon-picture-outline" style="font-size:30px"></i>
            </div>
          </el-image>
        </div>
        <el-button class="links__qr--btn" type="text" icon="iconfont icon-icon_yunxiazai fz14 mr4" @click="downloadMiniporgramImg">小程序二维码下载</el-button>
      </div>
    </div>
    <div class="link-title">
      <i class="icon iconfont icon-fuwuhao2" style="color:#2CBB64"></i>
      H5链接
    </div>
    <div class="links-block" style="margin-bottom:25px">
      <div class="links__body">
        <div class="links__body--url">{{ obj.gameUrl }}</div>
        <div class="links__body--btn">
          <el-button v-clipboard:text="obj.gameUrl" type="text" icon="iconfont icon-lianjie fz14"> 复制链接</el-button>
        </div>
      </div>
      <div class="link__divider"></div>
      <div class="links__qr">
        <vue-qr id="qrWrap" :text="qcText" :size="510" :logoScale="5" :margin="0" :logoMargin="10" @click.native="onView(true)"></vue-qr>
        <el-button class="links__qr--btn" type="text" icon="iconfont icon-icon_yunxiazai fz14 mr4" @click="downloadImg">服务号二维码下载</el-button>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import VueQr from 'vue-qr';
import { formatDateTimeByType, downloadFile } from '@/utils/index.js';
import { generateMiniProgramLink } from '@/service/api/gameApi.js';
import { api as viewerApi } from 'v-viewer';
import 'viewerjs/dist/viewer.css';
export default {
  name: 'links',
  components: {
    VueQr
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    obj: {
      type: Object,
      default() {
        return {};
      }
    },
    gameTypeName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      loading: false,
      qcText: '',
      miniprogram: {
        link: '',
        url: ''
      }
    };
  },
  watch: {
    show(val) {
      if (val) {
        this.miniprogram = {
          link: '',
          url: ''
        };
        this.createQrImg();
        this.generateMiniProgramLink();
      }
    }
  },
  methods: {
    createQrImg() {
      this.qcText = this.obj.gameUrl || '';
    },
    generateMiniProgramLink() {
      this.loading = true;
      let gameType = '';
      switch (this.gameTypeName) {
        case '大转盘':
          gameType = 'GAME_LINK_DZP';
          break;
        case '刮刮卡':
          gameType = 'GAME_LINK_GGK';
          break;
        case '拼图游戏':
          gameType = 'GAME_LINK_PTYX';
          break;
        case '找你马':
          gameType = 'GAME_LINK_ZNM';
          break;
        case '口令福利':
          gameType = 'GAME_LINK_KLFL';
          break;
      }
      generateMiniProgramLink({
        id: this.obj.gameId || this.obj.gameActivityId,
        linkId: gameType
      }).then(res => {
        this.miniprogram = res.result;
        this.loading = false;
      });
    },
    close() {
      this.$emit('update:show', false);
    },
    downloadImg() {
      const qrWrap = document.getElementById('qrWrap');
      const qrImg = qrWrap && qrWrap.childNodes[0].src;
      downloadFile(this.gameTypeName + '-' + this.obj.gameName + '-服务号-' + formatDateTimeByType(this.obj.gameStartTime, 'yyyy-MM-dd-HH-mm-ss') || '游戏链接', qrImg);
    },
    onView(isH5) {
      let qrImg = '';
      if (isH5) {
        const qrWrap = document.getElementById('qrWrap');
        qrImg = qrWrap && qrWrap.childNodes[0].src;
      } else {
        qrImg = this.miniprogram.url + '?imageMogr2/thumbnail/500x500';
      }
      viewerApi({
        images: [qrImg],
        options: {
          toolbar: false,
          navbar: false,
          title: false,
          zIndex: 9999
        }
      });
    },
    downloadMiniporgramImg() {
      const downloadFile = (fileName, content) => {
        const url = content;
        const x = new XMLHttpRequest();
        x.open('GET', url, true);
        x.responseType = 'blob';
        x.onload = function(e) {
          const blob = new Blob([x.response], { type: 'image/png' });
          let url = window.URL.createObjectURL(blob);
          let a = document.createElement('a');
          a.href = url;
          a.download = fileName;
          a.click();
        };
        x.send();
      };
      downloadFile(this.gameTypeName + '-' + this.obj.gameName + '-小程序-' + formatDateTimeByType(this.obj.gameStartTime, 'yyyy-MM-dd-HH-mm-ss') || '游戏链接', this.miniprogram.url);
    }
  }
};
</script>
<style lang="scss" scoped>
.links__body {
  // border: 1px solid #ddd;
  flex: 1;
  &--url {
    height: 138px;
    overflow-x: hidden;
    overflow-y: auto;
    word-break: break-all;
    padding: 13px 22px 0 16px;
    line-height: 17px;
    font-size: 12px;
  }
  &--btn {
    text-align: center;
    line-height: 1;
  }
}
.links__qr {
  padding: 22px 30px 10px 24px;
  text-align: center;
  &--btn {
    margin: 18px 0 0;
  }
}
.link__divider {
  margin-top: 19px;
  height: 130px;
  width: 1px;
  background-color: #ebecf0;
}
.links-block {
  display: flex;
  background: #f5f7fa;
  margin: 10px 0 10px;
}
.link-title {
  display: flex;
  align-items: center;
  font-weight: 500;
  color: #303133;
  line-height: 20px;
  margin-top: 20px;
  i {
    font-size: 20px;
    margin-right: 8px;
  }
}
.link-tip {
  width: 544px;
  background: #e6f7ff;
  border-radius: 4px;
  border: 1px solid #91d5ff;
  font-size: 13px;
  color: #606266;
  line-height: 1.2;
  padding: 10px 0;
  margin-bottom: 10px;
  display: flex;
  .el-icon-info {
    line-height: 18px;
    margin-left: 16px;
    margin-right: 4px;
    color: #1890ff;
    font-size: 12px;
  }
}
#qrWrap {
  /deep/ img {
    border: 4px solid #fff;
    width: 102px;
    height: 102px;
    cursor: pointer;
  }
}
</style>

<style lang="scss">
.mr4 {
  margin-right: 4px;
}
</style>
