<template>
  <view class="content">
    <uni-nav-bar
      left-icon="left"
      title="欧气券"
      color="#fff"
      backgroundColor="transparent"
      :fixed="true"
      :statusBar="true"
      :border="false"
      @clickLeft="back"
    ></uni-nav-bar>

    <view class="tab-list">
      <view
        @click="getlist(i + 1)"
        v-for="(item, i) in arr"
        :key="i"
        class="tab-list-item"
        :class="{
          active: show == i + 1
        }"
      >
        {{ item }}

        <view v-if="show == i + 1" class="arrow"></view>
      </view>
    </view>
    <!-- <view class="header">
      <view class="qiehuan">
        <view @click="getlist(i + 1)" v-for="(v, i) in arr" :key="i">
          <view :class="show == i + 1 ? 'xzs' : 'wzs'">{{ v }}</view>
          <view class="qiehuan_line" v-if="show == i + 1">
            <image src="../../static/shouye/top.png"></image>
          </view>
        </view>
      </view>
    </view> -->
    <!-- 内容 -->
    <mescroll-body
      ref="mescrollRef"
      @init="mescrollInit"
      :down="downOption"
      @down="downCallback"
      @up="upCallback"
    >
      <view
        class="coupon common_bg"
        v-for="(item, index) in aixuanArr"
        :key="index"
        :style="{
          backgroundImage: `url(${$img('/static/img/coupon_bg.png')})`
        }"
      >
        <view class="coupon_item">
          <view class="coupon_item_1">
            <view class="coupon-title">
              <text>{{ item.title }}级</text>
              欧气券
            </view>
            <view>
              可随机开出
              <text>{{ item.min }}-{{ item.max }}</text>
              友达币
            </view>
          </view>
          <view
            v-if="show == 1"
            class="coupon_r common_bg"
            :style="{
              'background-image': `url(${$img('/static/img/coupon_ljfx.png')})`
            }"
          >
            <button
              open-type="share"
              :data-id="item.id"
              :data-img="item.share_imgurl"
              style="width: 100%; height: 100%"
            >
              <!-- 立即分享 -->
            </button>
          </view>
          <view
            class="coupon_r common_bg"
            v-else
            @click="kaiquan(item.id)"
            :style="{
              'background-image': `url(${$img('/static/img/coupon_ljkq.png')})`
            }"
          >
            <!-- 立即开启 -->
          </view>
        </view>
      </view>
    </mescroll-body>

    <!-- 奖品弹窗 -->
    <uni-popup ref="pop_show" type="center">
      <view
        class="pop_jp common_bg"
        :style="{
          'background-image': `url(${$img(
            '/static/img/coupon_prize_pop_bg.png'
          )})`
        }"
      >
        <view class="get-num">恭喜您获得{{ num }}个潮币</view>

        <image :src="$img('/static/img/coupon_coin.png')"></image>

        <!-- <view>
          <text>恭喜获得{{ num }}个潮币</text>
        </view> -->
        <view
          class="pop_btn common_bg"
          @click="$refs.pop_show.close()"
          :style="{
            'background-image': `url(${$img('/static/img/coupon_kxsx.png')})`
          }"
        >
          <!-- 知道了 -->
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      z_imgPath: this.$z_img2,
      arr: ['我的券', '参与中'],
      show: 1,

      downOption: {
        auto: false
      },
      aixuanArr: [],

      // 开券获得币的数量
      num: ''
    }
  },
  onLoad(e) {
    if (e && e.show == 2) {
      this.show = 2
    }
  },

  onReady() {
    // this.$refs.pop_show.open()
  },

  onShareAppMessage(e) {
    console.log(e)
    return {
      title: '点击领取欧气券吧~',
      imageUrl: e.target.dataset.img,
      path:
        '/pages/user/index?coupon_id=' +
        e.target.dataset.id +
        '&pid=' +
        uni.getStorageSync('userinfo').ID
    }
  },
  methods: {
    back() {
      let page = getCurrentPages()

      if (page.length > 1) {
        uni.navigateBack({ delta: 1 })
      } else {
        uni.switchTab({ url: '/pages/user/index' })
      }
    },

    kaiquan(e) {
      let that = this
      that.req({
        url: 'coupon_open',
        data: {
          coupon_id: e
        },
        success(res) {
          if (res.status == 1) {
            that.num = res.data
            that.$refs.pop_show.open()
            that.loadData(1)
          } else {
            uni.showToast({
              title: res.msg,
              icon: 'none',
              duration: 1500,
              success() {
                setTimeout(() => {
                  that.loadData(1)
                })
              }
            })
          }
        }
      })
    },
    getlist(v) {
      this.show = v
      this.aixuanArr = []
      this.mescroll.resetUpScroll()
    },
    downCallback() {
      this.mescroll.resetUpScroll()
    },
    upCallback(page) {
      this.loadData(page.num)
    },
    loadData(pageNo) {
      let that = this
      that.req({
        url: 'coupon_list',
        Loading: true,
        data: {
          page: pageNo,
          type: that.show
        },
        success(res) {
          that.mescroll.endByPage(res.data.data.length, res.data.last_page)
          if (pageNo == 1) {
            that.aixuanArr = res.data.data
          } else {
            that.aixuanArr = that.aixuanArr.concat(res.data.data)
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
.mengban {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  justify-content: center;
  align-items: center;
}

button::after {
  border: none;
}

button {
  background-color: transparent;
  padding-left: 0;
  padding-right: 0;
  line-height: inherit;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: #fff;
}

.sixiao {
  position: absolute;
  width: 92rpx;
  height: 69rpx;
  right: 20rpx;
  bottom: 20rpx;
}

.sy_btn {
  background: #96fffe !important;
}

.coupon_r {
  height: 60rpx;
  width: 143rpx;
  // height: 74rpx;
  // margin-top: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24rpx;
  box-sizing: border-box;

  button {
    padding: 0 36rpx;
    font-size: 36rpx;
    font-family: ZhenyanGB-Regular, ZhenyanGB;
    font-weight: 400;
    color: #290066;
    letter-spacing: 1px;
  }
}

.coupon_item_1 {
  font-size: 28rpx;
  color: #ffffff;
  // padding-top: 88rpx;
  box-sizing: border-box;
  margin-left: 10rpx;

  .coupon-title {
    font-size: 44rpx;
    font-family: zihun152hao-jijiachaojihei;
    font-weight: 400;
    color: transparent;

    background: linear-gradient(0deg, #85dfff 0%, #ba39ff 100%);
    background-clip: text;
  }
}

.coupon_item {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  box-sizing: border-box;
  /* width: 690rpx;
		height: 146rpx; */
  /* background: url(../../static/mine/A_bg.png) no-repeat; */
  /* background-size: 100% 100%; */
  // margin-top: 24rpx;
  position: relative;
}

.coupon {
  display: flex;
  align-items: center;
  width: 700rpx;
  height: 156rpx;
  margin: 0rpx auto 24rpx;
  /* background: #11141D; */
  /* box-shadow: 0px 0px 10rpx 0px rgba(150, 255, 254, 0.7); */
  padding: 0 30rpx;
  box-sizing: border-box;
  border-radius: 20rpx;
}

.qiehuan {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16rpx;
  width: 300rpx;
}

.qiehuan_line {
  margin: -10rpx auto;
  width: 40rpx;
  height: 20rpx;
  border-bottom: 4rpx solid #1ac762;
  border-radius: 2rpx;
}

.qiehuan_line > image {
  width: 30rpx;
  height: 20rpx;
}

.qiehuan > view {
  flex: 1;
  text-align: center;
}

.wzs {
  font-size: 34rpx;
  color: rgba(255, 255, 255, 0.6);
}

.xzs {
  font-size: 34rpx;
  color: #ffffff;
}

.header {
  width: 750rpx;
  /* height: 176rpx; */
  padding-bottom: 30rpx;
  /* background: #222222; */
  font-size: 28rpx;
  color: #333333;
  box-sizing: border-box;
  position: fixed;
  /* #ifdef MP */
  top: 0;
  /* #endif */
  /* #ifndef MP */
  top: 88rpx;
  /* #endif */
  z-index: 15;
}

.content {
  width: 100vw;
  min-height: 100vh;
  // padding-top: 88rpx;
  box-sizing: border-box;
  background-attachment: fixed;
  background-size: 100vw 100vh;
}

.tab-list {
  display: flex;
  padding: 30rpx;

  .tab-list-item {
    margin-right: 40rpx;
    position: relative;

    font-size: 28rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #999999;

    .arrow {
      position: absolute;
      left: 50%;
      bottom: -10rpx;
      transform: translateX(-50%);
      width: 32rpx;
      height: 4rpx;
      background: linear-gradient(90deg, #2dcbff 0%, #ff95fb 100%);
      border-radius: 2rpx;
    }

    &.active {
      color: transparent;
      background: linear-gradient(90deg, #6adeff 0%, #7ab5ff 50%, #ff7feb 100%);
      background-clip: text;
    }
  }
}

.pop_jp {
  width: 534rpx;
  height: 696rpx;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;

  .get-num {
    padding-top: 160rpx;

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

  image {
    width: 324rpx;
    height: 324rpx;
    margin-top: 10rpx;
  }

  .pop_btn {
    margin-top: 20rpx;
    width: 256rpx;
    height: 84rpx;
  }
}
</style>
