<template>
  <div>
    <div class="search">
      <div class="cell">
        <label for="label" class="label">还款账号</label>
        <input
          id="account"
          v-model="hkzh"
          type="number"
          placeholder="请输入还款账号"
          class="date"
        />
      </div>
      <div class="cell" @click="showBegin = true">
        <label class="label">开始日期</label>
        <div class="date">{{ formatter(beginDate) }}</div>
      </div>
      <van-popup v-model="showBegin" position="bottom">
        <van-datetime-picker
          type="date"
          :max-date="maxDate"
          :min-date="minDate"
          @confirm="onBeginConfirm"
          @cancel="showBegin = false"
        />
      </van-popup>
      <div class="cell" @click="showEnd = true">
        <label class="label">结束日期</label>
        <div class="date">{{ formatter(endDate) }}</div>
      </div>
      <van-popup v-model="showEnd" position="bottom">
        <van-datetime-picker
          type="date"
          :max-date="maxDate"
          :min-date="minDate"
          @confirm="onEndConfirm"
          @cancel="showEnd = false"
        />
      </van-popup>
      <van-button class="button" type="primary" block size="small" @click="onRefresh"
        >查询</van-button
      >
    </div>
    <van-pull-refresh v-model="refreshing" class="list" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        @load="onLoad"
        :finished-text="nodata ? '' : '没有更多了'"
      >
        <div class="card" v-for="item in list" :key="item.aae003">
          <div class="cell">
            <p class="label">还款日期</p>
            <p class="text">{{ item.hkrq }}</p>
          </div>
          <div class="cell">
            <p class="label">还款合计</p>
            <p class="text">{{ item.yhhj }}</p>
          </div>
          <div class="cell">
            <p class="label">还款年月</p>
            <p class="text">{{ item.hkym }}</p>
          </div>
          <div class="cell">
            <p class="label">还款类型</p>
            <p class="text">{{ item.hklxname }}</p>
          </div>
        </div>
        <no-data v-if="nodata" text="您当前还没有公积金贷款还款信息"></no-data>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import Vue from "vue";
import { PullRefresh, List, DatetimePicker, Popup, Button } from "vant";
import { getAccount, fundLoanDet } from "@/api/fund";
import NoData from "@/components/NoData";
import { encryptByDES } from "@/utils/utils";

Vue.use(PullRefresh).use(List).use(DatetimePicker).use(Popup).use(Button);

export default {
  components: { NoData },
  data() {
    return {
      hkzh: null, // 还款账号
      beginDate: "",
      endDate: "",
      showBegin: false,
      showEnd: false,
      maxDate: new Date(),
      minDate: new Date(1990, 0, 1),
      refreshing: false,
      loading: false,
      finished: true,
      nodata: false,
      count: 0,
      list: [],
    };
  },
  methods: {
    initAccount(idCard) {
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "加载中...",
      });
      getAccount({ idCard }).then((res) => {
        this.$toast.clear();
        this.hkzh = res.hkzh || "";
      });
    },
    onBeginConfirm(value) {
      this.beginDate = value;
      this.showBegin = false;
    },
    onEndConfirm(value) {
      this.endDate = value;
      this.showEnd = false;
    },
    formatter(value) {
      if (value) {
        let year = value.getFullYear();
        let month = value.getMonth() + 1;
        month = month > 10 ? month : "0" + month;
        let date = value.getDate();
        date = date > 10 ? date : "0" + date;
        return year + "" + month + date;
      } else {
        return "";
      }
    },
    onRefresh() {
      this.init(0, "refresh");
    },
    onLoad() {
      this.init(this.count, "loading");
    },
    init(count, type) {
      if (!this.hkzh) {
        this.$toast("请输入还款账号!");
        return;
      }
      if (this.beginDate && this.endDate) {
        if (this.beginDate > this.endDate) {
          this.$toast("开始时间不可大于结束时间!");
          return;
        }
      }
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "加载中...",
      });
      const repaymentAccount = encryptByDES(this.hkzh, "MnuYbhGv");
      fundLoanDet({
        repaymentAccount: repaymentAccount,
        startResult: count + 1,
        endResult: count + 20,
        beginTime: this.formatter(this.beginDate),
        endTime: this.formatter(this.endDate),
      })
        .then((res) => {
          this.$toast.clear();
          this.loading = false;
          this.refreshing = false;
          const total = res.data.total;
          if (total <= 0 && count === 0) {
            this.count = 0;
            this.list = [];
            this.nodata = this.finished = true;
          } else {
            this.count = count + 20;
            this.finished = this.count >= total;
            if (type === "refresh") this.list = res.data.list.acc_info;
            else this.list = this.list.concat(res.data.list.acc_info);
            this.nodata = false;
          }
        })
        .catch(() => {
          this.loading = false;
          this.refreshing = false;
          this.nodata = true;
        });
    },
  },
  created() {
    let res = sessionStorage.getItem("ZJCD-UserInfo");
    let idCard = JSON.parse(res).idCardNo;
    if (idCard) {
      this.initAccount(idCard);
    }
  },
};
</script>

<style lang="stylus" scoped>
.search {
  padding-bottom 20px;
  background #ffffff

  .cell {
    height 70px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;

    .label {
      width: 200px;
      font-size: 24px;
    }

    .date {
      flex: 1;
      font-size: 26px;
    }
  }
  .button {
    width 90%;
    margin 20px auto 0
  }
}
.list {
  height calc(100vh - 380px)
  overflow-y auto

  .card {
    margin: 20px 10px;
    background #fff
    border-radius: 5px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 4px 10px 0 rgba(0, 0, 0, 0.19);

    .cell {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 0;
      margin: 0 20px;
      border-bottom: 1px solid #eee;
      .label {
        width: 35%;
        font-size: 24px;
        color: #333333;
      }
      .text {
        width: 62%;
        font-size: 24px;
        color: #333333;
      }
    }
    .cell:last-child {
      border-bottom: 0;
    }
  }
}
</style>
