<template>
  <div>
    <div v-if="isSuccess" class="card">
      <div class="info">
        <cr-image
          width="100px"
          height="100px"
          class="info__image"
          src="https://img.lkbang.net/xcx/pay-success.png"
        />
        <div class="info__desc">
          <p class="info__text">订单支付成功!</p>
          <p v-if="money" class="info__text info__money">实付¥{{ money }}</p>
          <p v-if="freeAmount > 0" class="info__text info__free">已优惠¥{{ freeAmount }}</p>
        </div>
      </div>
      <p class="tips">
        拼团成功即可退款0元拿，拼团失败立即退款
      </p>
      <div class="actions">
        <cr-button shape="circle" type="default" @click="goPage(1)">我的拼团</cr-button>
        <cr-button shape="circle" class="actions__back" :plain="true" type="primary" @click="share"
          >邀请好友</cr-button
        >
      </div>
    </div>
    <div v-else class="card">
      <div class="info">
        <cr-image
          width="100px"
          height="100px"
          class="info__image"
          src="https://img.lkbang.net/xcx/pay-fail.png"
        />
        <p class="info__text">订单支付失败!</p>
      </div>
      <p class="tips">
        {{ reason }}
      </p>
      <cr-button type="primary" shape="circle" class="info_button" @click="goPage(0)"
        >重新支付</cr-button
      >
    </div>

    <div class="activity">
      <cr-image src="@/assets/images/groupBuy/activity.png" />
    </div>

    <div v-if="isSuccess && couponList.length" class="coupon-box">
      <p class="coupon-tip">本单已享以下权益</p>
      <div class="coupon-wrap">
        <CouponCard
          v-for="coupon in couponList"
          :key="coupon.id"
          :value="coupon"
          class="coupon-item"
          @click="goViewCouponDetail"
        />
      </div>
    </div>
    <Goods />
    <sharePic ref="sharePic" :share-pic-data="sharePicData" @outputPicUrl="outputPicUrl" />
  </div>
</template>
<script>
import { goUrlExtends } from './extends';
import CouponCard from './components/CouponCard.vue';
import { getCouponList } from '@/api/pay.api';
import groupBuyApi from '@/api/groupBuy';
import Goods from '@/components/RecoGoods/RecoGoods.vue';
import { isApp, isWxMp } from '@/service/validation.service';
import { EventBus } from '@/service/utils.service';
import sharePic from '@/components/sharePic';
export default {
  components: {
    Goods,
    CouponCard,
    sharePic
  },
  extends: goUrlExtends,
  data() {
    return {
      money: '00.00',
      orderNo: null,
      isSuccess: false,
      freeAmount: 0,
      payStatus: '',
      couponList: [],
      payStatusName: '',
      payMethodName: '',
      payType: '',
      sharePicData: {}
    };
  },
  created() {
    const { orderNo, reason, finalAmt, freeAmount, payType } = this.$route.query;
    const { success } = this.$route.meta;
    this.payType = payType || '';
    this.money = finalAmt || '';
    this.orderNo = orderNo;
    this.reason = reason || '';
    this.isSuccess = success || false;
    this.freeAmount = freeAmount || '';
    this.payStatus = success ? '订单支付成功' : '订单支付失败';
    this.payStatusName = success ? '支付成功' : '支付失败';
    this.getCouponList();
    this.setShareData();
  },
  mounted() {
    EventBus.$on('shareClickItem', ({ ev }) => {
      if (ev === 'pic') {
        this.createPic();
      }
    });
  },
  beforeDestroy() {
    EventBus.$off('shareClickItem');
  },
  methods: {
    outputPicUrl(res) {
      console.log(res);
    },
    async setShareData() {
      const [res] = await groupBuyApi.getGroupShareInfo({
        orderNo: this.orderNo
      });
      this.sharePicData = res;
    },
    createPic() {
      console.log(typeof this.$refs.sharePic.createAndUploadPic);
      this.$refs.sharePic.createAndUploadPic();
    },
    share() {
      // 分享
      this.$store.dispatch('goods_share_open');
    },
    // goPay() {
    //   this.$track?.registeredEvents('h5_RechargeResultPageClick', {
    //     commodity_id: this.skuID,
    //     order_number: this.orderNo,
    //     pay_method: this.payMethodName,
    //     pay_status: this.payStatusName,
    //     buttons_name: '重新支付'
    //   });
    //   this.$router.replace({ name: 'pay', query: { orderNo: this.orderNo } });
    // },
    goPage(type) {
      if (type == 1) {
        this.$router.replace({ path: '/orderList/0' });
      } else {
        if (isWxMp) {
          this.nativeBridge.openNewUrl({
            newUrl: `/pages/pay/index?orderNo=${this.orderNo}&from=groupbuy`
          });
        } else if (isApp) {
          this.$router.push({ path: `/pay?orderNo=${this.orderNo}` });
        } else {
          return; // todo 处理纯h5情况
          // this.$dialog({
          //   message: '请在App或小程序中参与活动~',
          //   title: '',
          //   showCancelButton: false,
          //   confirmButtonText: '我知道了'
          // });
        }
      }
    },
    async getCouponList() {
      const [data] = await getCouponList({ orderNo: this.orderNo, paySuccess: true });
      if (data) {
        this.couponList = data.couponList || [];
      }
    },
    goViewCouponDetail() {
      this.$router.push('/');
    }
  }
};
</script>
<style lang="less" scoped>
.card {
  margin: @padding-sm;
  background-color: @white;
  border-radius: @border-radius-sm;
  padding: 28px @padding-sm @padding-sm @padding-sm;

  .info {
    display: flex;
    justify-content: center;
    align-items: center;

    &__image {
      width: 100px;
      height: 100px;
    }

    &__text {
      .text-16;
      margin-left: @padding-md;
    }

    &__desc {
      display: flex;
      flex-direction: column;
    }

    &__money {
      margin-top: @padding-xs;
    }
    &__free {
      .text-13;
      margin-top: @padding-xs;
      color: @font-color-light;
    }
  }

  .tips {
    .text-12;
    text-align: center;
    margin-top: @padding-lg;
    color: @font-color-light;
  }

  .actions {
    display: flex;
    flex-direction: row;
    margin-top: @padding-lg;
    justify-content: space-between;
    &__back {
      color: @cherry-color-error;
      border: 1px solid @cherry-color-error;
    }

    &__order {
      @primary-bg();
      margin-left: @padding-sm;
    }

    button {
      // flex: 1;
      .text-16;
      width: 161px;
    }
  }
  .info_button {
    width: 100%;
  }
}
.activity {
  margin: @padding-sm;
  height: 64px;
}

.coupon-box {
  box-sizing: border-box;
  margin: @padding-sm;
  background-color: @white;
  border-radius: @border-radius-sm;
  padding: @padding-sm;
  height: 150px;
  overflow: hidden;
}
.coupon-tip {
  .text-14;
  font-family: PingFangSC-Medium;
  .text-14;
  color: #ff4735;
  letter-spacing: 0;
  margin-bottom: @padding-unit;
}
.coupon-wrap {
  display: flex;
  flex-direction: row;
  height: 120px;
  width: 327px;
  padding: 0;
  overflow: hidden;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.coupon-item {
  display: inline-flex;
}
.goods {
  background-color: #fff;
  box-sizing: border-box;
  // width: 100%;
  margin: @padding-sm;
  padding: @padding-sm;
}
</style>
