<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-11-15 10:10:08
 * @LastEditors: 无尘
 * @LastEditTime: 2019-12-04 19:25:52
 -->

<template>
  <div class="create-completion common-wrap">
    <nav-crumb :navpath="navpath"></nav-crumb>
    <div class="right-content border-box">
      <div class="right-box border-box">
        <div class="create-completion-icon text-center">
          <img
            src="../../assets/images/ok.png"
            alt=""
          >
        </div>
        <div class="create-completion-text font-16 color-606266 text-center">活动创建成功！</div>
        <div class="create-completion-btn text-center">
          <el-button
            class="copy-tag"
            @click="copyPath"
          >复制活动路径</el-button>
          <el-button
            type="primary"
            @click="toActiveList"
          >返回活动列表</el-button>
        </div>
      </div>
    </div>
    <vue-gic-footer></vue-gic-footer>
  </div>
</template>
<script>
import navCrumb from '@/components/nav/nav.vue';
import Clipboard from 'clipboard';
import showMsg from '@/common/js/showmsg';
export default {
  name: 'createCompletion',
  components: {
    navCrumb,
  },
  data() {
    return {
      // 面包屑参数
      navpath: [
        {
          name: '分享有礼',
          path: `/shareIndex`,
          /*relocation: true */
        },
        {
          name: '新建活动',
          /*relocation: true */
        },
      ],
      activityUrl: ''
    }
  },
  methods: {
    copyPath() {
      const that = this;
      let clipboard = new Clipboard('.copy-tag', {
        text: function() {
          return `${that.activityUrl}` || '您复制的数据是空的！';
        }
      });
      clipboard.on('success', e => {
        showMsg.showmsg('复制成功!', 'success');
        // 释放内存
        clipboard.destroy();
      });
      clipboard.on('error', e => {
        // 不支持复制
        showMsg.showmsg('该浏览器不支持复制!', 'warning');
        // 释放内存
        clipboard.destroy();
      });
    },
    toActiveList() {
      this.$router.push(`/shareIndex`);
    }
  },
  mounted() {
    this.activityUrl = this.$route.query.url;
  },
}
</script>
<style lang="less" scoped>
.create-completion {
  width: 100%;
  .create-completion-icon {
    padding-top: 159px;
    img {
      width: 100px;
      height: 88px;
    }
  }
  .create-completion-text {
    margin-top: 18px;
  }
  .create-completion-btn {
    margin-top: 45px;
  }
}
</style>
