<template>
  <div class="source-command">
    <div class="box">
      <div class="content">{{ content }}</div>
      <div class="btn" id="copySourceCommand" @click="_copy">
        一键复制
      </div>
      <div class="close" @click="_close"></div>
    </div>
  </div>
</template>
<script>
import Clipboard from 'clipboard';
export default {
  name: 'shop-source-command',
  props: {
    value: {},
    content: {}
  },
  data() {
    return {};
  },
  computed: {
    isShow: {
      get() {
        return this.value;
      },
      set(nVal) {
        this.$emit('input', nVal);
      }
    }
  },
  methods: {
    _close() {
      this.isShow = false;
    },
    _copy() {
      const self = this;
      const clipboardObj = new Clipboard('#copySourceCommand', {
        text: () => {
          return this.content;
        }
      });
      clipboardObj.on('success', function(e) {
        clipboardObj.destroy();
        self._close();
        self.$layer.msg('复制成功');
      });
      clipboardObj.on('error', function() {
        clipboardObj.destroy();
        self.$layer.msg('复制失败');
      });
    }
  }
};
</script>

<style lang="less" scoped>
.source-command {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  .box {
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 0.28rem 0.28rem 0.16rem;
    background: #fff;
    width: 2.8rem;
    border-radius: 0.04rem;
    transform: translate(-50%, -50%);
    .content {
      margin-bottom: 0.2rem;
      line-height: 0.2rem;
      color: #919191;
      font-size: 0.14rem;
    }
    .btn {
      margin: auto;
      width: 2.04rem;
      height: 0.36rem;
      line-height: 0.36rem;
      text-align: center;
      border-radius: 0.36rem;
      font-size: 0.14rem;
      color: #fff;
      background: #409eff;
    }
    .close {
      position: absolute;
      right: 0;
      top: -0.4rem;
      width: 0.32rem;
      height: 0.32rem;
      background: url(./img/icon-close.png) no-repeat center center;
      background-size: 100% 100%;
    }
  }
}
</style>
