<template>
  <sail-page type="loading-view" title="生活缴费">
    <!-- <div slot="content" class="move_house">
          <img class="expect_img" src="@/assets/img/common_developing@3x.png">
    </div> -->
    <div slot="content" class="life_pay">
    	 <van-nav-bar
        title="生活缴费"
        left-arrow
        @click-left="back"
      />
      <p class="pay_record"><router-link to="/payMoneyRecord">缴费记录</router-link></p>
      <div class="pay_box gradient-green">
      	 <p class="pay_project_top">
      	 	<span class="pay_projecr_name">电费</span>
      	 	<van-button class="reflash" :loading="eleLoading" @click="reflashMeterData(waterElectricityInfo.ammeterCode,true)">刷新</van-button>
      	 </p>
      	 <p class="pay_project_content">
      	 	<span class="content_name">账户余额</span>
      	 	<span class="content_info">{{waterElectricityInfo.ammeterBalance?(waterElectricityInfo.ammeterBalance.toFixed(2)):'0.00'}}</span>
      	 </p>
      	 <p class="pay_project_content">
      	 	<span class="content_name">当前读数</span>
      	 	<span class="content_info">{{waterElectricityInfo.ammeterRead?(waterElectricityInfo.ammeterRead.toFixed(2)):'0.00'}}</span>
      	 </p>
      	 <p class="pay_project_info">
      	 	<span class="project_info_name">电表编号</span>
      	 	<span class="project_info_data">{{waterElectricityInfo.ammeterCode?waterElectricityInfo.ammeterCode:'暂未绑定电表'}}</span>
      	 </p>
      	 <p class="pay_project_info">
      	 	<span class="project_info_name">租户姓名</span>
      	 	<span class="project_info_data">{{waterElectricityInfo.applicantName}}</span>
      	 </p>
      	 <p class="pay_project_info">
      	 	<span class="project_info_name">地址信息</span>
      	 	<span class="project_info_data">{{waterElectricityInfo.regionName}} {{waterElectricityInfo.buildingNum}}栋{{waterElectricityInfo.unit}}单元{{waterElectricityInfo.floor}}{{waterElectricityInfo.roomNum}}</span>
      	 </p>
      	 <p class="pay_save_money">     	 
      	 	 	<van-button class="save_button" @click="saveMoneyRoute(waterElectricityInfo.ammeterCode,true)">预存</van-button>
      	 </p>
      </div>
       <div class="pay_box gradient-green">
      	 <p class="pay_project_top">
      	 	<span class="pay_projecr_name">水费</span>
      	 	<van-button class="reflash" :loading="waterLoading" @click="reflashMeterData(waterElectricityInfo.watermeterCode,false)">刷新</van-button>
      	 </p>
      	 <p class="pay_project_content">
      	 	<span class="content_name">账户余额</span>
      	 	<span class="content_info">{{waterElectricityInfo.watermeterBalance?(waterElectricityInfo.watermeterBalance.toFixed(2)):'0.00'}}</span>
      	 </p>
      	 <p class="pay_project_content">
      	 	<span class="content_name">当前读数</span>
      	 	<span class="content_info">{{waterElectricityInfo.watermeterRead?(waterElectricityInfo.watermeterRead.toFixed(2)):'0.00'}}</span>
      	 </p>
      	 <p class="pay_project_info">
      	 	<span class="project_info_name">水表编号</span>
      	 	<span class="project_info_data">{{waterElectricityInfo.watermeterCode?waterElectricityInfo.watermeterCode:'暂未绑定水表'}}</span>
      	 </p>
      	 <p class="pay_project_info">
      	 	<span class="project_info_name">租户姓名</span>
      	 	<span class="project_info_data">{{waterElectricityInfo.applicantName}}</span>
      	 </p>
      	 <p class="pay_project_info">
      	 	<span class="project_info_name">地址信息</span>
      	 	<span class="project_info_data">{{waterElectricityInfo.regionName}} {{waterElectricityInfo.buildingNum}}栋{{waterElectricityInfo.unit}}单元{{waterElectricityInfo.floor}}{{waterElectricityInfo.roomNum}}</span>
      	 </p>
      	 <p class="pay_save_money">
      	 	 	<van-button class="save_button" @click="saveMoneyRoute(waterElectricityInfo.watermeterCode,false)">预存</van-button>
      	 </p>
      </div>
          
    </div>
  </sail-page>
</template>

<script>
import { Dialog } from "vant";
import { mapState } from "vuex";
import { Toast } from "vant";
import sailPage from "@/components/sail-page.vue";
export default {
  components: {
    sailPage
  },
  data: function(){
    return {
      show:false,
      eleLoading: false,
      waterLoading:false,
      passwords:"",
    }; 
  },
  computed: {
    ...mapState({
      waterElectricityInfo:state => state.serviceModule.waterElectricityInfo, //获取水电信息
    })
  }, 
  asyncData({store, route}) {
    return store.dispatch("serviceModule/getCurrentWaterEleDataInfo").then(res => {

    });
  },
  methods: {
    back() {
      //let id = Locstore("userBillDetailInfo").id;
      this.$router.push("/serviceHome");
    },
    reflashMeterData(code,flag) {        
      if(!code){
        Toast.fail({
          message:"当前没绑定智能水电表，无法刷新！",
          duration:1500
        });
        return; 
      }
      if(flag){
        this.eleLoading = true;
      }else{
        this.waterLoading = true;
      }
      this.$store.dispatch("serviceModule/reflashCurrentWaterEleDataInfo",{
        meterCode:code
      }).then(res => {
        if(flag){
          this.eleLoading = false;
        }else{
          this.waterLoading = false;
        }
        if(res.data.code === 10000) {
          Toast.success({
            message:"刷新成功",
            duration:1000
          });
        }else{
          Toast.fail({
            message:res.data.msg,
            duration:1000
          });
        }
      });
    },
    saveMoneyRoute(code,flag) {
      if(!code){
        Toast.fail({
          message:"当前没绑定智能水电表，无法预存！",
          duration:1500
        });
        return; 
      }
      if(flag){
        this.$router.push("/advanceDepositManage/electricity");
      }else{
        this.$router.push("/advanceDepositManage/water");
      }
    }
     
  },
  mounted() {
        
  }
};
</script>
<style lang="less">
 
</style>
<style lang="less" scoped>
    .cube-page {
        background: #ffffff;   
       .move_house {
          width: 375px;
          .expect_img {
            width: 375px;
          }
       }
     }
    .life_pay {
    	position: relative;
    	width: 100vw;
    	overflow: hidden;
    	.pay_record {
           position: absolute;
           top: 10px;
           right: 10px;
           z-index: 10000;
           font-size:15px;
           color:#585858;
    	}
    	.pay_box {
    		width: 343px;
    		height:338.58px;
    		margin: 16px auto;
    		border-radius: 8px;
    		border:1px solid #f2f2f2;
            .pay_project_top {
            	width: 310px;
            	height:48px;
            	margin-left: 17.5px;
            	border-bottom:1px solid #FFFFFF;

            	.pay_projecr_name {
            		font-size:17px;
            		height:48px;
            		width: 60px;
            		line-height: 49px;
            		display: inline-block;
            		float: left;
            		color:rgba(255,255,255,.64);
            		letter-spacing: 3px;
            	}
            	.reflash {
            		width: 87px;
            		height: 27px;
            		border-radius: 14px;
            		background:rgba(255,255,255,.33);
            		float: right;
            		margin-top: 12.61px;
            		font-size:13px;
            		color:#FFFFFF;
            		line-height: 27px;
            		letter-spacing: 5px;
            		text-align:center;
            	}

            }
            .pay_project_content {
            	width: 310px;
            	height: 40px;
            	margin: 18px auto;
            	line-height: 40px;
              display: flex;
            	.content_name {
 					      float: left;           		
            		width: 60px;
            		font-size:14px;
            		height: 40px;
            		display: inline-block;
            		color:rgba(255,255,255,.64);
            	}
            	.content_info {
            		float: left; 
            		margin-left: 15px;
            		font-size: 33px;
            		color:#FFFFFF;
            		font-weight:700;
                text-align: left;
                flex: 1;
                overflow: auto;            		
            	}

            }
            .pay_project_info {           	
            	width: 310px;
            	margin:7px auto;
            	height: 20px;
            	font-size:14px;
            	color:rgba(255,255,255,.64);
            	line-height: 20px;
            	.project_info_name {
            		float: left;
            		display: inline-block;
            		width: 60px;
            	}
            	.project_info_data {
            		float: left; 
            		margin-left: 15px;
            	}
            }
            .pay_save_money {
            	width: 310px;
            	height: 74px;
            	margin:15px auto;
            	border-top:1px solid #FFFFFF;
            	.save_button {
            		width: 110px;
            		height: 34px;
            		border-radius: 20px;
            		background: rgba(255,255,255,.33);
            		line-height: 34px;
            		margin: 12.5px auto;
            		color:#FFFFFF;
            		letter-spacing: 5px;
            	}
            }
    	}
    }
</style>