<template>
  <sail-page type="loading-view" title="缴费记录" isHead>
    <div slot="content" class="life_pay_record"> 
    <emptyPageCard :isEmptyType="payMoneyRecordData.length===0?'payRecord':'normal'"/>  	
          	<p class="years_num" v-if="false">2018年</p>
          	<div class="record_list" v-for="(data,index) in payMoneyRecordData" :key="index">
          		<img :src="data.billTypeName === '电表'?electricityImg:waterImg" class="record_img">
                <div class="record_info">
                	<p class="record_list_info">
                		<span class="record_title">充值 {{data.billTypeName}}</span>
                		<span class="pay_price">+{{data.actualGetMoney}}.00</span>
                	</p>
                	<p class="record_list_info">
                		<span class="remaining_money">余额：{{data.accountBalance | currency}}</span>
                		<span class="pay_time">{{data.createTime | accurateTime}}</span>
                	</p>
                </div>
          	</div>
          	<!-- <div class="record_list">
          		<img src="@/assets/img/electricity.png" class="record_img">
                <div class="record_info">
                	<p class="record_list_info">
                		<span class="record_title">充值 电费</span>
                		<span class="pay_price">+100.00</span>
                	</p>
                	<p class="record_list_info">
                		<span class="remaining_money">余额：￥261.12</span>
                		<span class="pay_time">2018/10/1 12:00</span>
                	</p>
                </div>
          	</div>  --> 
          	<!-- <p class="years_num">2017年</p>
          	<div class="record_list">
          		<img src="@/assets/img/waterImg.png" class="record_img">
                <div class="record_info">
                	<p class="record_list_info">
                		<span class="record_title">充值 水费</span>
                		<span class="pay_price">+100.00</span>
                	</p>
                	<p class="record_list_info">
                		<span class="remaining_money">余额：￥261.12</span>
                		<span class="pay_time">2017/10/1 12:00</span>
                	</p>
                </div>
          	</div>  -->   
    </div>
  </sail-page>
</template>

<script>
import { mapState } from "vuex";
import sailPage from "@/components/sail-page.vue";
import electricityImg from "@/assets/img/electricity.png";
import waterImg from "@/assets/img/waterImg.png";
import emptyPageCard from "@/common/widget/emptyPageCard.vue";
export default {
  components: {
    sailPage,
    emptyPageCard
  },
  data: function(){
    return {
      show:false,
      loading: false,
      passwords:"",
      electricityImg:electricityImg,
      waterImg:waterImg
    }; 
  },
  computed: {
    ...mapState({
      payMoneyRecordData:state => state.serviceModule.payMoneyRecordData, //获取缴费历史
    })
  }, 
  asyncData({store, route}) {
    return store.dispatch("serviceModule/getPayMoneyRecordData",{
      pn:1,
      pageSize:1000
    }).then(res => {

    });
  },
  methods: {
    back() {
      //let id = Locstore("userBillDetailInfo").id;
      this.$router.back();
    },
     
  },
  mounted() {
        
  }
};
</script>
<style lang="less">
 
</style>
<style lang="less" scoped>
    .life_pay_record {
    	width: 100vw;
    	overflow: hidden;
    	.years_num {
    		width: 100vw;
    		height: 40px;
    		line-height: 40px;
    		font-size: 14px;
    		color:#585858;
    		text-align: left;
    		text-indent:15px;
    	}
    	.record_list {
    		width: 100vw;
    		height: 76px;
    		background: #FFFFFF;
    		display: flex;
    		border-bottom: 1px solid rgba(96,96,96,.1);
    		.record_img {
    			display: block;
    			width: 44.88px;
    			height: 44.88px;
    			border-radius: 50%;
    			margin: 15px;   			
    		}
    		.record_info {
              width: 280px;
              height: 76px;
              font-size: 14px; 
              .record_list_info {
              	 width: 280px;
                 height: 38px;
              }           
              .record_title {
              	  float: left;
              	  height: 38px;
              	  line-height: 48px;             	  
              	  color: #222222;
              }
              .pay_price {
              	float: right;
                color:#AFAFAF;
                height: 38px;
                line-height: 48px;
              }
              .pay_time {
              	float: right;
                color:#AFAFAF;
                height: 38px;
                line-height: 25px;
              }
              .remaining_money {
              	float: left;
              	height: 38px;
              	line-height: 25px;             	  
              	color: #AFAFAF;
              }

    		}
    	}

    }
</style>