<template>
  <div class="page flex-col">
    <div class="main1 flex-col">
      <div class="block1">
        <div class="mod2 flex-col">
          <div class="wrap1 flex-row">
            <span
              class="word2"
              :style="{
                color:
                  eLoanMode.personal === mode ? 'rgba(62, 79, 175, 1)' : '',
              }"
              @click="loanMode.setModeAction(eLoanMode.personal)"
              >个人产品</span
            >
            <span
              class="info1"
              :style="{
                color: eLoanMode.company === mode ? 'rgba(62, 79, 175, 1)' : '',
              }"
              @click="loanMode.setModeAction(eLoanMode.company)"
              >企业产品</span
            >
          </div>
        </div>
        <!-- <div class="main8 flex-col" v-if="eLoanMode.personal === mode">
          <div class=" text-white text-lg flex items-center mt-5 justify-center">
            <div class=" border-b border-white w-14 mr-4 border-opacity-25"></div>
            个人小额借款（元）
            <div class=" border-b border-white w-14 ml-4 border-opacity-25"></div>
          </div>
          <div class="outer4 flex-row">
            <div class="outer5 flex-col"></div>
            <span class="word26">个人小额借款（元）</span>
            <div class="outer6 flex-col"></div>
          </div>
          <div class="outer7 flex-row">
            <div class="section8 flex-col">
              <span class="paragraph1">
                最高
                <br />
                可借
              </span>
            </div>
            <span class="word27">¥</span>
            <span class="txt14">{{ limit.max_amount }}</span>
          </div>
        </div>
        <div class="outer55" v-else-if="eLoanMode.company === mode">
          <div class="outer6 flex-row items-center">
            <span class="word32">小微快贷</span>
            <span class="info14">最高可借（元）</span>
          </div>
          <div class="outer7 flex-row">
            <span class="info15">¥</span>
            <span class="txt10">{{ limit.en_max_amount }}</span>
          </div>
          <div class="outer8 flex-row">
            <span class="word33">年利率最低{{ limit.en_rate_lower }}%</span>
            <div class="main22 flex-col"></div>
            <span class="word34">分秒必批</span>
            <div class="main22 flex-col"></div>
            <span class="word35">灵活快捷</span>
          </div>
        </div> -->
        <LoanHotSwipe :loanMode="mode" class="absolute top-0 bottom-0" />
      </div>
      <!-- 热门产品 -->
      <!-- <GroupTitle title="热门产品" class="mt-2.5" v-if="count" iconName="" /> -->
      <!-- 非热门产品 -->
      <GroupTitle
        title="产品精选"
        v-if="state.allProductList"
        class="mt-24"
        @seeMore="$router.push({ name: 'LoanList', params: { mode: mode } })"
      />
      <div style="margin-top: 20px" v-if="state.allProductList"></div>
      <Skeleton :row="3" :loading="skeLoading" v-if="state.allProductList">
        <LoanCard
          v-for="item in state.allProductList"
          :key="item.uuid"
          :max_amount="item.max_amount"
          :product_name="item.product_name"
          :features="item.features"
          :inst_name="item.inst_name"
          :loanMode="mode"
          @click="
            $router.push({ name: 'LoanDetail', params: { uuid: item.uuid } })
          "
          class="mt-2.5"
        />
      </Skeleton>
      <!-- 精彩活动 -->
      <template v-if="eLoanMode.personal === mode">
        <group-title
          class="mt-7"
          title="精彩活动"
          v-if="src"
          @click="$router.push({ name: 'ActivityList' })"
        />
        <div class="mt-2" v-if="skeLoading"></div>
        <Skeleton :loading="skeLoading" :row="3">
          <img
            class="w-83 h-22 mt-5 rounded-lg mx-auto"
            :src="src"
            v-if="src"
            @click="
              $router.push({
                name: 'ActivityDetail',
                params: { uuid: activityUuid },
              })
            "
          />
        </Skeleton>
      </template>
      <!-- 产品资讯 -->
      <GroupTitle
        title="产品资讯"
        subtitle="最新产品资讯展示"
        class="mt-2.5"
        iconName=""
      />
      <HotNews v-for="n in hotNews" :key="n.uuid" :info="n" />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { eLoanMode } from "./types";
import LoanHotSwipe from "@/components/Loan/LoanHotSwipe/index.vue";
import LoanCard from "@/components/Loan/LoanCard/index.vue";
import GroupTitle from "@/components/GroupTitle/index.vue";
import HotNews from "@/components/HotNews/index.vue";
import { queryActivityList } from "@/service/ActivityService";
import { getImageSrcFromFileHash } from "@/service/FileService";
import { computed, onMounted, reactive, watch } from "@vue/runtime-core";
import { getNewsList } from "@/service/NewsService/index";
import { simpleItemInfo } from "./types";
import { Skeleton } from "vant";
import {
  queryLoanProductList,
  queryLoanProductInfo,
  queryLimit,
} from "@/service/LoanProductService";
import { loanMode } from "@/store/loanModeStore";
import { clearSearchResult } from "@/store/loanSearchResultStore";
import { eProductStatus } from "@/service/LoanProductService/type";
let skeLoading = ref(false);

let state = reactive({ allProductList: [] as Array<simpleItemInfo> });
const src = ref("");
const activityUuid = ref("");
const hotNews = ref<{ uuid: string }[]>([]);
const limit = reactive({
  en_max_amount: "",
  en_rate_lower: "",
  max_amount: "",
  state: false,
});
const count = ref(0);

const mode = computed(() => {
  return loanMode.state.mode;
});

watch(
  () => loanMode.state.mode,
  () => {
    state.allProductList = [];
    clearSearchResult();
    fetchList();
  }
);

const getNews = () => {
  getNewsList({
    limit: 2,
    offset: 0,
  }).then((res) => {
    hotNews.value = res.data.items;
  });
};

const fetchActivityList = async () => {
  skeLoading.value = true;
  const ret = await queryActivityList({ limit: 1, offset: 0 });
  if (ret.code === 200) {
    if (ret.data.items.length != 0) {
      src.value = getImageSrcFromFileHash(ret.data.items[0].file_name);
      activityUuid.value = ret.data.items[0].uuid;
    } else {
      src.value = "";
    }
    skeLoading.value = false;
  }
};

const fetchList = () => {
  // 取前7产品产品遍历
  skeLoading.value = true;
  queryLoanProductList({
    limit: 4,
    loan_type: mode.value,
    offset: 0,
    product_status: eProductStatus.normal,
  }).then((ret) => {
    if (ret.code === 200) {
      skeLoading.value = false;
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      const promiseList = [] as Promise<any>[];
      ret.data.uuid.map((uuid) => {
        const promise = queryLoanProductInfo({ uuid }).then((ret) => {
          const { max_amount, inst_name, uuid, features, product_name } =
            ret.data || {};
          count.value = count.value + 1;
          return {
            max_amount,
            product_name,
            features,
            inst_name,
            uuid,
          };
        });
        promiseList.push(promise);
      });
      Promise.all(promiseList).then((list) => {
        list.forEach((i) => {
          state.allProductList.push(i);
        });
      });
    }
  });
  count.value = 0;
};

const formatLimit = (limit: string): string => {
  return Number(limit + "0000").toLocaleString();
};

const fetchLimit = () => {
  limit.state = true;
  queryLimit().then((ret) => {
    if (ret.code == 200) {
      const data = ret.data;
      limit.max_amount = formatLimit(data.max_amount);
      limit.en_max_amount = formatLimit(data.en_max_amount);
      limit.en_rate_lower = data.en_rate_lower;
    }
  });
};

onMounted(() => {
  fetchLimit();
  fetchList();
  fetchActivityList();
  getNews();
});
</script>
<style lang="less" scoped>
@import "./index.less";
</style>
