<template>
  <div>
    <el-dialog :visible.sync="isShow" :title="'分享表单：' + formdata.name" @open="dialogOpen" append-to-body class="customform-share-dialog">
      <el-row :gutter="15" v-loading="dataLoading">
        <el-col :span="16">
          <div class="share-item-box">
            <h3 class="share-item__title">链接分享</h3>
            <div class="share-item__content">
              <el-input size="large" :readonly='true' v-model="formdata.URL">
                <el-popover
                  placement="top"
                  width="60"
                  trigger="manual"
                  content="复制成功"
                  v-model="copyTipsVisible"
                  slot="append"
                >
                  <el-button slot="reference" ref="copyURLBtn" :data-clipboard-text="formdata.URL"><i class="fa fa-copy"></i> 复制</el-button>
                </el-popover>
              </el-input>
            </div>
          </div>
          <div class="share-item-box">
            <h3 class="share-item__title">社交媒体分享</h3>
            <div class="share-item__content">
              <div class="social-share-list"></div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="share-item-box">
            <h3 class="share-item__title">二维码分享</h3>
            <div class="share-item__content">
              <div class="form-share-qrcode"></div>
            </div>
          </div>

        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShow = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import util from '@src/common/util.js'
export default {
  props: {
    show: {
      type: Boolean
    },
    formdata: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      dataLoading: true,
      copyTipsVisible: false
    }
  },
  computed: {
    isShow: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', val)
      }
    }
  },
  async mounted() {

  },
  methods: {
    async dialogOpen() {
      if (typeof ClipboardJS !== 'function') {
        await util.loadCSS('lib/social-share/css/share.min.css')
        await util.loadJS('lib/social-share/js/jquery.share.min.js')
        await util.loadJS('lib/clipboard.min.js')
      } else {

      }
      let shareConfig = {
        url: this.formdata.URL,
        source: 'ZCMS',
        title: this.formdata.name,
        description: '我刚刚通过#ZCMS#制作了一份表单“' + this.formdata.name + '”，麻烦你抽空填写一下，多谢啦。',
        image: 'http://miit.ccidnet.com/col/attachment/2012/8/2364575.jpg', // TODO:暂且固定用公司LOGOO
        disabled: ['google', 'facebook', 'twitter', 'tencent', 'linkedin', 'diandian'],
        wechatQrcodeTitle: '微信扫一扫：分享',
        wechatQrcodeHelper: ''
      }
      $('.social-share-list').share(shareConfig)
      let $qrcode = $('.form-share-qrcode')
      $qrcode.empty().qrcode({render: 'image', size: 150, text: shareConfig.url})
      let copyBtn = this.$refs['copyURLBtn'].$el
      var clipboard = new window.ClipboardJS(copyBtn)
      clipboard.on('success', (e) => {
        this.copyTipsVisible = true
        setTimeout(() => {
          this.copyTipsVisible = false
        }, 1000)
      })
      this.dataLoading = false
    },
    confirm() {
      this.isShow = false
    }

  }

}
</script>

<style scoped>
  .share-item-box {
    padding: 10px;
  }
  .share-item__title {
    font-size: 18px;
    font-weight: normal;
    line-height: 42px;
    border-bottom: solid 1px #eee;
  }
  .share-item__content {
    padding: 10px
  }
</style>
