<template>
  <div class="camp-index">
    <el-header height="104px">
      <Header></Header>
      <div class="bg-top"></div>
    </el-header>
    <div class="com-container">
      <div class="index-container">
        <div class="camp_left" ref="leftBoxFu">
          <ul class="camp_left_box" ref="leftBox" :class="{
                    'is-fixed':isPosition==1,
                    'is-absolute':isPosition==2,
                }">
            <li
              v-for="(item, index) in tabs"
              :key="index"
              :class="{ active: campindex_type === index }"
              @click="ToSignUp(index)"
            >
              <img :src="item.image" />
              {{ item.desc }}
            </li>
          </ul>
        </div>

        <div class="camp_right" ref="rightBox">
          <router-view />
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
  import Header from "@/components/index/SignUp/Header.vue";
  import Footer from "@/components/index/Footer.vue";

  export default {
    name: "campIndex",
    components: {
      Header,
      Footer,
    },
    data() {
      return {
        type: 1,
        isPosition: 0,// 左侧box是否浮动
        pageYOffset: 0,// 左侧box浮动时，滚动的高度
        scorllHeight: 0,// 最大滚动高度
        tabs: [
          {
            id: "0",
            desc: "营地报名",
            image: require("@/assets/img/signUp/icon-bm.png"),
          },
          {
            id: "1",
            desc: "营地作业",
            image: require("@/assets/img/signUp/icon-zs.png"),
          },
          {
            id: "2",
            desc: "营地证书",
            image: require("@/assets/img/signUp/icon-zy.png"),
          },
        ],

        campindex_type: "",
      };
    },
    watch: {
      type(val) {
        window.localStorage.setItem("campindex_type", val);
      },
    },
    created() {
      window.localStorage.setItem("campindex_type", 0);
      this.campindex_type = window.localStorage.getItem("campindex_type");
    },
    mounted() {
      window.addEventListener('scroll', this.handleScrollX, true);
      window.addEventListener('resize', this.onResize, true);
    },
    beforeDestroy() {
      window.removeEventListener('scroll', this.handleScrollX, true);
      window.removeEventListener('resize', this.onResize, true);
    },
    methods: {
      ToSignUp(index) {
        this.campindex_type = index;
        if (this.campindex_type == 0) {
          this.$router.replace({name: "index-signUp"});
        } else if (this.campindex_type == 1) {
          this.$router.replace({name: "index-homework"});
        } else if (this.campindex_type == 2) {
          this.$router.replace({name: "index-certificate"});
        }
      },
      onResize() {
        const refLeft = this.$refs['leftBox'];
        const leftBoxFu = this.$refs['leftBoxFu'];
        refLeft.style.width = leftBoxFu.offsetWidth + 'px';
      },
      // 页面滚动事件
      handleScrollX() {
        const top = document.documentElement.scrollTop || document.body.scrollTop;
        const refLeft = this.$refs['leftBox'];
        const leftBoxFu = this.$refs['leftBoxFu'];
        const refRight = this.$refs['rightBox'];
        if (top > 0) {
          if (this.isPosition == 0) {
            this.scorllHeight = refRight.offsetHeight - refLeft.offsetHeight;
            refLeft.style.width = leftBoxFu.offsetWidth + 'px';
          }
          this.isPosition = 1;
        } else {
          if (this.isPosition = 1) {
            this.isPosition = 0;
          }
        }
        if (top >= this.scorllHeight) {
          if (this.isPosition == 1) {
            this.isPosition = 2;
          }
        } else if (top < this.scorllHeight) {
          if (this.isPosition == 2) {
            this.isPosition = 1;
            refLeft.style.width = leftBoxFu.offsetWidth + 'px';
          }
        }
      },
      ToHomework() {
        this.$router.replace({name: "index-homework"});
        this.type = 2;
      },
      ToCertificate() {
        this.$router.replace({name: "index-certificate"});
        this.type = 3;
      },
    },
  };
</script>

<style lang="scss" scoped>
  @import "a/scss/common";

  .camp-index {
    background: #f8f8f8;

    .el-header {
      position: fixed;
      width: 100%;
      padding: 0;
      background-color: #ffffff;
      z-index: 10000;

      .bg-top {
        height: 24px;
        background-color: #f8f8f8;
      }
    }

    .index-container {
      padding: 104px 0 70px 0;
      display: flex;
      flex-flow: row;

      .camp_left {
        position: relative;
        width: 24%;
        max-width: 280px;
        min-width: 200px;
        border-radius: 8px;
        margin-right: 24px;

        .camp_left_box {
          max-width: 280px;
          min-width: 200px;
          height: 300px;
          background-color: #ffffff;
          border-radius: 8px;
          padding: 20px 0;
          margin: 0;

          &.is-fixed {
            position: fixed;
            top: 104px;
            /*width: 14.4%;*/
            max-width: 280px;
            min-width: 216px;
          }

          &.is-absolute {
            position: absolute;
            bottom: 0;
            width: 100%;
          }

          li {
            position: relative;
            padding: 0 23px;
            height: 44px;
            line-height: 44px;
            margin: 10px 0;
            font-size: 15px;
            list-style: none;

            img {
              vertical-align: middle;
              margin: -3px 8px 0 0;
              width: 20px;
            }

            &.active,
            &:hover {
              cursor: pointer;
              background-color: #F8F8F8;
            }
          }
        }
      }

      .camp_right {
        flex: 1;
        border-radius: 8px;
        background-color: #ffffff;
      }
    }
  }

</style>
