<template>
  <j-nav-bar color="#FFF" nav-bar-background="#f9bf3a"/>
  <div>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >

        <view class="j-item" v-for="item in borrowList" :key="item.id" @click="goInfo(item.tradeNo)">
          <view class="j-item-t">贷款编号：{{item.tradeNo}}</view>

          <view style="display: flex; justify-content: space-between">

            <view class="j-item-c">
              <view>贷款总额：{{ item.totalLoanMoney }}元</view>
              <view class="yellow_color1">每期还款：{{ item.avgRepayment }}*{{ item.totalMonth }}</view>
              <view>贷款申请日期：{{ new Date(item.createTime).format('yyyy-MM-dd hh:mm:ss') }}</view>
            </view>

            <view :style="{paddingRight: px2vw(20)}" @click.stop="toContract(item.tradeNo)" style="display: flex; justify-content: center; align-items: center; flex-flow: column">
              <van-icon size="50" name="orders-o" />
              合同
            </view>
          </view>
        </view>

      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script lang="ts" setup>
import {onMounted, reactive, ref} from "vue";
import {getBorrowPage} from "@/api";
import {useRouter} from "vue-router";
import {px2vw} from "@/utils";
const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);


const router = useRouter()

const onLoad = () => {
  if (refreshing.value) {
    list.value = [];
    refreshing.value = false;
  }

  _getBorrowPage()
  loading.value = false;
};

const onRefresh = () => {
  // 清空列表数据
  finished.value = false;

  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true;
  onLoad();
};

const borrowPage = {
  pageNum: 0,
  pageSize: 100,
}
const borrowList = reactive([])
const _getBorrowPage = () => {
  getBorrowPage(borrowPage).then(res => {
    borrowList.newPush(res)
  })
}

const goInfo = (tradeNo) => {
  router.push({
    path: '/borrowInfo',
    query: {
      tradeNo: tradeNo
    }
  })
}
const toContract = (tradeNo) => {
  router.push({
    path: '/contract',
    query: {
      tradeNo: tradeNo
    }
  })
}

onMounted(() => {
  _getBorrowPage()
})


</script>

<style lang="scss" scoped>
.j-item {
  display: flex;
  flex-flow: column;
  margin: 20px;
  border-radius: 10px;
  box-shadow: 0 0 1vw 0px #e0e0e0;
  background: #fff;
  overflow: hidden;
  &-t {
    padding: 20px;
    display: flex;
    width: 100%;
    background: #f9fbff;
    color: #738aa4;
  }
  &-c {
    padding: 20px;
    display: flex;
    width: 100%;
    flex-flow: column;
  }
}


</style>