<template>
  <view class="succeed">
    <view class="bg">
      <view class="bg_con">
        <view class="icon"></view>
        <!--       
        <view class="text">
          支付成功
        </view> 
        -->

      </view>

    </view>
    <view class="container">
      <view class="voucher">
        <view class="title">支付凭证</view>
        <view class="tip">请主动出示给加油员查看</view>
        <view class="dashed">
          <!-- <view class="left_circle"></view>
          <view class="right_circle"></view> -->
        </view>
        <view class="arch">
          <text></text>
          <text></text>
        </view>
        <view class="content">
          <view class="oil">
            <text>油品</text>
            <text>{{v_oilName}}</text>
          </view>
          <view class="origin">
            <text>应付</text>
            <text>￥{{v_receivableAmt}}</text>
          </view>
          <view class="amt">
            <text>实付</text>
            <text>￥{{v_amt}}</text>
          </view>
          <view class="time">
            <text>时间</text>
            <text>{{v_time}}</text>
          </view>
        </view>

      </view>

      <view class="attention">
        <view class="focus"> 更多优惠，请关注我们的公众号 </view>
        <official-account class="official"></official-account>
      </view>
    </view>
    <uni-popup ref="coupon" class="coupon" type="bottom" maskClick="false">
      <view class="coupon-container">
        <view class="close" @click="closeCoupon">
        </view>
        <view class="title">
          您可领用的优惠券
        </view>
        <scroll-view scroll-y="true" class="coupon-scroll">
          <view class="top">
            <view class="top_left">
              <view class="title">可领取的优惠劵</view>
              <view class="tip">
                <text class="icon"></text>
                您本次最多可领取 {{computedGiveLimit}} 张优惠券
              </view>
            </view>
            <view class="top_right">
              <button class="get" @click="getAllCoupon">一键领取</button>
            </view>

          </view>
          <view class="center">
            <template v-if="!showTip">
              <template v-if="couponList.length != 0">
                <view class="coupon" :class="[
                                ele.couponType == 1 ? 'direct' : '',
                                ele.couponType == 2 ? 'rate' : '',
                                ele.couponType == 3 ? 'exchange' : '',
                                ele.showStatus == 0 ||
                                ele.showStatus == 1 ||
                                ele.showStatus == 2 ||
                                ele.showStatus == 3
                                  ? 'expired'
                                  : '',
                              ]" v-for="ele in computedCouponList" :key="ele.id">
                  <view class="left">
                    <view class="amount" v-if="ele.couponType == 1 || ele.couponType == 2">
                      {{ ele.couponType == 1 ? "￥" : ""
                        }}{{ ele.couponType == 2 ? "% " : ""
                        }}<text class="value">{{ ele.couponAmt }}</text>
                    </view>
                    <view class="condition">
                      {{
                          ele.couponThresholdAmt == 0
                            ? "无门槛"
                            : "满" + ele.couponThresholdAmt + "元可用"
                        }}
                    </view>
                    <view class="exchangeName">{{ ele.couponName }}</view>
                  </view>
                  <view class="right">
                    <view class="title">
                      <text class="type">
                        {{ ele.couponType == 1 ? "立减劵" : ""}}{{ ele.couponType == 2 ? "折扣劵" : ""}}{{ ele.couponType == 3 ? "兑换劵" : "" }}
                      </text>
                      <text class="state">
                        {{
                            (!ele.showStatus && ele.showStatus !== 0 ? "可尝试领取" : "") +
                            (ele.showStatus == 0 ? "已经领取成功" : "") +
                            (ele.showStatus == 1 ? "优惠券已领完" : "") +
                            (ele.showStatus == 2 ? "不满足领取条件" : "") +
                            (ele.showStatus == 3 ? "不符合领取条件" : "")
                        }}
                      </text>
                    </view>
                    <view class="content">
                      <view class="items">
                        <view class="item scope">
                          适用：<text>{{
                                ele.couponType == 1 || ele.couponType == 2
                                  ? (ele.oilName || []).toString()
                                  : ""
                              }}{{
                                ele.couponType == 3
                                  ? verificationNameToString(ele.couponVerificationList)
                                  : ""
                              }}</text>
                        </view>
                        <view class="item valid">
                          截止：<text>{{
                      (ele.effectiveTimeType == 1 ?  (ele.effectiveTimeEnd || "").replace(/\s{1,}\S{8,8}/, ""): "") 
                      + (ele.effectiveTimeType == 2 ?  "领取后"+ ele.effectiveDayNum +"天有效": "")
                    }}</text>
                        </view>
                        <view class="item from">来源：<text>加油活动</text></view>
                      </view>
                      <view class="btn">
                        <button @click="getCoupon([ele.couponId])">领取</button>
                      </view>
                    </view>
                    <view class="tip">
                      {{
                          !!ele.couponDetails
                            ? ele.couponDetails
                            : "使用此劵更优惠~更多活动，请关注我们的公众号！"
                        }}
                    </view>
                  </view>
                </view>
              </template>
              <template v-else>
                <view style="text-align: center">当前活动里没有可有优惠券~</view>
              </template>
            </template>
            <template v-else>
              <view style="text-align: center">{{ tip }}</view>
            </template>
          </view>
        </scroll-view>
      </view>
    </uni-popup>

  </view>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from "vuex";

  export default {
    data() {
      return {
        giveLimit: 0, // 单次可领取的张数
        showTip: true,
        tip: "loading...",
        notClaimedCouponList: [], // 未尝试领取
        successCouponList: [], //领取成功的
        couponHoldNumMaxList: [], // 持有超额
        couponNumNEList: [], //优惠券数量不足
        couponReceiveNumList: [], //累计持有超额

        getCouponsList: [],
        couponList: []
      }
    },
    computed: {
      // ...mapState(["v_receivableAmt", "v_amt", "v_oilName", "v_time"])
      ...mapState({
        v_receivableAmt: state => state.voucher.v_receivableAmt,
        v_amt: state => state.voucher.v_amt,
        v_oilName: state => state.voucher.v_oilName,
        v_time: state => state.voucher.v_time,
        succeedIssueId: state => state.coupon.succeedIssueId
      }),
      computedCouponList() {
        return this.couponList.map((ele) => {
          if (
            ele.showStatus == 0 ||
            ele.showStatus == 1 ||
            ele.showStatus == 2 ||
            ele.showStatus == 3
          ) {
            return ele;
          }
          if (this.successCouponList.includes(ele.couponId.toString())) {
            //领取成功
            ele.showStatus = 0;
          }
          if (this.couponNumNEList.includes(ele.couponId.toString())) {
            //优惠券数量不足
            ele.showStatus = 1;
          }
          if (this.couponHoldNumMaxList.includes(ele.couponId.toString())) {
            //持有超额
            ele.showStatus = 2;
          }
          if (this.couponReceiveNumList.includes(ele.couponId.toString())) {
            //累计持有超额
            ele.showStatus = 3;
          }
          return ele;
        });
      },
      computedGiveLimit() {
        if (this.giveLimit > this.couponList.length) {
          return this.couponList.length;
        }
        return this.giveLimit;
      },
    },
    created() {
      this.initSucceedIssue()
    },
    mounted() {

    },
    methods: {
      initSucceedIssue() {
        if(!this.succeedIssueId){
          return 
        }
        uni.showLoading({
          title: '拉取优惠...',
          mask: true
        });
        
        this.getCouponList().then(() => {
          uni.hideLoading();
          this.$refs.coupon.open();
        }).catch((err) => {
          uni.showToast({
            title: '拉取优惠失败',
            mask: true,
            icon: 'error'
          })
        });
      },
      getAllCoupon() {
        const arr = [];
        this.couponList.map((ele) => {
          if (!ele.showStatus && ele.showStatus !== 0) {
            arr.push(ele.couponId);
          }
          return ele;
        });
        this.getCoupon(arr);
      },
      verificationNameToString(arr) {
        let str = "";
        arr.map((ele) => {
          str += ele.verificationName + " ";
        });
        return str;
      },
      closeCoupon() {
        this.$refs.coupon.close();
      },
      async getCouponList() {
        try {
          const couponData = await this.$Request({
            url: "/selectStaGrantCouponList",
            method: "GET",
            data: {
              couponIssueId: this.succeedIssueId,
              stationId: this.stationId,
              unionId: this.unionId
            }
          })
          console.log('code',couponData)
          if (couponData.retCode == 0) {
            this.showTip = false;
            this.giveLimit = couponData.data.giveLimit;
            this.couponList = couponData.data.couponsList;
          } else if (couponData.retCode == "-7") {
            this.tip = "该活动已关闭";
          } else if (couponData.retCode == "-8") {
            this.tip = "此活动在此时段暂未开放";
          } else if (couponData.retCode == "-6") {
            this.tip = "您的访问此活动的次数已经超过限制";
          }

        } catch (e) {
          //TODO handle the exception
        }
      },
      async getCoupon(arr) {
        console.log("arr", arr);
        try {
          const getData = await this.$Request({
            url: "/addUserCoupon",
            method: "POST",
            data: {
              unionId: this.unionId,
              // unionId: this.unionId,
              couponIds: arr.toString(),
              // couponIssueId: this.$store.state.parse.issueId,
              couponIssueId: this.succeedIssueId,
              // stationId: this.stationId,
              stationId: this.stationId,
            }
          })
          console.log('getData', getData)
          if (getData.retCode == 0) {
            this.couponHoldNumMaxList = getData.data.couponHoldNumMaxList;
            this.couponNumNEList = getData.data.couponNumNEList;
            this.couponReceiveNumList = getData.data.couponReceiveNumList;
            this.notClaimedCouponList = getData.data.notClaimedCouponList;
            this.successCouponList = getData.data.successCouponList;
          } else {
            throw new Error("");
          }
          console.log(this.couponHoldNumMaxList)
        } catch (e) {
          //TODO handle the exception
        }
      },
    }
  }
</script>

<style lang="scss">
  page {
    width: 750rpx;
    background: #F2F2F2;

    .succeed {
      .bg {
        width: 750rpx;
        height: 352rpx;
        background: #0ca674;

        .bg_con {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 200rpx;

          .icon {
            background: url(../../static/icon/duigouxiao.2x.png) no-repeat 0px 0px;
            background-size: 100% 100%;
            width: 100rpx;
            height: 100rpx;
            display: inline-block;
            margin-right: 30rpx;
          }

          .text {
            font-size: 40rpx;
            font-weight: bolder;
            font-weight: 600;
            color: #FFFFFF;
            line-height: 56rpx;
            display: inline-block;
          }
        }
      }

      // 占位元素
      .container {
        width: 690rpx;
        margin: 0 auto;
        margin-top: -150rpx;

        .voucher {
          margin: 0;
          width: 690rpx;
          height: 635rpx;
          // background: #FFFFFF;
          border-radius: 14rpx;
          box-sizing: border-box;
          padding: 23rpx;
          // box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.1);
          background: url(../../static/icon/bg-success.png) no-repeat 0px 0px;
          background-size: 100% 100%;

          .title {
            height: 44rpx;
            font-size: 38rpx;
            font-weight: bolder;
            color: #1C1C27;
            line-height: 44rpx;
            text-align: center;
            margin-top: 35rpx;
          }

          .tip {
            height: 34rpx;
            font-size: 30rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: bold;
            color: #F63932;
            line-height: 34rpx;
            text-align: center;
            margin-top: 30rpx;
          }

          .dashed {
            width: 500rpx;
            border: 2rpx dashed #c0c0c0;
            margin: 30rpx auto 0 auto;
            // .left_circle{
            //     position: absolute;
            //     width:25rpx;
            //     height:50rpx; 
            //     background-color: #f2f2f2;
            //     border-radius:0 25rpx 25rpx 0; /* 左上、右上、右下、左下 */
            //     left: -100rpx;
            // }
            // .right_circle{
            //     width:50rpx;
            //     height:100rpx; 
            //     background-color:#cb18f8;
            //     border-radius:50rpx 0 0 50rpx; /* 左上、右上、右下、左下 */
            // }
          }

          .content {
            height: 330rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin: 40rpx 80rpx 0 80rpx;

            >view {
              display: flex;
              justify-content: space-between;
              align-items: center;

              text:nth-child(1) {
                font-size: 33rpx;
                font-weight: bold;
                color: #1C1C27;
                line-height: 40rpx;
              }

              text:nth-child(2) {
                font-size: 33rpx;
                font-weight: bold;
                color: rgba(0, 0, 0, 0.5);
                line-height: 40rpx;
                color: #9f9f9f;
              }
            }
          }
        }

        .attention {
          .focus {
            color: #c4c4c4;
            font-size: 25rpx;
            text-align: center;
            margin-top: 50rpx;
            margin-bottom: 10rpx;
          }
        }
      }
    }

    uni-popup.coupon {
      .coupon-container {
        width: 100%;
        border-radius: 42rpx 42rpx 0px 0px;
        background: #F2F2F2;
        padding: 0 30rpx;
        box-sizing: border-box;
        position: relative;

        .close {
          width: 38rpx;
          height: 38rpx;
          position: absolute;
          top: 24rpx;
          right: 24rpx;
          background: url(../../static/icon/6_d05_close.2x.png) no-repeat 0px 0px;
          background-size: 100% 100%;
        }

        >.title {
          height: 105rpx;
          font-size: 32rpx;
          font-weight: 400;
          color: #111111;
          line-height: 105rpx;
          font-weight: 600;
          color: #111111;
          text-align: center;
        }

        .coupon-scroll {
          max-height: 80vh;
          overflow: scroll;
          min-height: 50vh;

          .top {
            color: #007AFF;
            width: 690rpx;
            height: 140rpx;
            // position: relative;
            // width: 750rpx;
            // height: 150rpx;
            padding: 0 30rpx 0 30rpx;
            box-sizing: border-box;
            background: #ffffff;
            display: flex;
            justify-content: space-between;
            margin-bottom: 50rpx;

            .top_left {
              >.title {
                height: 40rpx;
                font-size: 28rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: bold;
                color: rgba(0, 0, 0, 0.5);
                line-height: 40rpx;
                letter-spacing: 1px;
                margin-top: 30rpx;
              }

              >.tip {
                height: 28rpx;
                font-size: 20rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 600;
                color: #ff5c5a;
                line-height: 28rpx;
                margin-top: 10rpx;

                >.icon {
                  background: url("../../static/icon/tishi.2x.png") no-repeat;
                  background-size: 100% 100%;
                  display: inline-block;
                  width: 22rpx;
                  height: 21rpx;
                }
              }
            }

            .top_right {
              width: 190rpx;
              margin-top: 38rpx;

              >button {
                text-align: center;
                width: 190rpx;
                height: 60rpx;
                background: #23a97d;
                border-radius: 30rpx;
                outline: none;
                border: none;
                font-weight: 600;
                color: #ffffff;
                font-size: 26rpx;
                letter-spacing: 1px;
                line-height: 60rpx;
              }
            }
          }

          .center {
            .coupon {
              display: flex;
              justify-content: space-between;
              height: 200rpx;
              margin-bottom: 30rpx;
              box-shadow: 0rpx 0rpx 10rpx 4rpx rgba(233, 223, 223, 0.5);

              >.left {
                display: flex;
                flex-direction: column;
                justify-content: center;
                text-align: center;
                width: 220rpx;
                height: 200rpx;
                text-align: center;

                .amount {
                  display: block;
                  font-size: 40rpx;
                  font-weight: 500;
                  color: #ffffff;
                  line-height: 56rpx;
                  text-align: center;
                  margin-top: 0rpx;

                  .value {
                    font-size: 60rpx;
                  }
                }

                .condition {
                  font-size: 24rpx;
                  font-weight: 400;
                  color: #ffffff;
                  line-height: 33rpx;
                  text-align: center;
                  margin-top: 25rpx;
                }

                .exchangeName {
                  display: none;
                  font-size: 35rpx;
                  font-weight: 500;
                  color: #ffffff;
                  line-height: 56rpx;
                }
              }

              >.right {
                width: 456rpx;
                height: 200rpx;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                margin: 8rpx 0 5rpx 0;

                .title {
                  height: 30rpx;
                  font-size: 24rpx;
                  font-weight: 600;
                  line-height: 30rpx;


                  .type {
                    width: 113rpx;
                    height: 30rpx;
                    line-height: 30rpx;
                    display: inline-block;
                    background: #f8c;
                    border-radius: 19rpx;
                    font-size: 24rpx;
                    font-weight: 600;
                    color: #ffffff;
                    text-align: center;
                  }

                  .state {
                    display: inline-block;
                    margin-left: 20rpx;
                    color: #7f7f7f;
                    height: 30rpx;
                    font-size: 24rpx;
                    font-weight: 600;
                    line-height: 33rpx;
                    white-space: nowrap;
                  }
                }

                .content {
                  display: flex;
                  justify-content: space-between;
                  margin: 5rpx 0 5rpx 0;
                  height: 100rpx;

                  .items {
                    width: 330rpx;
                    height: 100%;
                    display: flex;
                    justify-content: space-around;
                    flex-direction: column;

                    .item {
                      color: #272626;
                      font-size: 21rpx;

                      >text {
                        width: 230rpx;
                        display: inline-block;
                        color: #272626;
                        font-size: 22rpx;
                        font-weight: bold;


                        overflow: hidden;
                        /* 超出部分隐藏 */
                        white-space: nowrap;
                        /* 文本不换行 */
                        text-overflow: ellipsis;
                        /* 省略的文本用省略号表示 */

                      }
                    }

                    .from {
                      display: none;
                    }
                  }

                  >.btn {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    margin-right: 10rpx;

                    >button {
                      height: 60rpx;
                      background: linear-gradient(143deg, #fad965 0%, #f3b235 100%);
                      border-radius: 20rpx;
                      border: none;
                      outline: none;
                      color: #ffffff;
                      line-height: 60rpx;
                      font-size: 30rpx;
                      font-weight: 400;
                      overflow: hidden;
                      /* 超出部分隐藏 */
                      white-space: nowrap;
                      /* 文本不换行 */
                    }
                  }
                }

                .tip {
                  margin-right: 20rpx;
                  border-top: 2rpx dashed #d8d8d8;
                  height: 49rpx;
                  font-size: 22rpx;
                  font-weight: 400;
                  color: #7f7f7f;
                  line-height: 23rpx;
                  padding-top: 12rpx;
                  box-sizing: border-box;
                  overflow: scroll;
                  /* 超出部分隐藏 */
                  white-space: nowrap;
                  /*  text-overflow: ellipsis;*/
                  overflow: hidden;
                  /* 超出部分隐藏 */
                  white-space: nowrap;
                  /* 文本不换行 */
                  text-overflow: ellipsis;
                  /* 省略的文本用省略号表示 */
                }
              }
            }

            .direct {
              >.left {
                background: url("../../static/icon/quan1.2x.png") no-repeat;
                background-size: 100% 100%;
              }

              >.right {
                >.title>.type {
                  background: #f8ce57;
                }

                >.content>.btn button {
                  background: linear-gradient(143deg, #fad965 0%, #f3b235 100%);
                }
              }
            }

            .rate {
              >.left {
                background: url("../../static/icon/quan2.2x.png") no-repeat;
                background-size: 100% 100%;
              }

              >.right {
                >.title>.type {
                  background: #eb8573;
                }

                >.content>.btn button {
                  background: linear-gradient(143deg, #f4a796 0%, #e67462 100%);
                }
              }
            }

            .exchange {
              >.left {
                background: url("../../static/icon/quan3.2x.png") no-repeat;
                background-size: 100% 100%;

                >.amount,
                >.condition {
                  display: none;
                }

                >.exchangeName {
                  display: inline-block;
                  width: 150rpx;
                  margin: 0 auto;
                }
              }

              >.right {
                >.title>.type {
                  background: #19c79b;
                }

                >.content>.btn button {
                  background: linear-gradient(143deg, #21d9b4 0%, #0fb582 100%);
                }
              }
            }

            .expired {
              >.left {
                background-position: center;
                /** 居中*/
                background: url(../../static/icon/quan.png) no-repeat;
                // background-size:100% 100%;
                // background-repeat:no-repeat; /** 不重复*/
                // background-size:contain; /**等比例缩放*/
                // background-image: url('data:image/png;base64,[encoded data, 112684 characters]');

              }

              >.right {
                >.title>.type {
                  background: #bfbfbf;
                }

                >.content>.btn button {
                  display: none;
                }
              }
            }
          }
        }
      }
    }

  }
</style>
