<template>
  <view class="box" @click="close1">
    <view class="youhui">
      <scroll-view :scroll-y="true" class="scroll-Y" @scroll="scroll" @click.stop="a">
        <view class="top">
          <text class="tittle">领取优惠券</text>
          <view class="close" @click="close1">
            <img src="../../static/img/close.png" alt class="close" />
          </view>
        </view>
        <view class="midbox">
          <view class="mid">
            <view class="yhqs">
              <view class="yhq" v-for="(i,j) in yhqall" :key="j">
                <view class="left">
                  <view class="price">
                    <text class="moneyicon">￥</text>
                    <text>{{i.price}}</text>
                  </view>
                  <view>满{{i.min}}元可用</view>
                  <view>有效期{{i.starttime}}-{{i.endtime}}</view>
                </view>
                <view class="right">
                  <view class="getter" v-if="ifget" @click="useyhq" :data-yhqid="i.yhq_id" :data-yhqpri="i.price">立即使用</view>
                  <view class="getter" v-else @click="getyhq" :data-id="i.yhq_id">立即领取</view>
                  <img src="../../static/img/geted.png" alt class="geted" v-if="ifget" />
                </view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
      <!-- <view class="bottom">
        <view class="more">查看更多</view>
        <view class="btn">更多</view>
      </view>-->
    </view>
  </view>
</template>

<script>
import { requestP } from "../../static/js/request";
export default {
  name: "youhui",
  props: {
    ifyouhui: {
      type: Boolean
    },
    yhqall: {
      type: Array
    },
    ifget: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {};
  },
  methods: {
    close1() {
      this.$emit("off", false);
    },
    getyhq(e) {
      console.log("yhq");
      requestP({
        url: "youhuiquan/add",
        data: {
          yhq_id: e.currentTarget.dataset.id
        }
      }).then(res => {
        console.log(res);
        if (res.data.code == 1) {
          uni.showToast({
            title: "领取成功",
            icon: "success",
            duration: 2000
          });
          requestP({
            url: "youhuiquan/get_list_all"
          }).then(res => {
            console.log(res, "youhui");
            this.yhqall = res.data.data;
          });
        }
      });
    },
    useyhq(e){
      console.log(e)
      this.$emit("yhqpri",e.currentTarget.dataset.yhqpri)
      this.$emit("yhqid",e.currentTarget.dataset.yhqid)
      this.close1()
    },
    a() {},
    scroll() {}
  },
  mounted() {}
};
</script>

<style lang="scss">
.scroll-Y {
  height: 93%;
}
.box {
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.55);
  position: absolute;
  top: 0;
}
.youhui {
  width: 100%;
  height: 70%;
  background-color: white;
  position: absolute;
  top: 377upx;
  .top {
    color: #333;
    font-size: 34rpx;
    text-align: center;
    position: fixed;
    width: 100%;
    z-index: 999;
    .tittle {
      margin-top: 31upx;
    }
    .close {
      width: 45upx;
      height: 45upx;
      float: right;
      margin-right: 30upx;
    }
  }
  .mid {
    .yhqs {
      margin-top: 50upx;
      .yhq {
        width: 689upx;
        height: 173upx;
        background: url("../../static/img/yhqbj.png");
        background-size: 100% 100%;
        margin: 0 auto;
        margin-bottom: 20upx;
        display: flex;
        justify-content: space-between;
        .left {
          color: #e01212;
          font-size: 24upx;
          margin: auto 0;
          margin-left: 37upx;
          .price {
            font-size: 50upx;
            .moneyicon {
              font-size: 43upx;
            }
          }
        }
        .right {
          color: #e01212;
          font-size: 32upx;
          .getter {
            position: relative;
            top: 71upx;
            right: 61upx;
          }
          .geted {
            width: 93upx;
            height: 80upx;
            position: relative;
            top: 42upx;
            left: 33upx;
            z-index: 0;
          }
        }
      }
    }
  }
  .bottom {
    .more {
      color: #e01212;
      font-size: 28upx;
      text-align: center;
      margin-top: 26upx;
      margin-bottom: 22upx;
    }
    .btn {
      width: 100%;
      height: 96upx;
      color: white;
      line-height: 96upx;
      text-align: center;
      background-color: #e01212;
      margin-top: 75upx;
    }
  }
  .midbox {
    position: relative;
    top: 100rpx;
  }
}
</style>