<template>
  <div class="page-home">
    <div class="screen1">
      <div class="banner-wrapper">
        <HomeCarousel
          :carouselData="screen1.carouselData"
          :current.sync="screen1.currentIndicator"
        />
      </div>
      <HomeCarouselIndicator
        class="indicator-wrapper"
        :carouselData="screen1.carouselData"
        :current="screen1.currentIndicator"
        @set-current="handleSetHomeCarouselIndicator"
      />
    </div>
    <div class="screen2">
      <div class="wrapper1680">
        <transition name="fade-slide-bottom">
          <div
            v-show="screen2.offsetLevel >= 0"
            class="text-posi-abs"
            style="--l:1rem;--t:100rem;--ff:MicrosoftYaHeiLight;--fs:14rem;--fw:300;"
          >
            About Us
          </div>
        </transition>
        <transition name="fade-slide-bottom">
          <div
            v-show="screen2.offsetLevel >= 0"
            class="text-posi-abs"
            style="--l:0;--t:170rem;--fs:36rem;--fw:400;--tde:0.3s;"
          >
            关于我们
          </div>
        </transition>
        <transition name="fade-slide-bottom">
          <div
            v-show="screen2.offsetLevel >= 0"
            class="text-posi-abs"
            style="--r:1rem;--t:95rem;--ff:MicrosoftYaHeiSemibold;--fs:14rem;--fw:400;"
          >
            坤合盛世集团&nbsp;&nbsp;&nbsp;&nbsp;—创造并实现共同价值
          </div>
        </transition>
        <transition name="fade-slide-left">
          <div
            v-show="screen2.offsetLevel >= 0"
            class="image-posi-abs"
            style="--l:0;--t:408rem;--w:925rem;--h:490rem;--tde:0.6s;--br:20px;"
          >
            <img
              :src="screen2.imgSrc"
              alt=""
              style="width:100%;height:100%;object-fit: cover;"
            >
          </div>
        </transition>
        <transition name="fade-slide-right">
          <div
            v-show="screen2.offsetLevel >= 0"
            class="text-posi-abs"
            style="--r:0;--t:393rem;--w:616rem;--ff:MicrosoftYaHei;--fs:18rem;--fw:400;--c:#ffffff;--lh:48rem;--ls:-0.9rem;--tde:0.9s;--ws:pre-line;--ta:justify;"
            v-html="screen2.contentCn"
          ></div>
        </transition>
        <transition name="fade-slide-bottom">
          <div
            v-show="screen2.offsetLevel >= 0"
            class="learn-more"
            style="--tde:1.2s;"
          >
            <!-- @click="() => $router.push('/about/companyIntroduction')" -->
            <div class="label">
              了解更多
            </div>
            <div class="icon-wrapper">
              <ArrowHalfRound />
            </div>
          </div>
        </transition>
      </div>
    </div>
    <div class="screen3">
      <div class="wrapper1680">
        <transition name="fade-slide-left">
          <div
            v-show="screen3.offsetLevel >= 0"
            class="text-posi-abs"
            style="--l:0;--t:78rem;--fs:14rem;--fw:400;--c:#010101;"
          >
            Scope of Business
          </div>
        </transition>
        <transition name="fade-slide-left">
          <div
            v-show="screen3.offsetLevel >= 0"
            class="text-posi-abs"
            style="--l:0;--t:150rem;--fs:36rem;--lh:48rem;--fw:400;--c:#000000;--ws:pre-line;--tde:0.6s;"
          >
            <span v-if="screen3.currentIndicator >= 0">{{ screen3.carouselData[screen3.currentIndicator].titleChinese }}</span>
          </div>
        </transition>
        <!-- <transition name="fade-slide-left">
          <div
            v-show="screen3.offsetLevel >= 0"
            class="text-posi-abs"
            style="--l:0;--b:180rem;--fs:14rem;--lh:36rem;--fw:400;--c:#323233;--ws:pre-line;--tde:0.9s;"
          >
            {{ screen3.currentIndicator > -1 ? screen3.carouselData[screen3.currentIndicator].titleEnglish : '' }}
          </div>
        </transition> -->
        <transition name="fade-slide-right">
          <div
            v-show="screen3.offsetLevel >= 0"
            class="box-posi-abs"
            style="--l:0rem;--t:324rem;--w:1680rem;--h:752rem;--tde:0.3s;"
          >
            <BusinessCarousel
              :carouselData="screen3.carouselData"
              :current.sync="screen3.currentIndicator"
            />
          </div>
        </transition>
      </div>
    </div>
    <div class="screen4">
      <div class="wrapper1680">
        <transition name="fade-slide-bottom">
          <div
            v-show="screen4.offsetLevel >= 0"
            class="text-posi-abs"
            style="--l:0;--t:78rem;--fs:14rem;--fw:400;--c:#010101;"
          >
            News Update
          </div>
        </transition>
        <transition name="fade-slide-bottom">
          <div
            v-show="screen4.offsetLevel >= 0"
            class="text-posi-abs"
            style="--l:0;--t:150rem;--fs:36rem;--fw:400;--c:#000000;--tde:0.3s;"
          >
            新闻动态
          </div>
        </transition>
        <div
          class="box-posi-abs"
          style="--l:0;--r:0;--t:280rem;"
        >
          <div class="news-wrapper">
            <div
              v-for="item in screen4.newsData"
              :key="item.id"
              class="news-item"
              @click="() => $router.push('/newsTrend/detail/' + item.id)"
            >
              <div class="news-image">
                <img
                  :src="item.cover"
                  alt=""
                  style="width:100%;height:100%;object-fit:cover;"
                >
              </div>
              <div class="news-info">
                <div class="title">
                  {{ item.captionName }}
                </div>
                <div class="abstracts">
                  {{ item.abstracts }}
                </div>
                <div
                  class="learn-more"
                  @click="() => $router.push('/newsTrend/detail/' + item.id)"
                >
                  <div class="label">
                    了解更多
                  </div>
                  <div class="icon-wrapper">
                    <ArrowHalfRound />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <FootBar
      id="myfooter"
      theme="dark"
    ></FootBar>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex';
import ArrowHalfRound from '@/components/ArrowHalfRound.vue';
import HomeCarousel from './components/HomeCarousel.vue';
import HomeCarouselIndicator from './components/HomeCarouselIndicator.vue';
import BusinessCarousel from './components/BusinessCarousel.vue';
import FootBar from '@/components/FootBar.vue';

export default {
  components: {
    ArrowHalfRound,
    FootBar,
    HomeCarousel,
    HomeCarouselIndicator,
    BusinessCarousel,
  },
  data () {
    return {
      screen1: {
        carouselData: [],
        currentIndicator: -1,
        timer: null,
      },
      screen2: {
        offsets: [700],
        offsetLevel: -1,
        imgSrc: '',
        contentCn: '',
      },
      screen3: {
        offsets: [1700],
        offsetLevel: -1,
        carouselData: [],
        currentIndicator: -1,
      },
      screen4: {
        offsets: [2800],
        offsetLevel: -1,
        newsData: [],
        pageSize: 6,
      },
    };
  },
  computed: {
    ...mapState({
      scrollTop: state => state.scroll.scrollTop,
      webScale: state => state.web.scale,
    }),
  },
  watch: {
    scrollTop (val) {
      const v = val / this.webScale;
      if (v < 50) {
        this.$event.$emit('nav-theme', 'dark');
      } else {
        this.$event.$emit('nav-theme', 'light');
      }
      const i2 = this.screen2.offsetLevel + 1;
      if (v >= this.screen2.offsets[i2]) {
        this.screen2.offsetLevel = i2;
      }
      const i3 = this.screen3.offsetLevel + 1;
      if (v >= this.screen3.offsets[i3]) {
        this.screen3.offsetLevel = i3;
      }
      const i4 = this.screen4.offsetLevel + 1;
      if (v >= this.screen4.offsets[i4]) {
        this.screen4.offsetLevel = i4;
      }
    },
    $route () {
      if (this.$route.hash) {
        this.forceScroll({
          top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
          behavior: 'smooth',
        });
      }
    },
  },
  created () {
    this.$event.$emit('nav-theme', 'dark');
    this.getScreen1CarouselData();
    this.getScreen2Data();
    this.getScreen3CarouselData();
    this.getScreen4NewsData();
  },
  mounted () {
    if (this.$route.hash) {
      this.forceScroll({
        top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
        behavior: 'smooth',
      });
    }
  },
  methods: {
    ...mapMutations(['forceScroll', 'setScrollTop']),
    async getScreen1CarouselData () {
      try {
        const res = await this.$request.get(
          '/official/index/list',
          { params: { pageNum: 1, pageSize: 8, captionName: '首页/banner' } },
        );
        this.screen1.carouselData = res.rows.sort((a, b) => a.orders - b.orders);
        setTimeout(() => {
          this.startHomeCarousel(0);
        }, 10);
      } catch (error) {}
    },
    startHomeCarousel (indicator) {
      this.screen1.currentIndicator = indicator;
      if (this.screen1.timer) {
        clearTimeout(this.screen1.timer);
      }
      this.screen1.timer = setTimeout(() => {
        this.startHomeCarousel((this.screen1.currentIndicator + 1) % this.screen1.carouselData.length);
      }, 6000);
    },
    handleSetHomeCarouselIndicator (indicator) {
      if (indicator === this.screen1.currentIndicator) return;
      this.startHomeCarousel(indicator);
    },
    async getScreen2Data () {
      try {
        const res = await this.$request.get(
          '/official/index/list',
          { params: { pageNum: 1, pageSize: 1, captionName: '首页/about' } },
        );
        this.screen2.imgSrc = res.rows[0].imageurl;
        this.screen2.contentCn = res.rows[0].titleChinese;
      } catch (error) {}
    },
    async getScreen3CarouselData () {
      try {
        const res = await this.$request.get(
          '/official/index/list',
          { params: { pageNum: 1, pageSize: 8, captionName: '首页/businessBanner' } },
        );
        this.screen3.carouselData = res.rows.sort((a, b) => a.orders - b.orders);
        this.screen3.currentIndicator = 0;
      } catch (error) {}
    },
    async getScreen4NewsData () {
      try {
        const res = await this.$request.get('/official/slideshow/list', { params: { pageNum: 1, pageSize: 3, type: '1' } });
        this.screen4.newsData = res.rows;
      } catch (error) {}
    },
  },
};
</script>

<style scoped>
.page-home {
  width: 100%;
}
.screen1 {
  height: calc(100vw * 1080 / 1920);
  max-height: 100vh;
  overflow: hidden;
  position: relative;
}
.screen1 .banner-wrapper {
  height: calc(100vw * 1080 / 1920);
}
.screen1 .indicator-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 293rem;    
  padding-top: 193rem;
  max-width: 1920rem;
  z-index: 100;
  color: #ffffff;
  background-image: url("@/assets/bottomBg.png");
}
.screen2 {
  height: 1080rem;
  background-color: #1B1B1B;
  color: #ffffff;
  position: relative;
}
.screen2 .wrapper1680 {
  height: 100%;
  position: relative;
}
.screen2 .learn-more {
  position: absolute;
  right: 481rem;
  bottom: 181rem;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.screen2 .learn-more .label {
  font-size: 16rem;
  letter-spacing: 6rem;
}
.screen2 .learn-more .icon-wrapper {
  margin-left: 10rem;
}
.screen2 .learn-more .icon-wrapper >>> .svg-wrapper {
  width: 38rem;
  height: 38rem;
}
.screen2 >>> .learn-more:hover .group-hover\:translate-x-0\.5 {
  --tw-translate-x: 2rem;
}
.screen2 >>> .learn-more:hover .group-hover\:dashoffset-0 {
  stroke-dashoffset: 0;
}
.screen3 {
  height: 1155rem;
  background-color: #ffffff;
  overflow: hidden;
}
.screen3 .wrapper1680 {
  height: 100%;
  position: relative;
}
.screen3 .carousel-wrapper {
  position: absolute;
  top: 324rem;
  left: 526rem;
  width: 1100rem;
  height: 690rem;
}
.screen4 {
  height: 1000rem;
  background-color: #EFEFEF;
  position: relative;
}
.screen4 .wrapper1680 {
  position: relative;
  height: 100%;
}
.screen4 .news-wrapper {
  display: flex;
}
.screen4 .news-item {
  flex: 1;
  height: 580rem;
  border-radius: 20rem;
  background-color: #F5F5F7;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  z-index: 1;
}
.screen4 .news-item + .news-item {
  margin-left: 32rem;
}
.screen4 .news-item:hover {
  box-shadow: rgba(28, 28, 30, 0.1) 0rem 0rem 2rem 0rem, rgba(28, 28, 30, 0.1) 0rem 8rem 16rem 0rem;
  z-index: 10;
}
.screen4 .news-image {
  width: 100%;
  height: 350rem;
  overflow: hidden;
}
.screen4 .news-image img {
  transition: transform 0.4s;
}
.screen4 .news-image:hover img {
  transform: scale(1.1, 1.1);
}
.screen4 .news-info {
  padding: 40rem 40rem 0;
}
.screen4 .news-info .title {
  /* width: 380rem; */
  width: 100%;
  font-family: MicrosoftYaHei;
  font-weight: 400;
  font-size: 24rem;
  line-height: 24rem;
  color: #000000;
  /* white-space: nowrap; */
  overflow: hidden;
  /* text-overflow: ellipsis; */
  margin-bottom: 20rem;
}
.screen4 .news-info .abstracts {
 width: 460rem;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    font-size: 14rem;
    line-height: 18rem;
    color: #666666;
    margin-bottom: 33rem;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 30rem;
    -webkit-line-clamp: 2;
    height: 34rem;
    display: -webkit-box;
}
.screen4 .learn-more {
  width: fit-content;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.screen4 .learn-more .label {
  font-size: 16rem;
  font-weight: 400;
  line-height: 40rem;
  color: #111111;
  letter-spacing: 3rem;
  margin-right: 8rem;
}
.screen4 .learn-more .icon-wrapper {
  width: 40rem;
  height: 40rem;
}
.screen4 .learn-more .icon-wrapper >>> .svg-wrapper {
  width: 40rem;
  height: 40rem;
}
.screen4 >>> .learn-more:hover .group-hover\:translate-x-0\.5 {
  --tw-translate-x: 2rem;
}
.screen4 >>> .learn-more:hover .group-hover\:dashoffset-0 {
  stroke-dashoffset: 0;
}
</style>
