<template>
  <div class="home">
    <nav-bar/>
    <van-cell
        v-for="item in list"
        :key="item.SerialFlowNo"
        :title="item.BillName"
        :value="'¥' + item.BillMoney"
        :label="item.SetDepartName + '  ' + item.BillTime"
    />
    <van-button
        class="btn"
        color="#166bcc"
        :loading="loading" type="primary"
        loading-text="处理中..."
        @click="onConfirm">支付
    </van-button>
  </div>
</template>

<script>
// @ is an alias to /src
import {apiopDjcx, apiopDjqr} from "@/request/api.js";
import {Toast} from "vant";

export default {
  components: {},
  data() {
    return {
      active: 0,
      title: "",
      flag: false,
      checked: false,
      detail: {},
      PatientId: '',
      SerialFlowNo: '',
      list: [],
      Money: '',
      jsonData: '',
      loading: false,
    };
  },
  mounted() {
    this.title = this.$route.meta.title;
    this.PatientId = this.$route.query.PatientId;
    this.SerialFlowNo = this.$route.query.SerialFlowNo;
    this.getData();
  },
  methods: {
    // 获取详情
    getData() {
      let that = this;
      let formdata = {
        PatientId: that.PatientId,
        QueryType: "2",
        OrderNo: that.SerialFlowNo,
      };
      apiopDjcx(formdata).then((res) => {
        console.log(res.data);
        let jsonObj = this.$x2js.xml2js(res.data);
        console.log(jsonObj);
        let jsonObj2 = this.$x2js.xml2js(
            jsonObj.Envelope.Body.MOP_OutpBillstoPayQueryResponse
                .MOP_OutpBillstoPayQueryResult
        );
        console.log(jsonObj2);
        if (jsonObj2.response.returnresult.returncode == "1") {
          console.log(jsonObj2.response.data);
          that.list = [];
          that.jsonData = jsonObj2.response.data;
          if (jsonObj2.response.data.data_row.length > 1) {
            for (var i = 0; i < jsonObj2.response.data.data_row.length; i++) {
              that.list.push(jsonObj2.response.data.data_row[i]);
              that.Money = parseFloat(that.Money).toFixed(2) + parseFloat(jsonObj2.response.data.data_row[i].BillMoney).toFixed(2)
            }
          } else {
            that.list.push(jsonObj2.response.data.data_row)
            that.Money = parseFloat(jsonObj2.response.data.data_row.BillMoney).toFixed(2)
          }
        }
      });
    },
    onConfirm() {
      let _this = this;
      if (_this.Money == '') {
        Toast("待缴费金额为0");
        return;
      }

      let formdata = {
        patientid: _this.PatientId,
        jsonData: JSON.stringify(_this.jsonData),
      };
      let cxformdata = {
        PatientId: _this.PatientId,
        QueryType: "2",
        OrderNo: _this.SerialFlowNo,
      };
      //查询缴费单据，确认单据存在
      _this.loading = true;
      apiopDjcx(cxformdata).then((res) => {
        let jsonObj = this.$x2js.xml2js(res.data);
        let jsonObj2 = this.$x2js.xml2js(
            jsonObj.Envelope.Body.MOP_OutpBillstoPayQueryResponse
                .MOP_OutpBillstoPayQueryResult
        );
        if (jsonObj2.response.returnresult.returncode == "1" && jsonObj2.response.data.data_row != null) {
          apiopDjqr(formdata).then((ref) => {
            console.log("响应")
            console.log(ref)
            if (ref.code === 200) {//后端响应成功，调起支付
              WeixinJSBridge.invoke(
                  "getBrandWCPayRequest",
                  {
                    appId: ref.data.appId, // 微信的appid
                    timeStamp: ref.data.timeStamp, //时间戳
                    nonceStr: ref.data.nonceStr, //随机串
                    package: ref.data.package,  // 订单号
                    signType: "MD5", //微信签名方式：
                    paySign: ref.data.paySign //微信签名
                  },
                  function (res) {
                    // alert("res is " + res)
                    if (res.err_msg == "get_brand_wcpay_request:ok") {
                      // 使用以上方式判断前端返回,微信团队郑重提示：
                      //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                      //付款成功，验签完成，
                      setTimeout(() => {
                        Toast("支付成功")
                        // alert("pay success");
                        // _this.$router.push({path: "/Yylb", query: {}});
                        // _this.$router.push({ path: "/Yycg", query: {id:res.data,type:z} });
                        sessionStorage.removeItem("yuyue");
                        //sessionStorage.removeItem("card"); //joy
                      }, 300);
                      _this.loading = false;
                      // alert("pay success");
                      Toast("支付成功")
                    } else {
                      Toast("支付失败")
                      // alert("pay failed");
                      that.$message.error("支付失败，请重新支付");
                      _this.loading = false;
                    }
                  }
              );
              _this.loading = false;
            }
            // {
            //   _this.$router.back(-1);
            // } else if (res.data.code == 500)//5分钟未查到支付成功
            // {
            //   //Toast("未收到上次支付成功信息，请5分钟后重试");
            //   Toast({
            //     message: "未收到上次支付成功信息，请5分钟后重试",
            //     duration: 3000,
            //   });
            //   setTimeout(() => {
            //     _this.$router.back(-1);
            //   }, 3000);
            // } else if (res.data.code == 200) {
            //   window.location.href =
            //       _this.httpurl + "/pay.jsp?id=" + res.data.result;
            // }
          }).catch(err => {
            _this.loading = false;
            Toast("通讯异常，请稍后重试");
          });
        } else {
          Toast("待缴费清单已更新，请刷新重试");
          setTimeout(() => {
            _this.$router.back(-1);
          }, 3000);
        }
      }).catch(err => {
        _this.loading = false;
        Toast("通讯异常，请稍后重试");
      });

    },

  },
};
</script>


<style scoped lang="scss">
.bj {
  background: #f5f5f5;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: -1;
}

.jianjie {
  background: #fff;
  box-sizing: border-box;
  padding: 30px;
  display: flex;
  border-bottom: 20px solid #f5f5f5;

  h2 img {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    margin-right: 20px;
  }

  h3 {
    color: #333;
    font-size: 30px;
    position: relative;
    width: calc(100% - 150px);

    span {
      font-size: 26px;
      padding-top: 10px;
      display: block;
    }

    p {
      font-size: 24px;
      color: #999;
      display: block;
      padding-top: 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    em {
      width: 86px;
      height: 38px;
      line-height: 38px;
      background: linear-gradient(-90deg, #ff464f, #ff6e77);
      border-radius: 16px;
      position: absolute;
      right: 0px;
      top: 0px;
      font-size: 20px;
      text-align: center;
      color: #fff;
    }
  }

  h3.on em {
    background: #999999;
  }
}

.box1 {
  background: #fff;
  padding: 40px 0px;
  margin-bottom: 10px;
}

.box1 h2 {
  font-size: 32px;
  color: #333;
  padding-bottom: 20px;
}

.box1 p {
  color: #333;
  font-size: 28px;
  display: block;
  padding-bottom: 20px;
}

.box1 img {
  max-width: 100%;
  height: auto;
}

.btn {
  width: 90%;
  position: relative;
  margin: 5%;
  margin-top: 3rem;
  border-radius: 0.375rem;
}
</style>
