<template>
  <Navbar :bangsBlock="true" />
  <div class="page flex-col">
    <div class="outer1 flex-col">
      <Banner class="w-full overflow-hidden" :bannerUrls="bannerList" />
      <AppList :appList="appList" class="mt-7" />
      <Notify class="mt-2.5" :list="notifyList" />
      <!-- <group-title class="mt-7" title="精选理财" /> -->
      <!-- <div class="mx-5 flex justify-between mt-5">
        <FnsCard v-for="(item, index) in loopData0" :item="item" :key="index" />
      </div>-->
      <group-title
        class="mt-7"
        v-if="!isReviewMode && product_name"
        title="热门产品"
        @click="$router.push({ name: 'Loan' })"
      />
      <Skeleton :loading="skeLoading" :row="3" class="mt-2">
        <LoanCard
          v-if="!isReviewMode && product_name"
          :max_amount="max_amount"
          :product_name="product_name"
          :features="features"
          :inst_name="inst_name"
          class="mt-5"
          @click="
            $router.push({ name: 'LoanDetail', params: { uuid: hotLoanUuid } })
          "
        />
      </Skeleton>
      <group-title class="mt-7" title="精彩直播" v-if="LiveRoomTitle" @seeMore="handleSeeMoreLive" />
      <LiveCard class="mt-4" :title="LiveRoomTitle" v-if="LiveRoomTitle" />
      <group-title
        class="mt-7"
        v-if="src"
        title="精彩活动"
        @click="$router.push({ name: 'ActivityList' })"
      />
      <Skeleton :loading="skeLoading" :row="3" class="mt-2">
        <div class="mx-5 mt-5 text-center">
          <img
            class="w-83 h-22 object-cover object-center rounded-lg inline-block"
            :src="src"
            v-if="src"
            @click="
              $router.push({
                name: 'ActivityDetail',
                params: { uuid: activityUuid },
              })
            "
          />
        </div>
      </Skeleton>
      <group-title class="mt-7" v-if="hotNews" title="热门资讯" @click="$router.push('News')" />
      <HotNews v-for="n in hotNews" :key="n.uuid" :info="n" />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, onUnmounted, watch } from "vue";
import Banner from "./Banner/Banner.vue";
import Navbar from "@/components/NavBar/index.vue"
import AppList from "./AppList/index.vue";
import appList from "./appList";
import Icon from "@/components/common/Icon.vue";
import Notify from "./Notify/index.vue";
import GroupTitle from "@/components/GroupTitle/index.vue";
import FnsCard from "./FnsCard/index.vue";
import LoanCard from "@/components/Loan/LoanCard/index.vue";
import LiveCard from "@/components/LiveCard/index.vue";
import HotNews from "@/components/HotNews/index.vue";
import { getNewsList } from "@/service/NewsService/index";
import { queryBannerList } from "@/service/BannerService";
import { getImageSrcFromFileHash } from "@/service/FileService";
import { queryNotifyList } from "@/service/NotifyService";
import { queryActivityList } from "@/service/ActivityService";
import Bridge from "@/utils/jsBridge2"
import {
  queryLoanProductList,
  queryLoanProductInfo,
} from "@/service/LoanProductService";
import { number } from "bitcoinjs-lib/types/script";
import { Skeleton } from "vant";
import { eProductStatus } from "@/service/LoanProductService/type";
import { getUserMsg } from "@/utils/userMsg"
import { sendLive } from "@/utils/live";
import { isReviewMode } from "@/utils/vueAppEnv";
import { chatLoginActionMark, eLoginType } from "@/store/chatStore";

var hiddenProperty = 'hidden' in document ? 'hidden' :
  'webkitHidden' in document ? 'webkitHidden' :
    'mozHidden' in document ? 'mozHidden' :
      null;
var visibilityChangeEvent = (hiddenProperty as string).replace(/hidden/i, 'visibilitychange');

export default defineComponent({
  components: {
    Banner,
    AppList,
    Icon,
    Notify,
    GroupTitle,
    Navbar,
    FnsCard,
    LoanCard,
    LiveCard,
    HotNews,
    Skeleton,
  },
  data() {
    const theAppList = appList.filter(i => {
      if (isReviewMode()) {
        return !i.hideInReviewMode
      } else {
        return true;
      }
    })

    return {
      LiveRoomTitle: '',
      appList: theAppList,
      skeLoading: false,
      bannerList: [] as string[],
      notifyList: [] as any[],
      loopData0: [
        {
          lanhutext0: "货币市场基金",
          lanhutext1: "乾元-日鑫月遗…",
          lanhutext2: "4.05%",
          lanhutext3: "预计年化",
        },
        {
          lanhutext0: "期限158天",
          lanhutext1: "乾元-私享202…",
          lanhutext2: "3.10%",
          lanhutext3: "预计年化",
        },
        {
          lanhutext0: "债券基金",
          lanhutext1: "建信增利",
          lanhutext2: "2.73%",
          lanhutext3: "预计年化",
        },
      ],
      constants: {},
      hotNews: [] as any[],
      src: "",
      activityUuid: "",
      max_amount: 0,
      product_name: "",
      features: "",
      inst_name: "",
      hotLoanUuid: "",
      intervalId: NaN,
    };
  },
  beforeUnmount() {
    clearInterval(this.intervalId)
    document.removeEventListener(visibilityChangeEvent, this.onVisibilityChange)
  },
  mounted() {
    this.getHotNews();
    this.fetchBannerList();
    this.fetchNotifyList();
    this.fetchActivityList();
    this.fetchLoanProductList();
    this.startGettingLiveRoom();
    document.addEventListener(visibilityChangeEvent, this.onVisibilityChange);
  },
  methods: {
    startGettingLiveRoom() {
      console.log('start getting live room')
      this.initLiveRoomCard();
      this.intervalId = window.setInterval(this.initLiveRoomCard, 2000)
    },
    onVisibilityChange() {
      if (hiddenProperty && !(document as any)[(<string>hiddenProperty)]) {
        console.log('进入页面');
        this.startGettingLiveRoom();
      } else {
        console.log('离开页面');
        clearInterval(this.intervalId)
      }
    },
    handleSeeMoreLive() {
      sendLive()
    },
    initLiveRoomCard() {
      if (getUserMsg()) {
        console.log('request live info');
        new Bridge().bridge_getliveInfo(getUserMsg()?.userInfo.phone, (msg: string) => {
          if (msg) {
            this.LiveRoomTitle = msg;
          }
        })
      } else {
        this.LiveRoomTitle = '';
      }
    },
    getHotNews() {
      getNewsList({
        limit: 2,
        offset: 0,
      }).then((res) => {
        this.hotNews = res.data.items;
      });
    },
    async fetchBannerList() {
      const ret = await queryBannerList({ location: "1" });
      if (ret.code === 200) {
        const list = ret.data.file_name.map((i) => {
          return getImageSrcFromFileHash(i);
        });
        this.bannerList = list;
      }
    },
    async fetchNotifyList() {
      const ret = await queryNotifyList({ notify_type: "1" });
      if (ret.code === 200) {
        const list = ret.data.items;
        list.sort((a, b) => b.update_at - a.update_at)
        this.notifyList = list;
      }
    },
    async fetchActivityList() {
      this.skeLoading = true;
      const ret = await queryActivityList({ limit: 1, offset: 0 });
      if (ret.code === 200) {
        this.skeLoading = false;
        if (ret.data.items.length != 0) {
          this.src = getImageSrcFromFileHash(ret.data.items[0].file_name);
          this.activityUuid = ret.data.items[0].uuid;
        } else {
          this.src = "";
        }
      }
    },
    async fetchLoanProductList() {
      this.skeLoading = true;
      // 默认查询个人产品的第一个产品产品
      const ret = await queryLoanProductList({
        limit: 1,
        offset: 0,
        loan_type: 2,
        product_status: eProductStatus.hot
      });
      if (ret.code === 200) {
        this.skeLoading = false;
        this.hotLoanUuid = ret.data.uuid[0];
        const uuid = this.hotLoanUuid;
        if (uuid) {
          queryLoanProductInfo({ uuid }).then((ret) => {
            console.log("uuid", uuid);
            if (ret.code === 200) {
              this.max_amount = ret.data.max_amount;
              this.inst_name = ret.data.inst_name;
              this.product_name = ret.data.product_name;
              this.features = ret.data.features;
            }
          });
        }
      }
    },
  },
  computed: {
    isReviewMode() {
      return isReviewMode()
    }
  }
});
</script>
<style scoped>
.page {
  background-color: rgba(247, 247, 250, 1);
}

.wrap13 {
  z-index: auto;
  width: 335px;
  height: 159px;
  justify-content: space-between;
  margin: 21px 0 0 20px;
}

.wrap14 {
  z-index: auto;
  width: 330px;
  height: 22px;
  margin: 31px 0 0 20px;
}

.word12 {
  z-index: 96;
  width: 65px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(27, 31, 55, 1);
  font-size: 16px;
  letter-spacing: 0.19200000166893005px;
  font-family: PingFangSC-Medium;
  white-space: nowrap;
  line-height: 22px;
  text-align: center;
}

.word13 {
  z-index: 251;
  width: 25px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(27, 31, 55, 1);
  font-size: 12px;
  letter-spacing: 0.14399999380111694px;
  white-space: nowrap;
  line-height: 17px;
  text-align: left;
  margin: 3px 0 0 230px;
}

.icon4 {
  z-index: 247;
  width: 5px;
  height: 10px;
  margin: 7px 0 0 5px;
}

.wrap17 {
  z-index: auto;
  width: 330px;
  height: 22px;
  margin: 30px 0 0 20px;
}

.word17 {
  z-index: 73;
  width: 65px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(27, 31, 55, 1);
  font-size: 16px;
  letter-spacing: 0.19200000166893005px;
  font-family: PingFangSC-Medium;
  white-space: nowrap;
  line-height: 22px;
  text-align: center;
}

.txt11 {
  z-index: 79;
  width: 25px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(27, 31, 55, 1);
  font-size: 12px;
  letter-spacing: 0.14399999380111694px;
  white-space: nowrap;
  line-height: 17px;
  text-align: left;
  margin: 2px 0 0 230px;
}

.icon5 {
  z-index: 75;
  width: 5px;
  height: 10px;
  margin: 6px 0 0 5px;
}

.wrap19 {
  z-index: auto;
  width: 330px;
  height: 22px;
  margin: 30px 0 0 20px;
}

.info5 {
  z-index: 200;
  width: 65px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(27, 31, 55, 1);
  font-size: 16px;
  letter-spacing: 0.19200000166893005px;
  font-family: PingFangSC-Medium;
  white-space: nowrap;
  line-height: 22px;
  text-align: center;
}

.info6 {
  z-index: 239;
  width: 25px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(27, 31, 55, 1);
  font-size: 12px;
  letter-spacing: 0.14399999380111694px;
  white-space: nowrap;
  line-height: 17px;
  text-align: left;
  margin: 3px 0 0 230px;
}

.label10 {
  z-index: 235;
  width: 5px;
  height: 10px;
  margin: 7px 0 0 5px;
}

.wrap20 {
  z-index: 224;
  position: relative;
  height: 90px;
  border-radius: 10px;
  overflow: hidden;
  background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng31633e386bbda59e950e5c032acc54d940fe3128b4f063d83a161084f4bbd79f)
    100% no-repeat;
  align-self: center;
}

.pic1 {
  z-index: 226;
  position: absolute;
  left: 97px;
  top: 0;
  width: 96px;
  height: 45px;
}

.info7 {
  z-index: 228;
  position: absolute;
  left: 23px;
  top: 17px;
  width: 91px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 18px;
  letter-spacing: 0.2160000056028366px;
  font-family: DINAlternate-Bold;
  white-space: nowrap;
  line-height: 25px;
  text-align: center;
}

.word20 {
  z-index: 230;
  position: absolute;
  left: 122px;
  top: 17px;
  width: 73px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 18px;
  letter-spacing: 0.2160000056028366px;
  font-family: DINAlternate-Bold;
  white-space: nowrap;
  line-height: 25px;
  text-align: center;
}

.word21 {
  z-index: 229;
  position: absolute;
  left: 24px;
  top: 41px;
  width: 116px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 10px;
  letter-spacing: 0.11999999731779099px;
  white-space: nowrap;
  line-height: 14px;
  text-align: center;
}

.pic2 {
  z-index: 225;
  position: absolute;
  left: 199px;
  top: 17px;
  width: 136px;
  height: 73px;
}

.mod1 {
  z-index: 232;
  height: 18px;
  border-radius: 9px;
  background-color: rgba(237, 110, 80, 1);
  width: 80px;
  justify-content: flex-start;
  align-items: center;
  position: absolute;
  left: 24px;
  top: 60px;
}

.txt12 {
  z-index: 233;
  width: 48px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 12px;
  font-family: PingFangSC-Medium;
  white-space: nowrap;
  line-height: 17px;
  text-align: center;
}

.icon6 {
  z-index: 227;
  position: absolute;
  left: 0;
  top: 59px;
  width: 41px;
  height: 31px;
}

.wrap21 {
  z-index: auto;
  width: 330px;
  height: 22px;
  margin: 30px 0 0 20px;
}

.word22 {
  z-index: 211;
  width: 65px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(27, 31, 55, 1);
  font-size: 16px;
  letter-spacing: 0.19200000166893005px;
  font-family: PingFangSC-Medium;
  white-space: nowrap;
  line-height: 22px;
  text-align: center;
}

.word23 {
  z-index: 245;
  width: 25px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(27, 31, 55, 1);
  font-size: 12px;
  letter-spacing: 0.14399999380111694px;
  white-space: nowrap;
  line-height: 17px;
  text-align: left;
  margin: 1px 0 0 230px;
}

.icon7 {
  z-index: 241;
  width: 5px;
  height: 10px;
  margin: 5px 0 0 5px;
}

.wrap24 {
  z-index: auto;
  width: 335px;
  height: 88px;
  justify-content: space-between;
  margin: 9px 0 0 20px;
}

.bd7 {
  z-index: auto;
  width: 225px;
  height: 88px;
}

.info10 {
  z-index: 213;
  width: 225px;
  height: 50px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(27, 31, 55, 1);
  font-size: 14px;
  letter-spacing: 0.1679999977350235px;
  font-family: PingFangSC-Medium;
  line-height: 25px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}

.section1 {
  z-index: auto;
  width: 149px;
  height: 25px;
  margin-top: 13px;
  justify-content: space-between;
}

.word25 {
  z-index: 214;
  width: 68px;
  height: 25px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(141, 146, 175, 1);
  font-size: 12px;
  letter-spacing: 0.14399999380111694px;
  line-height: 25px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}

.info11 {
  z-index: 215;
  width: 71px;
  height: 25px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(141, 146, 175, 1);
  font-size: 12px;
  letter-spacing: 0.14399999380111694px;
  line-height: 25px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bd8 {
  z-index: 217;
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 20px;
  overflow: hidden;
  background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng4b4358c351d14ce6d863cadb963d00b4ab6a161c196afa98cf1a9c4a6e640ec5)
    100% no-repeat;
  margin-top: 3px;
}

.img1 {
  z-index: 218;
  position: absolute;
  left: 0;
  top: 0;
  width: 80px;
  height: 80px;
}

.label11 {
  z-index: 55;
  width: 16px;
  height: 16px;
  align-self: flex-end;
  margin: 6px 24px 0 0;
}

.wrap25 {
  z-index: 39;
  height: 60px;
  border-radius: 19px;
  background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng4a651d032b0546c8735611d8b700e26b3a7851302defe35e7b30105daf7e1c88)
    100% no-repeat;
  align-self: center;
  margin-top: 4px;
  width: 355px;
  justify-content: center;
  align-items: flex-start;
  padding-left: 20px;
}

.outer2 {
  z-index: auto;
  width: 312px;
  height: 35px;
}

.box3 {
  z-index: 40;
  height: 35px;
  border-radius: 9px;
  background-color: rgba(255, 255, 255, 1);
  width: 80px;
  justify-content: center;
  align-items: center;
}

.layer5 {
  z-index: auto;
  width: 54px;
  height: 21px;
  justify-content: space-between;
}

.label12 {
  z-index: 68;
  width: 22px;
  height: 21px;
}

.info12 {
  z-index: 67;
  width: 26px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(62, 79, 175, 1);
  font-size: 10px;
  font-family: PingFangSC-Medium;
  white-space: nowrap;
  line-height: 14px;
  text-align: center;
  margin-top: 4px;
}

.icon8 {
  z-index: 59;
  width: 25px;
  height: 22px;
  margin: 6px 0 0 51px;
}

.label13 {
  z-index: 41;
  width: 22px;
  height: 23px;
  margin: 6px 0 0 54px;
}

.label14 {
  z-index: 48;
  width: 22px;
  height: 22px;
  margin: 6px 0 0 58px;
}

.pic4 {
  z-index: 57;
  width: 134px;
  height: 5px;
  align-self: center;
  margin-top: 8px;
}
</style>