<template>
  <Skeleton :row="3" :loading="skeLoading">
    <van-swipe class="my-swipe" indicator-color="#3E4FAF" style="margin-top: 20px">
      <van-swipe-item
        class="flex justify-center swpiItem"
        v-for="item in state.hotProductList"
        :key="item.value"
      >
        <LoanHotCard
          :inst_name="item.inst_name"
          :product_name="item.product_name"
          :rate_lower="item.rate"
          :date="item.date"
          :max_amount="item.max_amount"
          :uuid="item.uuid"
        />
      </van-swipe-item>
    </van-swipe>
  </Skeleton>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import LoanHotCard from "@/components/Loan/LoanHotCard/index.vue";
import {
  queryLoanProductList,
  queryLoanProductInfo,
} from "@/service/LoanProductService";
import { onMounted, PropType, reactive, watch } from "@vue/runtime-core";
import { eLoanMode } from "@/views/withMenu/Loan/types";
import { hotProduct } from "./type";
import { Skeleton } from "vant";
import { eProductStatus } from "@/service/LoanProductService/type";

const props = defineProps({
  loanMode: {
    type: Number as PropType<eLoanMode>,
    requried: true,
  },
});

let skeLoading = ref(true);
let state = reactive({ hotProductList: [] as Array<hotProduct> });

watch(props, (newV, oldV) => {
  state.hotProductList = [];
  fetchList();
});

onMounted(() => {
  fetchList();
});

const fetchList = () => {
  skeLoading.value = true;
  queryLoanProductList({
    limit: 3,
    loan_type: props.loanMode!,
    offset: 0,
    product_status: eProductStatus.hot,
  }).then((ret) => {
    if (ret.code === 200) {
      skeLoading.value = false;
      const promiseList = [] as Promise<any>[];
      ret.data.uuid.map((uuid) => {
        const promise = queryLoanProductInfo({ uuid }).then((ret) => {
          const {
            rate_lower,
            rate,
            date,
            max_amount,
            max_date,
            inst_name,
            product_name,
            product_status,
          } = ret.data;

          return {
            rate,
            max_amount,
            date,
            inst_name,
            product_name,
            uuid,
            product_status,
          };
        });
        promiseList.push(promise);
      });
      state.hotProductList = [];
      Promise.all(promiseList).then(list => {
        list.forEach(i => {
          state.hotProductList.push(i);
        })
      })
    }
  });
};
</script>

<style lang="less" scoped>
.my-swipe /deep/ .van-swipe__indicator {
  background-color: #e7e7e7;
  opacity: 1;
}
.swpiItem {
  height: 230px;
}
</style>