<template>
  <div v-if="isShowIntegral || isShowGifts" :style="{ 'padding-top': paddingTop, 'padding-bottom': paddingBottom }">
    <div class="title">恭喜你获得</div>
    <div class="pay-with-gifts__wrapper">
      <template v-if="isShowGifts">
        <!-- 推广类型: (0: 送优惠券 1: 抽奖大转盘 2: 优惠码) -->
        <template v-if="giftsInfo.getPayWithCourtesyInfoForShopRespDTO.promotionType == 0">
          <div @click="handleUseCoupon">
            <!-- 默认图片 -->
            <template v-if="giftsInfo.getPayWithCourtesyInfoForShopRespDTO.picType == 2">
              <image mode="widthFix" src="http://cdn.mayi888.com/public/png/baf48832-6d17-4af9-88bb-428dbd9332af.png"></image>
            </template>
            <!-- 自定义图片 -->
            <template v-else>
              <image mode="widthFix" :src="giftsInfo.getPayWithCourtesyInfoForShopRespDTO.picUrl" alt></image>
            </template>
          </div>
        </template>
        <template v-else-if="giftsInfo.getPayWithCourtesyInfoForShopRespDTO.promotionType == 1">
          <div @click="handleLottery">
            <!-- 默认图片 -->
            <template v-if="giftsInfo.getPayWithCourtesyInfoForShopRespDTO.picType == 2">
              <image mode="widthFix" src="http://test-bucket-ant.oss-cn-shanghai.aliyuncs.com/product/png/2a61b201-4fe3-406b-9d76-9ec606ed08c0.png"></image>
            </template>
            <!-- 自定义图片 -->
            <template v-else>
              <image mode="widthFix" :src="giftsInfo.getPayWithCourtesyInfoForShopRespDTO.picUrl" alt></image>
            </template>
          </div>
        </template>
      </template>
      <div class="points-wrapper flex" v-if="isShowIntegral">
        <image class="image" src="http://cdn.mayi888.com/public/png/4eef96f4-a6be-4d13-9b5e-60577d289e08.png"></image>
        <div class="flex center">
          <div class="points-content">+ {{ giftsInfo.integral }}积分</div>
          <div class="tip">海量积分好礼等你来兑</div>
        </div>
        <div class="points-btn" @click="handleToPoint">去兑换</div>
      </div>
    </div>
  </div>
</template>

<script>
  import order from "@/api/order";

  const app = getApp();
  export default {
    name: "pay-with-gifts",
    props: {
      datas: {
        type: Object,
        default: () => {
          return {};
        },
      },
      orderDetail: {
        type: Object,
        default: () => {
          return {};
        },
      },
      totalMoney: {
        type: Number,
        default: 0,
      },
    },
    data() {
      return {
        isShowIntegral: false,
        isShowGifts: false,
        _orderDetail: {},
        giftsInfo: [],
        getPayWithCourtesyInfoForShopRespDTO: {},
      }
    },
    watch: {
      orderDetail: {
        handler(val) {
          if (val && Object.keys(val).length > 0) {
            this._orderDetail = val;
            this.getPayWithCourtesyInfoForShop();
          }
        },
        immediate: true
      }
    },
    computed: {
      paddingTop() {
        return this.datas.componentData["paddingTop"] + "px";
      },
      paddingBottom() {
        return this.datas.componentData["paddingBottom"] + "px";
      },
    },
    methods: {
      // 领取优惠券
      handleUseCoupon() {
        app.$themeToLink({ type: 1, link: '/personalCenter/coupon/myCoupon' })
      },
      // 积分抽奖
      handleLottery() {
        app.$themeToLink({
          type: 1,
          link: `/turntable?type=payWithGifts&orderSn=${this.orderDetail.orderSn}&turntableCode=${this.giftsInfo.getPayWithCourtesyInfoForShopRespDTO.promotionContent}&payWithCcourtesyId=${this.giftsInfo.getPayWithCourtesyInfoForShopRespDTO.activityid}`
        })
      },
      // 去兑换
      handleToPoint() {
        app.$themeToLink({ type: 1, link: '/pointShop/pointCenter' })
      },
      
      // 获取礼物信息
      async getPayWithCourtesyInfoForShop() {
        // 需要初始化状态
        this.isShowIntegral = false;
        this.isShowGifts = false;
        const goodsIds = [];
        this._orderDetail.orderItems.forEach(item => {
          // 赠品不参与计算
          if (item.giftFlag == 0) {
            goodsIds.push(Number(item.goodsId));
          }
        })
        const data = {
          orderSn: this._orderDetail.orderSn,
          goodsIds,
          amountMoney: this.totalMoney,
          orgId: this._orderDetail.placeOrderOrgId
        }
        const res = await order.getPayWithCourtesyInfoForShop(data);
        if (res.data.code == 200) {
          this.giftsInfo = res.data.data;
          // 如果不存在数据则不显示
          if (this.giftsInfo.integral && this.giftsInfo.integral > 0) {
            this.isShowIntegral = true;
          }
          const info = this.giftsInfo.getPayWithCourtesyInfoForShopRespDTO;
          if (info && info.flagJoinPayWithCourtesy == 0 && (info.payWithCourtesyIntegralRedemptionPageRespDTO || info.detailCouponInfoResponseDTO)) {
            this.isShowGifts = true;
            this.savePayWithCourtesyIntegral();
          }
        }
      },
      // 支付有礼保存积分
      async savePayWithCourtesyIntegral() {
        const data = {
          orderSn: this._orderDetail.orderSn, // 订单编号
          payWithCourtesyId: this.giftsInfo.getPayWithCourtesyInfoForShopRespDTO.activityid, // 支付有礼 id
          payWithCcourtesyIntegral: 0,
        }
        await order.save_pay_with_courtesy_integral(data);
      }
    },
  }
</script>

<style lang="scss" scoped>
.title {
  color: #666;
  font-size: 13px;
  padding: 8px;
  text-align: center;
}

.pay-with-gifts__wrapper {
  padding: 0 12px;
  
  image {
    width: 100%;
  }
  
  .image {
    width: 88px;
    height: 88px;
  }
  
  .points-wrapper {
    margin-top: 8px;
    border-radius: 8px;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    
    .center {
      align-self: normal;
      margin: 18px auto 18px 8px;
      flex-direction: column;
      justify-content: space-between;
      
      .points-content {
        font-size: 14px;
        color: #C72A30;
      }
      
      .tip {
        font-size: 12px;
        color: rgba(0, 0, 0, 0.4);
      }
    }
    
    .points-btn {
      font-size: 12px;
      color: #C9353F;
      padding: 2px 8px;
      margin-right: 16px;
      border-radius: 4px;
      border: 1px solid #C9353F;
    }
  }
}
</style>