<template>
  <view>
    <u-popup :show="showSharePopup" :round="10">
      <view class="share-popup">
        <view class="share-title">分享至</view>
        <u-grid :border="false" col="5" class="share-popup-grid">
          <u-grid-item v-for="(item,index) in shareList" :key="index" @click="selectChannel(index)">
            <image :src="item.icon" class="share-icon" />
            <text>{{item.name}}</text>
          </u-grid-item>
        </u-grid>
        <view class="close-button" @click="close">取消</view>
      </view>
    </u-popup>
    <u-popup :show="showChannelPopup" :round="10" :custom-style="{width: '80%', maxWidth: '300px'}" mode="center" @close="closeChannel">
      <view class="channel-popup">
        <view class="channel-title">以下内容已复制到剪切板</view>
        <view class="channel-content">{{content}}</view>
        <view class="channel-button" @click="share">
          <image :src="shareBtn.icon" />
          <text>{{shareBtn.title}}</text>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    url: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      content: '',
      showChannelPopup: false,
      showSharePopup: false,
      shareBtn: {
          index: null,
          icon: "",
          title: ""
      },
      shareList: [{
          icon: '/static/icon/weixin@2x.png',
          name: '微信'
      }, {
          icon: '/static/icon/pengyouquan@2x.png',
          name: '朋友圈'
      }, {
          icon: '/static/icon/qq-2@2x.png',
          name: 'QQ好友'
      }, {
          icon: '/static/icon/QQkongjian@2x.png',
          name: 'QQ空间'
      }, {
          icon: '/static/icon/shuyi_lianjie@2x.png',
          name: '复制链接'
      }]
    }
  },
  watch: {
    url: {
      handler(val) {
        this.content = this.title || getApp().globalData.share.content
        this.content += val
      }
    }
  },
  async created() {
    await this.$onLaunched
    let url = getApp().globalData.share.url
    const code = getApp().globalData.share.code
    if (code) {
		url += (url.indexOf('?') !== -1 ? '&code=' : '?code=') + code
    }
    this.content = this.title || getApp().globalData.share.content
    this.content += this.url || url
  },
  methods: {
    close: function() {
      this.showSharePopup = false
    },
    closeChannel: function() {
      this.showChannelPopup = false
    },
    selectChannel: function(index) {
      switch(index) {
        case 0:
        case 1:
          this.shareBtn = {
            index: index,
            icon: '/static/icon/weixin2@2x.png',
            title: '打开微信发送给好友'
          }
          this.showChannelPopup = true
          break
        case 2:
        case 3:
          this.shareBtn = {
              index: index,
              icon: '/static/icon/qq2@2x.png',
              title: '打开QQ发送给好友'
          }
          this.showChannelPopup = true
          break
        case 4:
          uni.showToast({
              icon: "none",
              title: "分享链接已复制",
              duration: 3000
          })
          break
      }
      this.close()
      uni.setClipboardData({
        data: this.content,
        showToast: false
      })
    },
    share: function() {
      switch(this.shareBtn.index) {
        case 0:
        case 1:
          this.openApp('weixin://')
          break
        case 2:
        case 3:
          this.openApp('mqq://')
          break
      }
      this.closeChannel()
    }
  }
}
</script>

<style lang="scss">
.share-popup {
	background-color: $uni-bg-color;
	color: #fff ;
  .share-title {
    padding: 15px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
  }
  .share-popup-grid {
    padding: 0 10px;
    align-items: flex-start;
    .u-grid-item {
      padding: 5px;
      font-size: 13px;
      .share-icon {
        width: 100%;
        max-width: 44px;
        max-height: 44px;
        margin-bottom: 8px;
        padding: 8px;
        background-color: #f9f9f9;
        border-radius: 6px;
      }
    }
  }
  .close-button {
    width: 100%;
    height: 50px;
    margin-top: 15px;
    border-top: 1px solid #f3f3f3;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.channel-popup {
  .channel-title {
    padding: 15px 20px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
  }
  .channel-content {
    padding: 0 20px;
    font-size: 14px;
    line-height: 1.6;
  }
  .channel-button {
    width: 80%;
    max-width: 200px;
    height: 40px;
    margin: 15px auto 20px;
    background-color: $uni-color-primary;
    color: #fff;
    font-size: 15px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    uni-image {
      width: 20px;
      height: 20px;
      margin-right: 5px;
    }
  }
}
</style>