<!--
 * @Date: 2023-06-15 10:25:08
 * @LastEditTime: 2023-12-01 18:56:35
 * @Description: content
-->
<template>
  <view class="content">
    <!-- <view class="page-hd">
      <view class="hd-l">
        当前剩余
        <text>{{ hasNum }}</text>
        张抽赏券
      </view>

      <view
        @click="getDanye(10)"
        class="hd-r common_bg"
        :style="{
          'background-image': `url(${$img('/static/img/fu_cssm.png')})`
        }"
      ></view>
    </view> -->

    <view
      class="hd-card common_bg"
      :style="{
        backgroundImage: `url(${$img('/static/img/1_flmh.png')})`
      }"
    >
      <view class="rule" @click="$refs.rulePop.getRule(12, '说明')">说明</view>
    </view>

    <mescroll-body
      ref="mescrollRef"
      @init="mescrollInit"
      :down="downOption"
      @down="downCallback"
      @up="upCallback"
    >
      <view
        @click="toDetail(item)"
        v-for="(item, i) in listData"
        :key="i"
        class="list-item"
      >
        <image class="pic" :src="item.imgurl" mode="scaleToFill" />

        <view class="item-ft">
          <view class="ft-l">抽赏仅需{{ item.need_draw_num }}张抽赏券</view>

          <view class="ft-r">马上抽</view>
        </view>

        <view class="lt-tag">
          <image :src="$img('/static/img/1_yqflmh.png')" lazy-load></image>
        </view>
      </view>
    </mescroll-body>

    <view
      class="invite-fixed common_bg"
      :style="{
        'background-image': `url(${$img('/static/img/1_yqhy.png')})`
      }"
    >
      <button class="hide" open-type="share"></button>
    </view>

    <uni-popup ref="invitePop" type="center">
      <view v-if="inviteData" class="invite-pop">
        <image
          class="invite-hd"
          :src="inviteData.share_image"
          mode="scaleToFill"
        />

        <view
          @click="savePic"
          class="invite-save common_bg"
          :style="{
            'background-image': `url(${$img('/static/img/fuli_bchb.png')})`
          }"
        ></view>

        <image
          @click="close('invitePop')"
          class="invite-close"
          :src="$img('/static/icon/close.png')"
          mode="scaleToFill"
        />
      </view>
    </uni-popup>

    <rule-pop ref="rulePop"></rule-pop>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 下拉刷新的配置(可选, 绝大部分情况无需配置)
      downOption: {
        auto: false
      },
      // 上拉加载的配置(可选, 绝大部分情况无需配置)
      upOption: {
        page: {
          size: 15 // 每页数据的数量,默认10
        }
      },
      listData: [],
      hasNum: 0,
      canReload: false,
      inviteData: ''
    }
  },

  onShareAppMessage(e) {
    console.log(e)
    return {
      title: '点击领取赏券吧~',
      imageUrl: e.target.dataset.img,
      path: '/pages/shouye/index?pid=' + uni.getStorageSync('userinfo').ID
    }
  },

  onReady() {
    // this.open('invitePop')
  },

  onShow() {
    this.canReload && this.mescroll.resetUpScroll()
    this.canReload && this.mescroll.scrollTo(0, 0)
    this.canReload = true
  },

  methods: {
    savePic() {
      uni.showLoading({
        title: '正在保存',
        mask: true
      })

      uni.getImageInfo({
        src: this.inviteData.share_image,
        success: ({ width, height, path, orientation, type }) => {
          uni.saveImageToPhotosAlbum({
            filePath: path,
            success: result => {
              uni.showToast({
                title: '保存成功',
                icon: 'success'
              })
            },
            fail: error => {
              console.log('err')
            },
            complete: res => {
              uni.hideLoading()
            }
          })
        },
        fail: error => {
          uni.hideLoading()
        }
      })
    },

    getInvitePic() {
      this.req({
        url: 'invitation',
        data: {},
        success: res => {
          if (res.status == 1) {
            this.inviteData = res.data

            this.open('invitePop')
          }
        }
      })
    },

    upCallback({ num, size }) {
      this.req({
        url: 'goods',
        data: {
          page: num,
          type: 7
        },
        success: res => {
          if (res.status == 1) {
            this.hasNum = res.data.draw_num

            if (num == 1) {
              this.listData = []
            }

            this.listData = this.listData.concat(res.data.data)
            this.mescroll.endByPage(res.data.data.length, res.data.last_page)
          }
        }
      })
    },

    toDetail(item) {
      uni.navigateTo({ url: `/pages/fuli/fuli-detail?id=${item.id}` })
    },

    close(e) {
      this.$refs[e].close()
    },

    open(e) {
      this.$refs[e].open()
    }
  }
}
</script>

<style lang="scss">
.content {
  padding-bottom: 40rpx;
  min-height: 100vh;
  box-sizing: border-box;
  background-color: #000;

  // .page-hd {
  //   display: flex;
  //   justify-content: space-between;
  //   align-items: center;
  //   padding: 10rpx 30rpx;

  //   .hd-l {
  //     font-size: 28rpx;
  //     font-family: Source Han Sans CN;
  //     font-weight: 400;
  //     color: #ffffff;

  //     text {
  //       color: #00fff3;
  //     }
  //   }

  //   .hd-r {
  //     width: 170rpx;
  //     height: 59rpx;
  //   }
  //   .common_bg {
  //   }
  // }

  .hd-card {
    width: 100%;
    height: 388rpx;
    position: relative;

    .rule {
      position: absolute;
      right: 0;
      top: 200rpx;
      width: 120rpx;
      height: 50rpx;
      background: rgba(255, 255, 255, 0.3);
      border-radius: 25rpx 0rpx 0rpx 25rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 10;

      font-size: 26rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #ffffff;
    }
  }

  .list-item {
    margin: 20rpx auto 0;
    width: 690rpx;
    box-sizing: border-box;
    background: #000000;
    border: 1px solid #4a4951;
    border-radius: 10rpx;
    position: relative;

    .pic {
      width: 100%;
      height: 386rpx;
      border-radius: 10rpx;
      overflow: hidden;
    }

    .item-ft {
      height: 100rpx;
      padding: 0 20rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .ft-l {
        font-size: 26rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
      }

      .ft-r {
        width: 150rpx;
        height: 60rpx;
        background: linear-gradient(90deg, #2dcbff 0%, #ff95fb 100%);
        border-radius: 30rpx;
        display: flex;
        justify-content: center;
        align-items: center;

        font-size: 28rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #222222;
      }
      .common_bg {
      }
    }

    .lt-tag {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1;
      width: 340rpx;
      height: 48rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .invite-fixed {
    position: fixed;
    right: 10rpx;
    bottom: 300rpx;
    width: 126rpx;
    height: 130rpx;
    z-index: 10;
  }

  .invite-pop {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;

    .invite-hd {
      width: 607rpx;
      height: 799rpx;
    }

    .invite-save {
      width: 246rpx;
      height: 84rpx;
    }

    .invite-close {
      width: 50rpx;
      height: 50rpx;
      margin-top: 30rpx;
    }
  }

  .popGm {
    width: 607rpx;
    // height: 904rpx;
    padding-top: 70rpx;
    box-sizing: border-box;
    position: relative;

    .pop_title {
      font-size: 36rpx;
      font-family: zihun152hao-jijiachaojihei;
      font-weight: 400;
      color: #ffffff;
      text-align: center;
    }

    .pop_con {
      padding: 30rpx 40rpx 50rpx;
      box-sizing: border-box;

      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 42rpx;
    }

    .close {
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translate(-50%, 100%);
      width: 50rpx;
      height: 50rpx;
    }
  }
}
</style>
