<template>
  <div class="my-help-container">
    <div class="banner">
      <img v-lazy="imgurl"
           alt="">
    </div>

    <card class="card-wrap">
      <p>你的好友 <span class="username">{{nickname}}</span> 正在参与</p>
      <p>{{theme}}</p>
      <p>助 TA一臂之力吧~</p>

      <van-button van-button
                  type="info"
                  :loading="isLoading"
                  loading-text="助力中..."
                  size="large"
                  @click="handleHelpClick">为健康点赞</van-button>

      <div v-if="skiptype==='miniprogram'"
           class="wx-container">
        <wx-open-launch-weapp id="launch-btn"
                              :username="originalid"
                              @launch="handleHelpClick"
                              :path="pathlink + '.html'">
          <script type="text/wxtag-template">
            <style>.btn { display: flex;align-items: center; width: 336px; height: 48px; color: #FFFFFF;  background: transparent;  border:none; } 
          .btn::after {border: 0; background: transparent;}
          </style>
        <div><button class="btn"></button></div>
      </script>
        </wx-open-launch-weapp>
      </div>
    </card>
  </div>
</template>

<script>
  import card from '../../../components/common/Card.vue'
  import { reqActivityInfo, reqGetJointorInfo, reqHelper } from '../../../api/activityCenter/activityCenter'
  export default {
    components: {
      card
    },
    data() {
      return {
        isLoading: false,    // 助力按钮是否显示loading
        acjoinId: null,
        imgurl: "",
        nickname: "",
        theme: "",
        skiptype: null,   // 跳转类型
        originalid: null,  // 跳转小程序需要的原始ID
        pathlink: "",   // 跳转路径

      }
    },
    methods: {
      // 获取助力基础信息,其实就是获取主题图片和主题信息
      async getActivityInfo() {
        const { data: response } = await reqActivityInfo(this.acjoinId)
        if (response.success !== 1) return this.$toast(response.message)
        const { theme, imgurl, skiptype, originalid, pathlink } = response.result
        this.theme = theme
        this.imgurl = imgurl
        this.skiptype = skiptype
        this.originalid = originalid
        this.pathlink = pathlink
        this.getJointorInfo()
      },

      // 获取被助力用户的信息
      async getJointorInfo() {
        const { data: response } = await reqGetJointorInfo(this.acjoinId)
        console.log("response: ", response)
        if (response.success !== 1) return this.$toast(response.message)
        this.nickname = response.result.nickname
      },

      async handleHelpClick() {
        let state = this.getUrlParams('state')
        console.log("state", state)
        switch (state) {
          case '0':
            this.$toast('已关注的老用户，不可助力!')
            break;
          case '1':
            this.$toast('您已助力!')
            break;
          case '2':
            this.isLoading = true
            let obj = {}
            obj.acjoinId = this.acjoinId
            obj.unionid = this.getUrlParams('unionid')
            const { data: response } = await reqHelper(obj)
            if(response.success!==1) {
              this.$toast(response.message)
              this.isLoading = false
              // 跳转H5网页
              setTimeout(() => {
                window.location.href = this.pathlink
              }, 1000);
              return
            }
            this.$toast('助力成功!')
            this.isLoading = false
            break
        }
        // 跳转H5页面或者微信小程序
        if (this.skiptype === 'view') {
          // 跳转H5网页
          setTimeout(() => {
            window.location.href = this.pathlink
          }, 1000);
        } else {
          // 跳转微信小程序
        }
      }
    },
    mounted() {
      wx.ready(function () {
        wx.checkJsApi({
          jsApiList: ['hideOptionMenu'],
          success: function (res) {
            console.log("weixin sdk config status: ", res)
          }
        })
        // 隐藏选项菜单
        wx.hideOptionMenu()
      })
    },
    created() {
      this.acjoinId = this.getUrlParams('acjoinId')
      this.getActivityInfo()

    }
  }
</script>

<style lang="less" scoped>
  .my-help-container {
    height: 100%;
    background-color: #f7f7f7;
    .banner {
      img {
        width: 100%;
        max-height: 3rem;
      }
    }

    .card-wrap {
      position: relative;
      width: 94%;
      margin: -0.4rem auto 0;
      font-size: 0.32rem;
      padding-top: 0.28rem;
      p:nth-child(2) {
        color: #000;
        font-size: 0.5rem;
        margin: 0.4rem 0;
        font-weight: bold;
      }
      .username {
        color: #478bfb;
      }
      .van-button {
        width: 90%;
        margin: 0.4rem 0;
        background-color: #478bfb;
      }
    }
  }

  .wx-container {
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -60%);
    z-index: 999;
  }
</style>