<template>
  <sail-page type="loading-view" title="账单详情">
   <div slot="content" class="bill-wrapper">
    <van-nav-bar
        title="账单详情"
        left-arrow
        @click-left="back"
      />
         <BillCard isAllBill :data="userBillDetailInfo?userBillDetailInfo:''" style="margin-top: 20px;"/>
           <div class="full-bill" v-if="userBillDetailInfo.businessStatus == 1">
             <div class="full-bill_content">
               <div class="activity-pay">
                  <p class="activity-pay_txt">付款方式：</p>
                  <cube-radio-group v-model="payMethod" :options="payOptions" :hollow-style="true" />
               </div>
             </div>
           </div>
           <div class="full-bill_footer" v-if="userBillDetailInfo.businessStatus == 1">
             <billDetailFrame/>
           </div>
           <van-submit-bar class="gradient-green" 
                 v-if="userBillDetailInfo.businessStatus == 1"
                 :price="((userBillDetailInfo.countPropertyFee?userBillDetailInfo.countPropertyFee:0)*100 +(userBillDetailInfo.countBroadbandFee?userBillDetailInfo.countBroadbandFee:0)*100+ (userBillDetailInfo.countDeviceFee?userBillDetailInfo.countDeviceFee:0)*100 + (userBillDetailInfo.countRent?userBillDetailInfo.countRent:0)*100+(userBillDetailInfo.depositFee?userBillDetailInfo.depositFee:0)*100+(userBillDetailInfo.overdueFee?userBillDetailInfo.overdueFee:0)*100 - couponPrice*100 < 0?0:(userBillDetailInfo.countPropertyFee?userBillDetailInfo.countPropertyFee:0)*100 +(userBillDetailInfo.countBroadbandFee?userBillDetailInfo.countBroadbandFee:0)*100+ (userBillDetailInfo.countDeviceFee?userBillDetailInfo.countDeviceFee:0)*100 + (userBillDetailInfo.countRent?userBillDetailInfo.countRent:0)*100+(userBillDetailInfo.depositFee?userBillDetailInfo.depositFee:0)*100+(userBillDetailInfo.overdueFee?userBillDetailInfo.overdueFee:0)*100 - couponPrice*100)"
                 label="金额:"
                 :loading="loading"
                 button-text="立即缴费"
                 @submit="onSubmit"
               />
       </div>
  </sail-page>
</template>

<script>

import sailPage from "@/components/sail-page.vue";
import BillCard from "@/common/widget/billCard.vue";
import billDetailFrame from "@/common/widget/billDetailFrame.vue";
import {mapState} from "vuex";
export default {
  components: {
    sailPage,
    BillCard,
    billDetailFrame
  },
  computed:{
    ...mapState({
      userBillDetailInfo:state => state.myBillModule.userBillDetailInfo,
      couponPrice:state => state.myBillModule.couponPrice,
      payForm:state => state.myBillModule.payForm,
      newPayForm:state => state.myBillModule.newPayForm 
    })
  },
  asyncData({store,route}) {
    let billId = route.params.id;
    let promise1 = store.dispatch("myBillModule/findUserBillDetail",{
      billId
    }).then(res => {

    });
    let promise2 = store.dispatch("couponModule/getMyCouponInfo",{
      pn:1,
      pageSixe:1000,
      isSelect:1
    }).then(res=> {
      //
      if(res) {
        store.commit("couponModule/SET_USE_COUPON_INFO",res.data.data.list);
      }
    });
    let promise3 = store.commit("myBillModule/CLEAN_COUPONPRICE");
    return Promise.all([promise1,promise2,promise3]).then(function(value) {

    }); 
  },
  data: function(){
    return {
      message: "",
      value: 1,
      payMethod: "wePay",
      loading:false,
      payOptions: [
        {
          label: "微信",
          value: "wePay"
        },
        // {
        //   label: '支付宝',
        //   value: 'aliPay'
        // }
      ]
    }; 
  },
  methods: {
    onSubmit() {
      //
      this.loading = true;
      if(JSON.stringify(this.userBillDetailInfo) !== "{}"){
        let actualgetMoney = parseFloat((this.userBillDetailInfo.countPropertyFee + this.userBillDetailInfo.countDeviceFee+this.userBillDetailInfo.countBroadbandFee + this.userBillDetailInfo.countRent+this.userBillDetailInfo.depositFee+this.userBillDetailInfo.overdueFee - this.couponPrice).toFixed(2)) <= 0 ? 0 : parseFloat((this.userBillDetailInfo.countPropertyFee + this.userBillDetailInfo.countDeviceFee+this.userBillDetailInfo.countBroadbandFee +this.userBillDetailInfo.countRent+this.userBillDetailInfo.depositFee+this.userBillDetailInfo.overdueFee - this.couponPrice).toFixed(2));
        this.$store.commit("myBillModule/SET_ACTUALGETMONEY", actualgetMoney);       
        this.newPayForm.businessId = this.userBillDetailInfo.liveId;
        this.newPayForm.couponId = this.payForm.couponId;
        this.newPayForm.orderAmount = actualgetMoney;
        this.newPayForm.orderTitle = "账单缴费";
        if(this.userBillDetailInfo.depositFee){
          this.newPayForm.orderType = "7";
          this.newPayForm.billId = null;
        }else{
          this.newPayForm.orderType = "3";
          this.newPayForm.billId = this.userBillDetailInfo.id;
        }         
        this.newPayForm.remark = "";                           
        // 
        // return 
        if(this.userBillDetailInfo.countPropertyFee +this.userBillDetailInfo.countBroadbandFee + this.userBillDetailInfo.countDeviceFee + this.userBillDetailInfo.countRent+this.userBillDetailInfo.depositFee+this.userBillDetailInfo.overdueFee - this.couponPrice <= 0) {
          this.$store.dispatch("myBillModule/payBillPriceIsZero").then(res => {
            //
            this.loading = false;
            Toast.success("操作成功");
            this.$router.push({path:"/billDetails/"+res.data.data.id});
            //this.$store.commit('myBillModule/SET_USER_BILL_DETAIL_INFO', res.data.data) 
                  
          });

        }else {
          this.$store.dispatch("myBillModule/payBillNewByWx",
            this.newPayForm
          ).then(res=>{
            if(res.data.code === 10000){
              location.href = res.data.data.ccbPay;
            }else{
              Toast.fail(res.data.msg);
              return;
            }
          });
          // this.$store.dispatch('myBillModule/payMyBill').then(res => {
          //      this.loading = false

          //      location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxbc03a72497d53424&redirect_uri=http%3a%2f%2fc.sailapartment.com%2fwx%2fwxuser.html&response_type=code&scope=snsapi_base&state=${res.data.data}&connect_redirect=1#wechat_redirect`
                 
          // })
        }
        //this.loading = false;
           
      }else {
        this.loading = false;
        Toast.fail("你当前无订单，无需进行缴费支付操作！");
        return;
      }
      //
        
    },
    back() {
      //let id = Locstore("userBillDetailInfo").id;
      this.$router.push("/allBillList");
    },
  }
};
</script>
<style lang="less">
   @nice-bold: #222222;
   @nice-red: #FF2929;
   @nice-gray: #747474;
   .bill-wrapper {
      .van-submit-bar__price span {
        font-weight: bold;
      }
      .van-submit-bar__price {
        color: @nice-gray;
        text-align: left;
        font-size: 15px;
        margin-left: 18%;
      }
      .van-submit-bar .van-button {
        width: 140px;
      }
      .van-submit-bar__price-integer, .van-submit-bar__price-decimal {
        color: @nice-red;
        font-weight: bold;
      }
      .van-submit-bar__price-integer {
        padding-left: 15px;
      }
      .van-button--danger {
         background: linear-gradient(to right, #5FCEA1, #2BAA76);
      }
   }
</style>
<style lang="less" scoped>
  .bill-wrapper {
    padding-bottom: 30vh;
  }
  .full-bill {
    min-height: 150px;
    .full-bill_header {
      margin-top: 15px;
    }
    .header_words {
      font-size: 12px;
      color: red;
      text-align: left;
      margin: 15px;
    }
    .activity-pay {
      padding-bottom: 30.63px;
    }
    .activity-pay_txt {
      color: #222222;
      margin-top: 14.5px;
      margin-bottom: 11.5px;
      margin-left: 18px;
      text-align: left;
    }
    .full-bill_footer {
      position: relative;
      margin-top: 15px;
    }
  }
</style>