<template>
  <div class="purchase-wrapper">
    <img v-show="isCorrect" class="status-img" src="../images/puchase/correct.png" />
    <img v-show="!isCorrect" class="status-img" src="../images/puchase/warning.png" />
    <div class="msg-content-wrapper">
      <p class="msg-content" v-html="msgContent"></p>
      <!-- 直接从商品过来的 -->
      <p v-if="!projectId" class="msg-content-2">订单详情页打开/下载云鹊医APP查看</p>
    </div>
    <Button v-show="projectId" @handlerClick="gotoProject"></Button>
    <Button v-if="!projectId" :isPlain="!!projectId" buttonText="去云鹊医APP" @handlerClick="download"></Button>
    
    <CourseDialog
      subContent='请在微信内完成支付，如果您已支付成功，请点击“已完成支付”按钮'
      confirmBtnText="已完成支付"
      needSubContent
      :isShowDialog="isShowDialog"
      @handlerAction="handlerAction"
    ></CourseDialog>

    <van-overlay :show="loading" @click="show = false" class="v-overlay">
      <div class="loading-wrapper" >
        <van-loading type="spinner" />
        <p class="text">{{projectId ? '课程解锁中' : '正在交易中'}} {{loadingTimes}}s</p>
      </div>
    </van-overlay>


  </div>
</template>
<script>
import { getWebPageUrl, getCookie } from "@/utils/index";
import CourseDialog from "@/components/course/course-dialog";
import Button from "@/components/business/button"
let intervalId = null;
export default {
  components: {
    Button,
    CourseDialog
  },
  data() {
    return {
      projectId: 1,
      orderId: '1595497912391728990',
      htmlTitle: "支付结果",
      isCorrect: true,
      // msgContent: "此项目已被其他学习卡绑定，您可以去绑定新的项目，或去云鹊医APP查看订单详情",
      msgContent: "已解锁，您可返回项目继续学习",
      loading: true,
      loadingTimes: 3,
      // 返回值data：0:订单进行中 1:支付并绑定成功 2:订单反馈延时，请稍后再试 3：支付失败，请重新购买 4:订单已被取消，请重新购买
      bindStatus: 0,
      showGoApp: true,
      hasShowed: false,
      isShowDialog: false,
      returnUrl: "",
    }
  },
  created() {
    let { projectId, orderId } = this.$route.query;
    this.projectId = projectId || 0;
    this.orderId = orderId || 0;
    this.returnUrl = localStorage.getItem('returnUrl');
    console.log('projectId', 'orderId', this.projectId, this.orderId, this.returnUrl);
    // 直接从商品过来的
    // if(!this.projectId) {
    //   this.msgContent = "购买成功";
    // }

    // 等待
    intervalId = setInterval( () => {
      if(this.loadingTimes <= 0) {
        intervalId && clearInterval(intervalId);
        // 从项目购买过来的
        if(this.projectId) {
          this.getBindCardStatus();
        // 直接从商品过来的
        } else {
          this.getStatusByOrderId();
        }
      } else {
        this.loadingTimes -= 1;
      }
    }, 1000)
  },
  mounted() {
    document.title = this.htmlTitle;    
  },
  methods: {

    // 弹框：手动点击“已完成支付”
    handlerAction(type) {
      this.isShowDialog = false;
      if(type == 1) {
        // if(this.projectId) {
        //   this.gotoProject();
        // } else {
        //   this.download();
        // }
      } else {
        if(this.projectId) {
          this.getBindCardStatus();
        } else {
          this.getStatusByOrderId();
        }        
      }
    },

    // 查询一次绑卡状态
    getBindCardStatus() {
      let _this = this;
      let param = {
        projectId: this.projectId,
        orderId: this.orderId,
        setEntry: true
      };
      this.GET(`cme/projectCard/status/1/${this.projectId}/${this.orderId}`, param).then(({ data }) => {
        this.loading = false;
        this.bindStatus = data;
        // 绑定成功
        if( data == 1 ) {
          this.msgContent = "已解锁，您可返回项目继续学习";
          this.isCorrect = true;
        } else {
          if(!this.hasShowed) {
            this.hasShowed = true;
            this.isShowDialog = true;
          }
          this.msgContent = "解锁延时，您可返回项目继续学习";
          this.isCorrect = false;
        }
      }).catch( e => {
        this.loading = false;
        this.msgContent = "解锁延时，您可返回项目继续学习";
        this.isCorrect = false;
        console.log("getBindCardStatus", "调用失败...");
      });
    },

    // 直接根据订单ID获取订单状态
    getStatusByOrderId() {
      let _this = this;
      let param = {
        orderId: this.orderId,
      };
      this.GET(`trade/center/order/query`, param).then(({ data }) => {
        this.loading = false;
        this.msgContent = "购买失败";
        this.isCorrect = false;
        // 订单状态: 订单状态：1待支付, 2支付中, 3支付失败, 4订单超时, 5支付成功, 6交易完成, 7交易关闭
        if( data.orderDto.status == 6 ) {
          this.msgContent = "购买成功";
          this.isCorrect = true;
        } else {
          if(!this.hasShowed) {
            this.hasShowed = true;
            this.isShowDialog = true;
          }          
        }
      }).catch( e => {
        this.loading = false;
        this.msgContent = "订单反馈延时，请前往云鹊医APP查看订单详情";
        this.isCorrect = false;
        console.log("getStatusByOrderId", "调用失败...");
      });
    },

    // 返回到项目详情页面
    gotoProject() {
      this.$sendBuriedData({
        component_tag: `889#88901`
      });
      this.returnUrl && location.replace(this.returnUrl);
    },

    // 下载
    download() {
      this.$sendBuriedData({
        component_tag: `889#88902`
      });
      window.location.href = "https://a.app.qq.com/o/simple.jsp?pkgname=com.picahealth.yunque";
    }
  },
}
</script>
<style lang="less" scoped>
.purchase-wrapper {
  padding-top: 60px;
  // display: flex;
  // flex-direction: column;
  text-align: center;
  .status-img {
    width: 60px;
    height: 60px;
  }
  .msg-content-wrapper {
    margin-bottom: 30px;
    .msg-content {
      margin: 0 20px 10px;
      color: #48494A;
      font-size: 16px;
      font-weight: 700;
      line-height: 1.5;
    }
    .msg-content-2 {
      color: #676869;
      font-size: 14px;
    }
  }
  .v-overlay {
    background-color: #fff;
    padding-top: 200px;
    .loading-wrapper {
      text-align: center;
      .text {
        margin-top: 12px;
        color: #A1A2A3;
        font-size: 14px;
      }
    }
  }
}
</style>