<template>
    <div class="billcard">
        <div class="billcard-wrap">
            <div class="billcard-header" v-if="data === ''">暂无账单</div>
            <div class="billcard-header" v-if="data !== ''">
                <p style="display: flex;">
                    <span v-show="!isDetail" class="billcard-header-first">本期<span v-show="data.billStartTime === null">无</span>账单</span>
                    <span v-show="isDetail" class="billcard-header-first">账单信息</span>
                    <span class="billcard-header-second">{{data.billStartTime}} ~ {{data.billEndTime}}</span>
                </p>                   
                <router-link class="link" v-show="isAllBill" to="/allBillList">
                    <p class="billcard-header-third">
                            <span>全部账单</span>
                    </p>
                </router-link>  
            </div>
            <div class="billcard-payment">
                <div class="billcard-content">
                     <p class="billcard-content_total" v-if="data.businessStatus === 1"> {{parseFloat(((data.countPropertyFee?data.countPropertyFee:0)+ (data.countBroadbandFee?data.countBroadbandFee:0)+ (data.countDeviceFee?data.countDeviceFee:0) + (data.countRent?data.countRent:0)+(data.countDepositFee?data.countDepositFee:0)+(data.overdueFee?data.overdueFee:0)).toFixed(2)) | currency}}元 <span style="font-size: 16px;">(待缴)</span> </p>
                     <p class="billcard-content_total" v-if="data.businessStatus === 2"> 本期账单已缴清</p>
                     <p v-if="data.businessStatus === 2" style="margin-top: 5px;font-size: 10px;" class="billcard-footer_mon" >缴费日期：{{data.actualGetTime}}</p>
                </div>
                <div class="billcard-footer">
                    <div class="billcard-footer-sig_fir" style="padding-top: 5px;" v-if="data.businessStatus === 2">
                        <div class="billcard-footer_sex">
                            <p class="billcard-footer_icon"><van-icon name="passed" /></p>
                            <p class="billcard-footer_mon">应缴</p>
                        </div>
                        <div>
                            <p class="billcard-footer_yuan">{{data.mustGetMoney === null?0:data.mustGetMoney | currency}}元</p>
                        </div>
                    </div>
                    <div class="billcard-footer-sig_fir" v-if="data.businessStatus === 2">
                        <div class="billcard-footer_sex">
                            <p class="billcard-footer_icon"><van-icon name="passed" /></p>
                            <p class="billcard-footer_mon">实缴</p>
                        </div>
                        <div>
                            <p class="billcard-footer_yuan">{{data.actualGetMoney === null?0:data.actualGetMoney | currency}}元</p>
                        </div>
                    </div>
                    <div class="billcard-footer-sig_fir" style="padding-top: 5px;" v-if="data.businessStatus === 1">
                        <div class="billcard-footer_sex">
                            <p class="billcard-footer_icon"><van-icon name="passed" /></p>
                            <p class="billcard-footer_mon">月租金</p>
                        </div>
                        <div>
                            <p class="billcard-footer_yuan">{{data.rent === null?0:data.rent | currency}}元/月</p>
                        </div>
                    </div>
                    <div class="billcard-footer-sig_fir" v-if="data.businessStatus === 1&&data.countDepositFee">
                        <div class="billcard-footer_sex">
                            <p class="billcard-footer_icon"><van-icon name="passed" /></p>
                            <p class="billcard-footer_mon">押金</p>
                        </div>
                        <div>
                            <p class="billcard-footer_yuan">{{data.countDepositFee === null?0:data.countDepositFee | currency}}元</p>
                        </div>
                    </div>
                    <div class="billcard-footer-sig_fir" v-if="data.businessStatus === 1&&data.broadbandFee">
                        <div class="billcard-footer_sex">
                            <p class="billcard-footer_icon"><van-icon name="passed" /></p>
                            <p class="billcard-footer_mon">宽带费</p>
                        </div>
                        <div>
                            <p class="billcard-footer_yuan">{{data.broadbandFee === null?0:data.broadbandFee | currency}}元/月</p>
                        </div>
                    </div>
                     <div class="billcard-footer-sig_fir" v-if="data.businessStatus === 1&&data.overdueFee">
                        <div class="billcard-footer_sex">
                            <p class="billcard-footer_icon"><van-icon name="passed" /></p>
                            <p class="billcard-footer_mon">滞纳金</p>
                        </div>
                        <div>
                            <p class="billcard-footer_yuan">{{data.overdueFee === null?0:data.overdueFee | currency}}元</p>
                        </div>
                    </div>
                    <div class="billcard-footer-sig_fir" v-if="data.businessStatus === 1">
                        <div class="billcard-footer_sex">
                            <p class="billcard-footer_icon"><van-icon name="passed" /></p>
                            <p class="billcard-footer_mon">不动产租赁费</p>
                        </div>
                        <div>
                            <p class="billcard-footer_yuan">{{data.deviceFee === null?0:data.deviceFee | currency}}元/月</p> 
                        </div>
                    </div>
                    <div class="billcard-footer-sig_fir" v-if="data.businessStatus === 1">
                        <div class="billcard-footer_sex">
                            <p class="billcard-footer_icon"><van-icon name="passed" /></p>
                            <p class="billcard-footer_mon">物业费</p>
                        </div>
                        <div>
                            <p class="billcard-footer_yuan">{{data.propertyFee === null?0:data.propertyFee | currency}}元/月</p> 
                        </div>
                    </div>
                    <div class="billcard-footer-sig_fir" style="padding-bottom: 15px;" v-if="data.businessStatus === 1">
                        <div class="billcard-footer_sex">
                            <p class="billcard-footer_icon"><van-icon name="passed" /></p>
                            <p class="billcard-footer_mon">优惠券</p>
                        </div>
                        <div>
                            <p class="billcard-footer_yuan">- {{data.payMinus === null?0:data.payMinus | currency}}元</p> 
                        </div>
                    </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "this",
  props: {
    data:{
      type: Object,
      default: {},
      required: false
    },
    isDetail:{
      type: Boolean,
      default: false,
      required: false
    },
    isAllBill: {
      type: Boolean,
      default: false,
      required: false
    },
  },
  components: {
    //addPane
  },
  computed: {
    // ...mapState({

    // })
  },
  mounted() {
    
  },
  data: function() {
    return {
      name: "template"
    };
  },
  methods: {
    
  }
};
</script>
<style scoped lang='less'>
@nice-gold: #e0b914;
@mainHeightSize:25px;
@footerHeightSize:20px;
.billcard {
    margin: auto;
    width: 343px;
    background: linear-gradient(to right, #E2CD5F, #E0B914);
    border-radius: 10px;
    color: #FFFFFF;
    .billcard-wrap {
      margin-left: 12px;
      margin-right: 10px;
      .billcard-header {
        padding-top: 5px;
        border-bottom: 1px solid #F2F2F2;
        opacity: 0.63;
        height: 35px;
        line-height: 35px;
        display: flex;
        justify-content: space-between;
        .billcard-header-first {
          font-size: 17px;
        };
        .billcard-header-second {
            margin-left: 5px;
            font-size: 12px;
            display: flex;
        };
        .billcard-header-third {
            font-size: 13px;
            width: 87px;
            color: #FFFFFF;
            height: @mainHeightSize;
            line-height: @mainHeightSize;
            text-align: center;
            margin-top: 5px;
            margin-right: 0;
            border-radius: 20px;
            background: #E2CD5F;
        }
  }
}
.billcard-content {
    margin-top: 15px;
    height: @mainHeightSize;
    line-height: @mainHeightSize;
    margin-bottom: 15px;
    text-align: left;
    .billcard-content_total{
        font-size: 33px;
    } 
    .billcard-footer_mon {
        font-size: 14px;
        margin-left: 5px;
        height: @footerHeightSize;
        line-height: @footerHeightSize;
    }
}
.billcard-footer {
    margin-top: 25px;
    .billcard-footer-sig_fir {
        display: flex;
        justify-content:space-between;
        .billcard-footer_sex {
            display: flex;
            opacity: 0.63;
            .billcard-footer_icon {
                font-size: 20px;
                height: @mainHeightSize;
                line-height: @mainHeightSize;

            }
            .billcard-footer_mon {
                font-size: 14px;
                margin-left: 5px;
                height: @footerHeightSize;
                line-height: @footerHeightSize;
            }
        }
        .billcard-footer_yuan {
            font-size: 14px;
            height: @footerHeightSize;
            line-height: @footerHeightSize;
            opacity: 0.63;
        }
    }
}
.billcard-payoff-complete{
    margin-bottom: 10px;
    .billcard-payoff-should{
        font-size: 14px;
        margin-top: 5px;
        display: flex;
        justify-content: space-between;
    }
}
}
</style>