<template>
    <div class="trainplan_bm_ordersellerpay_pc_1"  id="wraps">
   <div class="container">
      <div class="row">
         <div class="col-lg-12 col-md-12 col-xm-12 col-xs-12">
            <div class="operation-step">
               <img ref="process" class="process" src="../../theme-chalk/src/images/buzhou-02.png" style="width:82%;" alt="">
               <ul>
                  <li>1、核对订单信息</li>
                  <li>2、提交并支付各订单</li>
                  <li >3、报名完成</li>
               </ul>
            </div>
            <div class="ordersellerpay-title">{{title}}</div>
            <!--<div class="ordersellerpay-info">
               <span class="sp1">订单号：<i>1111</i></span>
               <span class="sp2">订单状态：<i>2222</i></span>
            </div> -->
            <div class="common-table">
               <table v-for="(list,i) in payList" :key="i">
                  <thead>
                     <tr class="common-table-ordertitle">
                        <td colspan="3">订单号：{{list.sn}}
                          <span v-if="list.status=='1'">您的订单还剩<i>{{list | toDate}}</i><i :id="list.sn"></i>，请尽快完成支付！</span>
                        </td>
                     </tr>
                  </thead>
                  <tr>
                     <td width="20%">订单状态</td>
                     <td width="60%" class="textleft redtext" v-html="$status(list.status)"></td>
                     <td width="20%" rowspan="5" class="common-table-orderbtn">
                        <div v-if="list.status=='1'">
                            <span class="sp1">¥{{list.realPrice}}<i>元</i></span>
                            <span class="orangebtn"><a href="javascript:void(0)" @click="toPay(list)">去支付</a></span>
                        </div>
                        <div v-else-if="list.status=='2'">
                          <span class="sp1">¥{{list.realPrice}}<i>元</i></span>
                          <span class="sp3">订单已过期作废</span>
                          <!--<span class="sp4"><a href="javascript:void(0)" @click="payDetail(list.orderId)" class="trainplan_bm_ordersellerpay_pc_1_popbtn">查看支付详情</a></span> -->
                        </div>
                        <div v-else-if="list.status == '3'">
                          <span class="sp1">¥{{list.realPrice}}<i>元</i></span>
                          <span class="sp3">订单已支付</span>
                          <span class="sp4"><a href="javascript:void(0)" @click="payDetail(list.orderId)" class="trainplan_bm_ordersellerpay_pc_1_popbtn">查看支付详情</a></span>
                          <a href="javascript:void(0)"  @click="toCenter">请到个人中心完善信息及学习</a>
                        </div>
                        <div v-else-if="list.status=='6'">
                          <span class="sp1">¥{{list.realPrice}}<i>元</i></span>
                          <span class="sp3">订单已退单</span>
                          <!--<span class="sp4"><a href="javascript:void(0)" @click="payDetail(list.orderId)" class="trainplan_bm_ordersellerpay_pc_1_popbtn">查看支付详情</a></span>-->
                        </div>

                     </td>

                  </tr>
                  <tr>
                     <td>订单名称</td>
                     <td class="textleft">{{list.name}}</td>
                  </tr>
                  <tr>
                     <td>下单时间</td>
                     <td class="textleft">{{list.createDate}}</td>
                  </tr>
                  <tr>
                     <td>截止时间</td>
                     <td class="textleft">{{list.endTime}}</td>
                  </tr>
                  <tr>
                     <td>所属平台</td>
                     <td class="textleft">{{list.bsName}}</td>
                  </tr>
               </table>

            </div>
         </div>
      </div>
   </div>
   <!--以下弹窗-->
   <div class="trainplan_bm_ordersellerpay_pc_1_popbg common_popbg" v-if="show" >
      <div class="trainplan_bm_ordersellerpay_pc_1_pop common_pop" style="margin-top:16%;" ref="common_pop">
         <span class="common_pop_close" @click="show=false"></span>
         <span class="sp1">支付详情</span>
         <div class="trainplan_bm_ordersellerpay_pc_1_module">
            <span class="spp1"><i>订单编号：</i>{{orderDetail.sn}}</span>
            <span class="spp2"><i>支付金额：</i>¥{{orderDetail.realPrice}}元</span>
            <span class="spp1"><i>支付方式：</i>{{orderDetail.paySource | $paySource }}</span>
         </div>
         <div class="trainplan_bm_ordersellerpay_pc_1_module">
            <span class="spp1"><i>订单名称：</i>{{orderDetail.name}}</span>
            <span class="spp1"><i>下单时间：</i>{{orderDetail.createDate}}</span>
            <span class="spp1"><i>支付时间：</i>{{orderDetail.payDate}}</span>
            <span class="spp1"><i>所属平台：</i>{{orderDetail.bsName}}</span>
         </div>
      </div>
   </div>


   <div class="trainplan_bm_ordersellerpay_pc_1_popbg common_popbg" v-if="dialogVisible" >
      <div class="trainplan_bm_ordersellerpay_pc_1_pop common_pop" style="margin-top:16%;" ref="common_pop">
         <span class="common_pop_close" @click="dialogVisible=false"></span>
         <span class="sp1" style="text-align:center;font-weight:bold;    padding-bottom: 15px;
    border-bottom: 1px solid #e1e1e1">重要提示</span>
         <div class="trainplan_bm_ordersellerpay_pc_1_module" style="font-size:16px;">
            <h3 style="
            font-size: 20px;
          line-height: 36px;
          text-indent: 2em;
          font-weight: 500;">
              本次支付将跳转到课程提供机构平台支付，请在支付成功后，回到本页面，查看订单更新状态，在所有订单都支付完成后，
            会进入第三步，显示报名成功页面。请在报名成功后进入您的课表，开始学习！

            </h3>
         </div>
         <div style="text-align:center;margin-top:40px;position:relative;left:5px;">
           <span class="orangebtn" style="display:inline;padding-right:10px;"><a  style="background:#23427a;" href="javascript:void(0)" @click="dialogVisible=false">支付成功</a></span>
            <span class="orangebtn" style="display:inline;"><a href="javascript:void(0)" @click="toPayGo()">跳转支付</a></span>
         </div>


      </div>
   </div>





</div>
</template>

<script>
import formMixin from "../../../src/mixins/formMixin";
import lenye_base from "lenye_base";
import $ from "fy-kit";
import msg from "../../message";
var img = require("../../theme-chalk/src/images/buzhou-03.png");
export default {
  name: "ElPay",
  mixins: [formMixin],
  props: {
    placeholder: {
      type: String,
      default: "总访问量a"
    },
    hasWx: {
      type: Boolean,
      default: true
    }
  },
  filters: {
    toStr(value) {
      var arr = [];
      if (value) {
        value.forEach((list, i) => {
          arr.push(list.split("_")[1]);
        });
      }
      return arr.toString();
    },
    toDate(date) {
      $.date.countdown(date.endTime, res => {
        $._.default("#" + date.sn).html(
          res[0] + "天" + res[1] + "小时" + res[2] + "分钟" + res[3] + "秒"
        );
      });
    },
    $paySource(value) {
      var result = "";
      switch (Number(value)) {
        case 1:
          result = "银行付款";
          break;
        case 2:
          result = "现场支付";
          break;
        case 3:
          result = "在线支付";
          break;
      }
      return result;
    }
  },
  data() {
    return {
      show: false,
      payList: [],
      orderDetail: {},
      title: "",
      token:'',
      dialogVisible: false,
      ipayList:{},
    };
  },
  watch: {},

  mounted() {
    if(localStorage.menuList){
      this.title = JSON.parse(localStorage.menuList)[0].proName;
    }else{
      msg.warning("操作不合法！");
    }

    this.init();

    this.getoken();
  },
  methods: {
     handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
     toCenter() {
      $.util
        .ajax(
          lenye_base.base_data.getapiUrl() +
            "/base-service/api2/custUserIdentity/queryUserIdentities.do",
          lenye_base.base_data.getformatting({})
        )
        .then(res => {
          if (res.success === "1") {
            // this.datas = res.data;
            if (res.data && res.data[0] && res.data[0].idtCode) {
              if (res.data[0].idtCode == "company") {
                window.location.href = "/comcenter";
              } else {
                window.location.href = "/merchantcenter";
              }
            } else {
              window.location.href = "/personcenter";
            }
          } else {
            msg.error(res.message);
          }
        });
    },
    toPay(list){
      this.dialogVisible = true;
      this.ipayList = list;

    },
    toPayGo() {
      //msg.warning("暂未开通支付渠道！");
      var list = this.ipayList;
       $.util
          .ajax(
            lenye_base.base_data.getapiUrl() +
              "/base-service/api2/thirdBusinessMng/queryById.do",
            lenye_base.base_data.getformatting({
              bsId:list.bsId
            })
          )
          .then(res => {
            if (res.success == "1") {
             // res.data.callbaclUrl01
             // var url =  "http://baidu.com?orderId={orderId}&token={token}";
             var url = res.data.callbaclUrl01;
              // var newArr = url.split("{orderId}");
              // window.location.href =  newArr[0]+list.orderId + newArr[1].split("{token}")[0]+this.token;
              if(url){
                 window.open(url.replace('{orderId}',list.orderId).replace('{token}',this.token));
              }else {
                 msg.error('无支付地址');
              }
            } else {
              msg.error(res.message);
            }
          });

    },
    getoken(){
       this.token = lenye_base.user_data.getuserData().token;
    },
    isPay(orderIds) {

      var hasPay = setInterval(() => {
        $.util
          .ajax(
            lenye_base.base_data.getapiUrl() +
              "/orderform-service/api2/ordOrderform/queryMultiOrderStatus.do",
            lenye_base.base_data.getformatting({
              orderIds
            })
          )
          .then(res => {
            if (res.success == "1") {
              if ($.array.isArrById(res.data, "status", 0)) {
                this.orderList(1);
                msg.success("报名完成！");
                clearInterval(hasPay);
                $._.default(".process").attr("src", img);
                this.dialogVisible = false;
              }else{
                var storage = $.util.storage('isPays').get().getValue();
                 var isPays = [];
                 res.data.forEach((list,i)=>{
                  if(list.status=='0'){
                      isPays.push(list.status);
                  }
                })
                if(storage != isPays.toString()){
                  $.util.storage('isPays').set(isPays.toString());
                  this.orderList(1);
                }
              }

            } else {
              msg.error(res.message);
            }
          });
      }, 3000);
    },
    $status(value) {
      var result;
      switch (Number(value)) {
        case 1:
          result = '<span style="color:red;">待付订单</span>';
          break;
        case 2:
          result = '<span style="color:gray;">过期作废</span>';
          break;
        case 3:
          result = '<span style="color:green;">完成订单</span>';
          break;
        case 6:
          result = '<span style="color:orange;">退单</span>';
          break;
      }
      return result;
    },
    payDetail(orderId) {
      //var that = this;
      $.util
        .ajax(
          lenye_base.base_data.getapiUrl() +
            "/orderform-service/api2/ordOrderform/queryById.do",
          lenye_base.base_data.getformatting({
            orderId
          })
        )
        .then(res => {
          if (res.success == "1") {
            this.orderDetail = res.data;
            this.show = true;
          } else {
            msg.error(res.message);
          }
        });
    },
    init() {
      this.orderList();
    },
    orderList(num) {
      $.util
        .ajax(
          lenye_base.base_data.getapiUrl() +
            "/orderform-service/api2/ordOrderform/queryClazzOrder.do",
          lenye_base.base_data.getformatting({
            czId: localStorage.czId
            //czId: "09f1d528c7a7488f8777a15ca2f43340"
          })
        )
        .then(res => {
          if (res.success == "1") {
            //var getOrerIds = this.getOrerIds
            if (num != "1") {
              this.isPay($.array.subArrToStr(res.data, "orderId"));
            }

            this.payList = res.data;
          } else {
            msg.error(res.message);
          }
        });
    }
  }
};
</script>
