<template>
  <div class="home ">
    <!-- banner -->
    <!--      <div class="hero-title"><span class="red">S</span>pecial</div>
      <div class="hero-title"><span class="red">A</span>ggressive</div>
      <div class="hero-title"><span class="red">I</span>ndependent</div>
      <div class="hero-title"><span class="red">L</span>ong-term mindset.</div>-->
    <div v-if="!isMid && !isSma" style="display: flex;justify-content: space-between;align-items: center; width: 1440px; margin: 0 auto; padding: 0 72px">
      <div class="banner container" v-html="bannerText.content" style="padding-left:0 !important;margin-left: 0 !important; padding-bottom: 0 !important;padding-top: 0 !important;">

      </div>
      <!-- <menu-comp  style="padding-right: 0 !important;margin-right: 0 !important;" /> -->
    </div>
    <div class="banner container" v-else v-html="bannerText.content">

    </div>
    <!-- Latest updates -->
    <div class="updates">
      <div class="container">
        <SideTitleComVue :msg="'Latest updates'" />

        <div class="update-modules flex">
          <!-- module -->
          <div class="update-module" v-for="(item, i) in updateData" :key="item.id">
            <a :href="item.type === 1 ? '/ContentPages?contentId=' + item.id + '&type=news' : (item.link ? item.link: 'javascript:void(0)')" :target="item.type === 1 ? '_self' : (item.link ? '_blank': '')">
              <div class="update-date">{{ transformDate(item.publishedtime) }}</div>
              <h3 class="update-title">{{ item.title }}</h3>
<!--              <p class="update-content">{{ item.description }}</p>-->
            </a>
          </div>
        </div>

        <div class="view-all">
          <!-- to News & Events -->
          <router-link class="red" to="/news">View all</router-link>
        </div>
      </div>

    </div>

    <!-- update research -->
    <div class="research">
      <SideTitleComVue :msg="'Latest Research'" />
      <!-- research component -->
      <template v-for="(item, i) in researchData" :key="item.id">
        <ResearchComVue showDate :data="item" :type="'searchResult'" :isMid="isMid" :isSma="isSma" />
      </template>

      <!-- load more | view all -->
      <div class="view-all">
        <span class="red" style="cursor: pointer" v-if="total !== researchData.length" @click="loadMore">Load more</span>
        <span class="line red"  v-if="total !== researchData.length">|</span>
        <!-- to Research -->
        <router-link class="red" to="/research">View all</router-link>
      </div>
    </div>
  </div>
</template>
<script setup>
import SideTitleComVue from '../components/SideTitleCom.vue';
import ResearchComVue from '../components/ResearchCom.vue';
import { onMounted, ref } from 'vue';
import {getResearch} from "../api/research.js";
import {getNewsApi, getPageApi} from "../api/manage.js";
import {transformDate} from "../utils/tools.js";
import MenuComp from '../components/MenuComp.vue'
// update虚拟数据  update virtual data
const updateData = ref([]);

// research虚拟数据  research virtual data
const researchData = ref([]);

const moreResearchDate = [
  {
    id: 5,
    img: '/images/article_1.png',
    author: 'Joseph Bonneau',
    date: 'Aug.4',
    title: 'Why blockchain performance is hard to measure',
    content:
      '  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget purus et lacus sollicitudin pharetra. Praesent placerat tempus metus, vehicula aliquet metus. Mauris'
  },
  {
    id: 6,
    img: '/images/article_1.png',
    author: 'Joseph Bonneau',
    date: 'Aug.4',
    title: 'Why blockchain performance is hard to measure',
    content:
      '  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget purus et lacus sollicitudin pharetra. Praesent placerat tempus metus, vehicula aliquet metus. Mauris'
  },
  {
    id: 7,
    img: '/images/article_1.png',
    author: 'Joseph Bonneau',
    date: 'Aug.4',
    title: 'Why blockchain performance is hard to measure',
    content:
      '  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget purus et lacus sollicitudin pharetra. Praesent placerat tempus metus, vehicula aliquet metus. Mauris'
  },
  {
    id: 8,
    img: '/images/article_1.png',
    author: 'Joseph Bonneau',
    date: 'Aug.4',
    title: 'Why blockchain performance is hard to measure',
    content:
      '  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget purus et lacus sollicitudin pharetra. Praesent placerat tempus metus, vehicula aliquet metus. Mauris'
  },
];
// 是否为中等屏幕
const isMid = ref(false);
const isSma = ref(false);
const loadCount = ref(1)
const bannerText = ref({});
const total = ref(0)
onMounted(() => {

  // 窗口大小改变时触发
  function changeSize() {
    const pageSize = window.innerWidth;
    if (pageSize >= 1440) {
      isSma.value = false;
      isMid.value = false;
    } else if (pageSize > 430 && pageSize < 1440) {
      isSma.value = false;
      isMid.value = true;
    } else if (pageSize <= 430) {
      isSma.value = true;
      isMid.value = false;
    }
  }
  changeSize()
  window.onresize = changeSize
  getNewsData()
  getResearchData()


  getPageApi({title: 'Home Hero Section'}).then(res=>{
    bannerText.value = res.data
  })
})
// load more
const loadMore = () => {
  loadCount.value ++;
  getResearchData()
}


const getResearchData = ()=>{
  getResearch({page:loadCount.value, limit: 4}).then(({data})=>{
    // console.log()
    total.value = data.total
    if (data.data) {
      researchData.value = [...researchData.value, ...data.data];
    }
  })
}

const getNewsData = ()=>{
  getNewsApi({page:1, limit: window.innerWidth >= 1440 ? 3 : 2}).then(({data})=>{
    if (data) {
      updateData.value = data.data;
    }

  })
}

</script>
<style lang="scss" scoped>
.home {
  .banner {
    max-width: 1000px;
    // height: 442px;
    margin: 0 auto 24px auto;
    position: relative;

    padding-top: 72px;
    z-index: 1;

    .hero-title {
      font-family: 'Cinzel';
      font-style: normal;
      font-weight: 400;
      font-size: 39px;
      line-height: 51px;
    }
  }

  .updates {
    background-color: rgb(236, 236, 236);
    padding: 32px 0;

    .update-modules {
      max-width: 1000px;
      margin: 24px -10px;
      justify-content: space-between;

      .update-module {
        margin-top: 24px;
        width: 308px;
        min-height: 100px;
        border-radius: 0px;
        margin: 0 10px;

        @media screen and (min-width: 431Px) and (max-width: 768Px){
          width: calc(100% / 2 - 40Px);
        }
        .update-date {
          font-family: 'Raleway';
          font-style: normal;
          font-weight: 700;
          font-size: 14px;
          line-height: 21px;
          text-align: justify;
          color: rgba(0, 0, 0, 0.5);
        }

        .update-title {
          font-family: 'Libre Bodoni';
          font-style: normal;
          font-weight: 700;
          font-size: 16px;
          line-height: 24px;
          margin: 8px 0 18px;
          color: rgba(0, 0, 0, 1);
          //text-overflow: ellipsis;
          //overflow: hidden;
          width: 100%;
          //white-space: nowrap;
          -webkit-line-clamp: 3; //（用来限制在一个块元素显示的文本的行数，2 表示最多显示 2 行。为了实现该效果，它需要组合其他的 WebKit 属性）
          display: -webkit-box;//（和 1 结合使用，将对象作为弹性伸缩盒子模型显示 ）
          -webkit-box-orient: vertical;//（和 1 结合使用 ，设置或检索伸缩盒对象的子元素的排列方式 ）
          overflow: hidden;//（文本溢出限定的宽度就隐藏内容）
          text-overflow: ellipsis;//（多行文本的情况下，用省略号 “…” 隐藏溢出范围的文本)

        }

        .update-content {
          font-family: 'Raleway';
          font-style: normal;
          font-weight: 400;
          font-size: 12px;
          line-height: 18px;
          text-align: justify;
          -webkit-line-clamp: 3; //（用来限制在一个块元素显示的文本的行数，2 表示最多显示 2 行。为了实现该效果，它需要组合其他的 WebKit 属性）
          display: -webkit-box;//（和 1 结合使用，将对象作为弹性伸缩盒子模型显示 ）
          -webkit-box-orient: vertical;//（和 1 结合使用 ，设置或检索伸缩盒对象的子元素的排列方式 ）
          overflow: hidden;//（文本溢出限定的宽度就隐藏内容）
        text-overflow: ellipsis;//（多行文本的情况下，用省略号 “…” 隐藏溢出范围的文本)
          color: rgba(0, 0, 0, 0.5);
        }
      }
    }

  }

  .research {
    max-width: 1000px;
    margin: 0 auto;
    padding: 24px 28px;
    margin-bottom: 40px;
  }

  .view-all {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 21px;
    text-align: center;
    padding: 36px 0 12px;

  }

  .red {
    color: #ff6d00;
  }

  .line {
    margin: 0 30px;
  }
}
</style>
