<template>
  <div class="social-share" data-initialized="true" style="display: contents;">
    <a href="#" class="social-share-icon icon-wechat" >
      <img src="../assets/image/case2/微信icon.png" class="share" alt />
    </a>
    <a href="#" class="social-share-icon icon-weibo">
      <img src="../assets/image/case2/微博icon.png" class="share" alt />
    </a>
  </div>
</template>

<script>
export default {
  name: 'Share',
  props: [
    'config',
  ],
  data () {
    return {
      defautlOpt: {
        url: '', // 网址，默认使用 window.location.href
        // source: '', // 来源（QQ空间会用到）, 默认读取head标签：<meta name="site" content="http://overtrue" />
        title: '', // 标题，默认读取 document.title 或者 <meta name="title" content="share.js" />
        // origin: '', // 分享 @ 相关 twitter 账号
        // description: '', // 描述, 默认读取head标签：<meta name="description" content="PHP弱类型的实现原理分析" />
        image: '', // 图片, 默认取网页中第一个img标签
        sites: ['weibo', 'wechat'], // 启用的站点
        // disabled            : ['qzone', 'qq', 'douban', 'google', 'facebook', 'twitter'], // 禁用的站点
        wechatQrcodeTitle: '微信扫一扫：分享', // 微信二维码提示文字
        wechatQrcodeHelper: '<p>微信里点“发现”，扫一下</p><p>二维码便可将本文分享至朋友圈。</p>'
      }
    }
  },
  watch: {
    config: {
      handler (nw) {
        this.initShare(nw || {})
      },
      immediate: true,
      deep: true,
    }
  },
  mounted () {
    this.initShare(this.config || {})
  },

  methods: {
    initShare (config = {}) {
      const options = {
        ...this.defautlOpt,
        ...config,
      }

      if (this.$el && options.title) {
        window.socialShare(this.$el, options)
      }
    }
  }
}
</script>

<style lang="less" scoped>
@media (min-width: 992px) {
  .social-share .social-share-icon {
    border: none;
    height: 58px;
    width: 58px;
  }
  .social-share {
    a {
      &:before {
        content: none;
      }
      .share {
        width: 58px;
        height: 58px;
      }
    }
  }
}

@media (max-width: 992px) {
 .social-share .social-share-icon {
    border: none;
    height: 26px;
    width: 26px;
  }
  .social-share {
    a {
      &:before {
        content: none;
      }
      .share {
        width: 26px;
        height: 26px;
      }
    }
  }
}
</style>
