<template>
  <div class="page-construction">
    <div class="screen1">
      <div style="height:104rem;"></div>
    </div>
    <div class="screen2">
      <div class="wrapper1680">
        <transition name="fade-slide-bottom">
          <div
            v-show="screen2.show"
            class="text-posi-abs"
            style="--t:53rem;--l:0rem;--c:#ff0000;"
          >
            {{ screen2.title }}
          </div>
        </transition>
        <transition name="fade-slide-bottom">
          <div
            v-show="screen2.show"
            class="text-posi-abs"
            style="--t:99rem;--l:0rem;--fs:72rem;--c:#111111;--ff:MicrosoftYaHeiLight;--tde:0.3s;"
          >
            商业管理
          </div>
        </transition>
        <transition name="fade-slide-bottom">
          <div
            v-show="screen2.show"
            class="text-posi-abs"
            style="--t:93rem;--r:8rem;--w:650rem;--fs:22rem;--lh:30rem;--c:#111111;--ff:MicrosoftYaHeiLight;--ws:pre-line;--ta:justify;--tde:0.6s;text-indent: 1.5em;"
          >
            {{ screen2.contentCn }}
          </div>
        </transition>
        <transition name="fade-slide-bottom">
          <div
            v-show="screen2.show"
            class="image-posi-abs"
            style="--l:1rem;--t:447rem;--w:1680rem;--h:620rem;--tde:0.9s;"
          >
            <img
              :src="screen2.imageSrc"
              alt=""
              style="width:100%;height:100%;"
            >
          </div>
        </transition>
      </div>
    </div>
    <div class="screen3">
      <div class="wrapper1680">
        <transition name="fade-slide-bottom">
          <div
            v-show="screen3.offsetLevel >= 0"
            class="text-posi-abs"
            style="--t:115rem;--r:0rem;--w:100%;--fs:42rem;--c:#111111;--ff:MicrosoftYaHeiLight;--ws:pre-line;--ta:center;"
          >
            {{ screen3.titleCn }}
          </div>
        </transition>
        <transition name="fade-slide-bottom">
          <div
            v-show="screen3.offsetLevel >= 0"
            class="text-posi-abs"
            style="--t:197rem;--r:0rem;--w:100%;--fs:20rem;--lh:35rem;--c:#111111;--ff:MicrosoftYaHeiLight;--ws:pre-line;--ta:center;--tde:0.3s;"
          >
            {{ screen3.contentCn }}
          </div>
        </transition>
        <div class="list-wrapper">
          <div
            v-for="(item, index) in screen3.list"
            :key="item.id"
            class="list-item"
          >
            <transition name="scale">
              <div
                v-show="screen3.offsetLevel >= 0"
                class="list-img"
                :style="`--tde:${0.6 + index * 0.05}s;`"
              >
                <img
                  :src="item.imageurl"
                  alt=""
                >
              </div>
            </transition>
            <transition name="fade-slide-bottom">
              <div
                v-show="screen3.offsetLevel >= 0"
                class="list-title"
                :style="`--tde:${0.9 + index * 0.05}s;`"
              >
                {{ item.businessName }}
              </div>
            </transition>
            <transition name="fade-slide-bottom">
              <div
                v-show="screen3.offsetLevel >= 0"
                class="list-content"
                :style="`--tde:${1.2 + index * 0.05}s;`"
              >
                {{ item.titleChinese }}
              </div>
            </transition>
          </div>
        </div>
      </div>
    </div>
    <div class="screen4">
      <div class="wrapper1680">
        <div
          v-for="(item, index) in screen4.list"
          :key="item.id"
          class="list-item"
        >
          <transition :name="'curtain-' + (index % 2 === 0 ? 'right' : 'left')">
            <div
              class="content-wrapper"
              :style="`--tdu:0.5s;--initial:#f5f5f8;`"
            >
              <div class="title">
                {{ item.businessName }}
              </div>
              <div class="content">
                {{ item.titleChinese }}
              </div>
            </div>
          </transition>
          <transition :name="'curtain-' + (index % 2 === 0 ? 'right' : 'left')">
            <div
              class="image-wrapper"
              :style="`--tdu:0.5s;--tde:0.5s;--initial:#f5f5f8;`"
            >
              <img
                :src="item.imageurl"
                alt=""
                style="width:100%;height:100%;"
              >
            </div>
          </transition>
        </div>
      </div>
    </div>
    <div class="screen5">
      <div class="wrapper1680">
        <div
          class="box-posi-abs"
          style="--t:90rem;--w:100%;--h:1rem;"
        >
          <div class="split-line"></div>
        </div>
        <div
          class="image-posi-abs"
          style="--l:1rem;--r:1rem;--t:180rem;--w:1680rem;--h:550rem;"
        >
          <img
            :src="screen5.joinUs.imageSrc"
            alt=""
            style="width:100%;height:100%;"
          >
        </div>
        <transition name="fade-slide-left">
          <div
            v-show="screen5.offsetLevel >= 1"
            class="text-posi-abs"
            style="--t:333rem;--l:118rem;--fs:30rem;--c:#ffffff;"
          >
            {{ screen5.joinUs.title }}
          </div>
        </transition>
        <div
          class="text-posi-abs"
          style="--t:402rem;--l:117rem;--w:536rem;--fs:16rem;--lh:24rem;--c:#ffffff;--ff:MicrosoftYaHeiLight;--ta:justify;"
        >
          {{ screen5.joinUs.contentCn }}
        </div>
        <div
          class="text-posi-abs"
          style="--l:118rem;--t:523rem;--w:209rem;--h:57rem;--fs:24rem;--lh:57rem;--ff:MicrosoftYaHeiSemiBold;--ta:center;background-color:#ffffff;border-radius:28rem;cursor: pointer;"
          @click="$router.push('/recruit/socialRecruit')"
        >
          <span class="join-btn-text">JOIN US</span>
        </div>
      </div>
    </div>
    <FootBar
      id="myfooter"
      theme="dark"
    ></FootBar>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex';
import FootBar from '@/components/FootBar.vue';
export default {
  components: { FootBar },
  data () {
    return {
      screen2: {
        show: false,
        title: '',
        contentCn: '',
        imageSrc: '',
      },
      screen3: {
        offsets: [800],
        offsetLevel: -1,
        titleCn: '',
        contentCn: '',
        list: [],
      },
      screen4: {
        offsets: [1700, 2000],
        offsetLevel: -1,
        list: [],
      },
      screen5: {
        offsets: [2900, 3900],
        offsetLevel: -1,
        keyCase: {
          title: '',
          contentCn: '',
        },
        plateList: [],
        joinUs: {
          title: '',
          contentCn: '',
          imageSrc: '',
        },
      },
    };
  },
  computed: {
    ...mapState({
      scrollTop: state => state.scroll.scrollTop,
      webScale: state => state.web.scale,
    }),
  },
  watch: {
    scrollTop (val) {
      const v = val / this.webScale;
      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;
      }
      const i5 = this.screen5.offsetLevel + 1;
      if (v >= this.screen5.offsets[i5]) {
        this.screen5.offsetLevel = i5;
      }
    },
    $route () {
      if (this.$route.hash) {
        this.forceScroll({
          top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
          behavior: 'smooth',
        });
      }
    },
  },
  mounted () {
    if (this.$route.hash) {
      this.forceScroll({
        top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
        behavior: 'smooth',
      });
    }
  },
  created () {
    this.$event.$emit('nav-theme', 'light');
    this.getScreen2Data();
    this.getScreen3Data();
    this.getScreen3ListData();
    this.getScreen4ListData();
    this.getScreen5JoinusData();
  },
  methods: {
    ...mapMutations(['forceScroll', 'setScrollTop']),
    async getScreen2Data () {
      try {
        const res = await this.$request.get(
          '/official/index/list',
          { params: { pageNum: 1, pageSize: 1, captionName: '业务领域/商业管理/主要内容' } },
        );
        this.screen2.title = res.rows[0].businessName;
        this.screen2.contentCn = res.rows[0].titleChinese;
        this.screen2.imageSrc = res.rows[0].imageurl;
        this.screen2.show = true;
      } catch (error) {}
    },
    async getScreen3Data () {
      try {
        const res = await this.$request.get(
          '/official/index/list',
          { params: { pageNum: 1, pageSize: 1, captionName: '业务领域/商业管理/项目描述' } },
        );
        this.screen3.titleCn = res.rows[0].businessName;
        this.screen3.contentCn = res.rows[0].titleChinese;
      } catch (error) {}
    },
    async getScreen3ListData () {
      try {
        const res = await this.$request.get(
          '/official/index/list',
          { params: { pageNum: 1, pageSize: 6, captionName: '业务领域/商业管理/项目案例' } },
        );
        this.screen3.list = res.rows.sort((a, b) => a.orders - b.orders);
      } catch (error) {}
    },
    async getScreen4ListData () {
      try {
        const res = await this.$request.get(
          '/official/index/list',
          { params: { pageNum: 1, pageSize: 4, captionName: '业务领域/商业管理/技术支持' } },
        );
        this.screen4.list = res.rows.sort((a, b) => a.orders - b.orders);
      } catch (error) {}
    },
    async getScreen5JoinusData () {
      try {
        const res = await this.$request.get(
          '/official/index/list',
          { params: { pageNum: 1, pageSize: 1, captionName: '业务领域/商业管理/joinus' } },
        );
        this.screen5.joinUs.title = res.rows[0].businessName;
        this.screen5.joinUs.contentCn = res.rows[0].titleChinese;
        this.screen5.joinUs.imageSrc = res.rows[0].imageurl;
      } catch (error) {}
    },
  },
};
</script>

<style scoped>
.page-construction {
  width: 100%;
}
.screen1 {
  position: relative;
  z-index: 1;
  background-color: #ffffff;
}
.screen2 {
  position: relative;
  height: 1186rem;
  background-color: #ffffff;
}
.screen2 .wrapper1680 {
  height: 100%;
  box-sizing: border-box;
  position: relative;
  border-bottom: 1rem solid;
  border-image: radial-gradient(circle, rgba(193, 200, 221, 1), rgba(191, 199, 222, 1), rgba(195, 203, 223, 1), rgba(175, 185, 208, 1)) 1 1;
}
.screen3 {
  position: relative;
  height: 1300rem;
  background-color: #ffffff;
}
.screen3 .wrapper1680 {
  height: 100%;
  position: relative;
}
.screen3 .list-wrapper {
  position: absolute;
  top: 400rem;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 0px 140rem;
  box-sizing: border-box;
}
.screen3 .list-item {
  margin: 0 58rem;
  width: 350rem;
  height: 350rem;
  margin-bottom: 90rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.screen3 .list-item:hover {
  transform: scale(1.1, 1.1);
}
.screen3 .list-img {
  width: 150rem;
  height: 150rem;
  margin-bottom: 40rem;
}
.screen3 .list-title {
  text-align: center;
  font-size: 20rem;
  line-height: 1;
  color: #111111;
  margin-bottom: 26rem;
}
.screen3 .list-content {
  width: 280rem;
  white-space: normal;
  text-align: center;
  font-family: MicrosoftYaHeiLight;
  font-size: 14rem;
  line-height: 22rem;
  color: #333333;
}
.screen4 {
  position: relative;
  height: 2410rem;
  background-color: #F5F5F8;
}
.screen4 .wrapper1680 {
  padding: 124rem 0;
}
.screen4 .list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.screen4 .list-item:nth-of-type(2n-1) {
  flex-direction: row;
}
.screen4 .list-item:nth-of-type(2n) {
  flex-direction: row-reverse;
}
.screen4 .list-item + .list-item {
  margin-top: 52rem;
}
.screen4 .content-wrapper {
  width: 755rem;
}
.screen4 .content-wrapper .title {
  padding: 0 1rem;
  font-family: MicrosoftYaHeiLight;
  font-size: 42rem;
  color: #111111;
  margin-bottom: 36rem;
}
.screen4 .content-wrapper .content {
  padding: 5rem;
  font-family: MicrosoftYaHeiLight;
  font-size: 20rem;
  line-height: 36rem;
  text-indent: 1.5em;
}
.screen4 .list-item:nth-of-type(2n) .content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.screen4 .list-item:nth-of-type(2n) .content-wrapper .content {
  text-align: left;
}
.screen4 .image-wrapper {
  width: 752rem;
  height: 510rem;
  border-radius: 20rem;
  overflow: hidden;
}
.screen4 .image-wrapper img {
  width: 100%;
  height: 100%;
  transition: transform 0.4s;
}
.screen4 .image-wrapper:hover img {
  transform: scale(1.1);
}
.screen5 {
  position: relative;
  height: 823rem;
  background-color: #ffffff;
}
.screen5 .wrapper1680 {
  height: 100%;
  position: relative;
}
.screen5 .plate-wrapper {
  display: flex;
  justify-content: space-between;
}
.screen5 .plate-item {
  width: 325rem;
  height: 302rem;
  position: relative;
  cursor: pointer;
  border-radius: 20rem;
}
.screen5 .plate-item:hover {
  overflow: hidden;
  box-shadow: 8rem 8rem 25rem 3rem #5E5E5E11;
}
.screen5 .plate-item:hover img {
  transition: transform 0.4s;
  transform: scale(1.1, 1.1);
}
.screen5 .split-line {
  border-bottom: 1rem solid;
  border-image: radial-gradient(circle, rgba(193, 200, 221, 1), rgba(191, 199, 222, 1), rgba(195, 203, 223, 1), rgba(175, 185, 208, 1)) 1 1;
}
.screen5 .join-btn-text {
  background-image: linear-gradient(90deg, #FF0300, #FFAA05);
  background-clip: text;
  color: transparent;
}
</style>
