<template>
  <div id="mobile_view">
    <!-- 背景 -->
    <div
      id="background"
      :style="`transform: translateY(${translateDistance}%)`"
    ></div>
    <!-- logo -->
    <h1 id="logo"></h1>
    <!-- 页面 -->
    <div id="pages">
      <div v-show="current == 0" class="page" id="page_download">
        <div
          class="img"
          :class="[
            current == 0 ? 'animateDownloadHandIn' : 'animateDownloadHandOut',
          ]"
          id="page_download_hand"
        ></div>
        <div id="page_download_show">
          <div id="page_download_show_top">
            <div
              id="page_download_text"
              :class="[
                current == 0
                  ? 'animateDownloadTextIn'
                  : 'animateDownloadTextOut',
              ]"
            >
              消防维保助手
              <div>即时同步新地标规范，强制约束规范填写</div>
            </div>
          </div>
        </div>
        <a
          href="https://xfwbtg.crgx.net/xfwb_quotation.pdf"
          download="消防维保公网报价单.pdf"
          id="page_download_button1"
          :class="[
            current == 0
              ? 'animateMobileDownloadButtonIn'
              : 'animateMobileDownloadButtonOut',
          ]"
        >
          <div id="page_download_button_top" style="position: relative">
            <div class="page_download_button_text">
              <img
                class="page_download_button_icon"
                src="../assets/images/download.png"
                alt="查看报价"
              />
              <span>查看完整报价</span>
            </div>
          </div>
        </a>
        <a
          href="http://xfappgt.crgx.net/profile/upload/2023/09/01/xf_app_2023090101_20230901163308A004.apk"
          id="page_download_button"
          :class="[
            current == 0
              ? 'animateMobileDownloadButtonIn'
              : 'animateMobileDownloadButtonOut',
          ]"
        >
          <div id="page_download_button_top">
            <div id="page_download_mobile_iPhone"></div>
            <div id="page_download_mobile_android"></div>
          </div>
        </a>
      </div>
      <div v-show="current == 1" class="page" id="page_function1">
        <div id="page_function1_text">
          <h1
            id="page_function1_text_title"
            :class="[
              current == 1 ? 'animateMobileTextIn' : 'animateMobileTextOut',
            ]"
          >
            维保原始记录电子化
          </h1>
          <h2
            id="page_function1_text_sub"
            :class="[
              current == 1 ? 'animateMobileTextIn' : 'animateMobileTextOut',
            ]"
          >
            实时记录，远程可查。精心打磨，只为你极速体验。
          </h2>
        </div>
        <div id="page_function1_show">
          <div id="page_function1_show_top">
            <div id="page_function1_book">
              <div
                id="page_function1_book_page3"
                :class="[
                  current == 1
                    ? 'animateDownloadTextIn'
                    : 'animateDownloadTextOut',
                ]"
              ></div>
              <div
                id="page_function1_book_page2"
                :class="[
                  current == 1
                    ? 'animateDownloadHandIn'
                    : 'animateDownloadHandOut',
                ]"
              ></div>
              <div
                id="page_function1_book_page1"
                :class="[
                  current == 1
                    ? 'animateFunction1BookPage1In'
                    : 'animateFunction1BookPage1Out',
                ]"
              ></div>
            </div>
          </div>
        </div>
      </div>
      <div v-show="current == 2" class="page" id="page_function2">
        <div id="page_function2_text">
          <h1
            id="page_function2_text_title"
            :class="[
              current == 2 ? 'animateMobileTextIn' : 'animateMobileTextOut',
            ]"
          >
            电子签名
          </h1>
          <h2
            id="page_function2_text_sub"
            :class="[
              current == 2 ? 'animateMobileTextIn' : 'animateMobileTextOut',
            ]"
          >
            甲乙双方共通约束，省时省力节约时间
          </h2>
        </div>
        <div id="page_function2_show">
          <div id="page_function2_show_top">
            <div id="page_function2_book">
              <div
                id="page_function2_book_06"
                :class="[
                  current == 2
                    ? 'animateFunction2BookIn'
                    : 'animateFunction2BookOut',
                ]"
              ></div>
              <div
                id="page_function2_book_05"
                :class="[
                  current == 2
                    ? 'animateFunction2BookIn'
                    : 'animateFunction2BookOut',
                ]"
              ></div>
              <div
                id="page_function2_book_04"
                :class="[
                  current == 2
                    ? 'animateFunction2BookIn'
                    : 'animateFunction2BookOut',
                ]"
              >
                传统手写
              </div>
              <div
                id="page_function2_book_03"
                :class="[
                  current == 2
                    ? 'animateFunction2BookIn'
                    : 'animateFunction2BookOut',
                ]"
              >
                智能签名
              </div>
              <div
                id="page_function2_book_01"
                :class="[
                  current == 2
                    ? 'animateFunction2BookIn'
                    : 'animateFunction2BookOut',
                ]"
              >
                VS
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-show="current == 3" class="page" id="page_function3">
        <div id="page_function3_text">
          <h1
            id="page_function3_text_title"
            :class="[
              current == 3 ? 'animateMobileTextIn' : 'animateMobileTextOut',
            ]"
          >
            资质证明
          </h1>
          <h2
            id="page_function3_text_sub"
            :class="[
              current == 3 ? 'animateMobileTextIn' : 'animateMobileTextOut',
            ]"
          >
            已取得著作权证书，放心使用
          </h2>
        </div>
        <div id="page_function3_show">
          <div id="page_function3_show_top">
            <div id="page_function3_talk">
              <div
                id="page_function3_book"
                :class="[
                  current == 3
                    ? 'animateFunction3BookIn'
                    : 'animateFunction3BookOut',
                ]"
              ></div>
            </div>
          </div>
        </div>
      </div>
      <div v-show="current == 4" class="page" id="page_function3">
        <div id="page_function3_text">
          <h1
            id="page_function3_text_title"
            :class="[
              current == 4 ? 'animateMobileTextIn' : 'animateMobileTextOut',
            ]"
          >
            随时打印
          </h1>
          <h2
            id="page_function3_text_sub"
            :class="[
              current == 4 ? 'animateMobileTextIn' : 'animateMobileTextOut',
            ]"
          >
            纸质文档随时打印，按需留档
          </h2>
        </div>
        <div id="page_function5_show">
          <div id="page_function5_show_top">
            <div id="page_function5_talk">
              <div
                id="page_function5_book"
                :class="[
                  current == 4
                    ? 'animateFunction3BookIn'
                    : 'animateFunction3BookOut',
                ]"
              ></div>
            </div>
          </div>
        </div>
      </div>
      <div v-show="current == 5" class="page" id="page_function4">
        <div id="page_function4_text">
          <h1
            id="page_function4_text_title"
            :class="[
              current == 5 ? 'animateMobileTextIn' : 'animateMobileTextOut',
            ]"
          >
            联系我们
          </h1>
          <h2
            id="page_function4_text_sub"
            :class="[
              current == 5 ? 'animateMobileTextIn' : 'animateMobileTextOut',
            ]"
          >
            <p>广西世纪创软信息技术有限公司</p>
            <p>邮箱：weiyi@crgx.net</p>
            <p>非©广西消防救援总队出品</p>
          </h2>
        </div>
        <div id="page_function4_show">
          <div id="page_function4_show_top">
            <div id="page_function4_talk">
              <div
                id="page_function4_show_title"
                :class="[
                  current == 5 ? 'animateFunction4In' : 'animateFunction4In',
                ]"
              >
                广西壮族自治区南宁市青秀万达银座520室
              </div>
              <div
                id="page_function4_book"
                :class="[
                  current == 5
                    ? 'animateFunction4BookIn'
                    : 'animateFunction4BookOut',
                ]"
              ></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 向下箭头 -->
    <div v-show="current < 5" class="animateArrowDown" id="arrow_down"></div>
  </div>
</template>

<script>
export default {
  name: "MobileHomePage",
  data() {
    return {
      current: 0,
      startScreen: 0,
      isScroll: true,
      translateDistance: 0,
    };
  },
  mounted() {
    document.addEventListener("touchstart", (e) => {
      this.startScreen = e.changedTouches[0].screenY;
    });
    document.addEventListener("touchmove", (e) => {
      if (this.startScreen - e.changedTouches[0].screenY > 10) {
        if (this.isScroll) {
          this.isScroll = false;
          this.current++;
          if (this.current > 5) {
            this.current = 5;
          }
          this.translateDistance = -this.current * 16;
          const timer = setTimeout(() => {
            this.isScroll = true;
            clearTimeout(timer);
          }, 600);
        }
      } else if (this.startScreen - e.changedTouches[0].screenY < -10) {
        if (this.isScroll) {
          this.isScroll = false;
          this.current--;
          if (this.current < 0) {
            this.current = 0;
          }
          this.translateDistance = -this.current * 16;
          const timer = setTimeout(() => {
            this.isScroll = true;
            clearTimeout(timer);
          }, 600);
        }
      }
    });
  },
  beforeUnmount() {
    document.removeEventListener("touchstart", () => {});
    document.removeEventListener("touchmove", () => {});
  },
};
</script>
<style scoped>
@import "../assets/css/index-mobile.css";
@import "../assets/css/home-mobile.css";
</style>