<template>
  <div>
    <van-nav-bar
      @click-left="onClickLeft"
      @click-right="onClickRight"
      style="background-color: #1989fa"
    >
      <template #title>
        <van-col style="color: #ffffff">我要缴费</van-col>
      </template>
      <template #left>
        <i
          class="fa fa-arrow-circle-left"
          aria-hidden="true"
          style="color: #ffffff; font-size: 18px"
        ></i>
      </template>
      <template #right>
        <van-icon name="replay" size="18" color="#ffffff" />
      </template>
    </van-nav-bar>

    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="已显示所有数据"
      @load="Getfdc_pm_unfare"
    >
      <van-cell
          v-for="item in listdata"
          :key="item.farerowid"
         
          border
        >
          <template #default>
           
            <van-row class="borderTop">
              <van-col span="24">
                <van-row>
                  <van-col span="5" class="title1">租户</van-col>
                  <van-col span="19">{{ item.ownername }}</van-col>
                </van-row>
                 <van-row>
                  <van-col span="5" class="title1">房屋</van-col>
                  <van-col span="19">{{ item.hname }}</van-col>
                </van-row>
               <van-row>
                  <van-col span="5" class="title1">费用类型</van-col>
                  <van-col span="19" >{{item.billitemname}}</van-col>
                </van-row>
                 <van-row>
                  <van-col span="5" class="title1">欠费金额</van-col>
                  <van-col span="19" >{{item.nneedpaymny}}元</van-col>
                </van-row>
                <van-row>
                  <van-col span="5" class="title1">欠费时间</van-col>
                  <van-col span="19">{{ item.dbegindate }}至{{item.denddate}}</van-col>
                </van-row>
                <van-row>                 
                  <van-col span="24"><van-button type="info" @click="jiaofei(item.farerowid)" >缴费</van-button></van-col>
                </van-row>
              </van-col>
           
            </van-row>
          </template>
        </van-cell>
    </van-list>
  </div>
</template>

<script>
import { Getfdc_pm_unfare } from "@/common/api/loginApi.js";
export default {
  name: "login",
  data() {
    return {
      listdata: [], //欠费信息
      radio: "", //单选框
    
      loading: false,
      finished: false,
    };
  },
  created: function () {
    console.info("created");
    //console.info(this.$util);
    this.$util.persistLogin(this);
  },
  methods: {
    Getfdc_pm_unfare: function () {
      var that = this;
      let phone=that.$store.state.data.tel;
      if(that.$util.isEmpty(phone))
      {
        that.$router.push('/');
        return;
      }
      Getfdc_pm_unfare(phone).then((res) => {
        console.info("Getfdc_pm_unfare", res);
        if (!res.isSuccess) {
          that.$toast(res.errMsg);
          return;
        }
        res.data.forEach(function (item, index, array) {
          item.dbegindate=that.$util.getDate(item.dbegindate);
          item.denddate=that.$util.getDate(item.denddate);
          that.$set(that.listdata, index, item);
        });
        that.loading = false;
        that.finished = true;
      });
    },
    // 单选按钮点击事件
    jiaofei: function (farerowid) {
      let that=this;
      console.info("缴费点击事件 farerowid", farerowid);
      this.listdata.forEach(function(item,index,arr){
        if(item.farerowid==farerowid){
          that.$cookie.set('jiaofei',JSON.stringify(item));
          that.$router.push('SelectPayType');
        }
      })
      
    },
    onClickLeft() {
      // this.$toast('返回')
      console.info("left");
      this.$router.go(-1);
    },
    onClickRight() {
      this.$router.go(0);
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.title1 {
  color: #999;
}
.value1 {
  color: #999;
  font-size: 18px;
}
</style>
