<template>
  <div class="page" :class="{'mobile':_isMobile,'pc':!_isMobile}">
    <div class="main_content" id="main" :class="{'small':_isMobile && isSmall,'big':_isMobile && isBig}">
      <div class="top" :class="{'small':_isMobile && isSmall,'big':_isMobile && isBig}">
        <div class="page_title">{{$t('strings.homeTitle')}}</div>
        <div class="picture-box">
          <img class="page_bg2" src="../assets/images/gesture/swiper1big_new.png" alt srcset />
          <div class="page_tips_1 page_tips">{{$t('strings.homeText1')}}</div>
          <div class="page_tips_2 page_tips">{{$t('strings.homeText2')}}</div>
          <div class="page_tips_3 page_tips">{{$t('strings.homeText3')}}</div>
        </div>
      </div>
      <div class="global_box">
        <img class="global_img" @click="clickGlobalPopup" src="../assets/images/gesture/icon_global.png" alt srcset />
        <div class="popup-box" v-if="showPopup">
          <img class="popup_bg" src="../assets/images/gesture/popup.png" alt srcset />
          <div class="poup-item" :class="{'active':currentLanguage === index}" v-for="(item,index) in languageList" :key="item" @click="clickLanguage(index)">
            <img v-if="currentLanguage === index" class="icon" src="../assets/images/gesture/select.png" alt srcset />
            <div v-else></div>
            <span>{{item}}</span>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="gesture_select_box">
          <div class="gesture_title">{{$t('strings.lactationModeText')}}</div>
          <div class="gesture_list_box">
            <div class="gesture_item_box" v-for="item in gestureList" @click="clickGestureItem(item)">
              <img class="img" :src="item.image" alt srcset />
              <div class="title">{{$t(item.title)}}</div>
              <div class="sub_title">{{$t(item.subTitle)}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  calcAdapt,
  isBigScreen,
  isSmallScreen,
  authCamera,
  isMobile,
  getSystemInfo
} from "../common/util";
import lightButton from "../components/lightButton.vue";
import DevicePixelRatio from "../utils/evicePixelRatio.js";
import homeGestureImg1 from "../assets/images/gesture/home-gesture-1.png";
import homeGestureImg2 from "../assets/images/gesture/home-gesture-2.png";

let calcs = calcAdapt();
let scale;
const calcCoord = function () {
  let width = 0;
  let height = 0;
  if (!isMobile()) {
    width = 375;
    height =
      document.body.clientHeight > 667 ? document.body.clientHeight : 667;
  } else {
    width = document.body.clientWidth;
    height = document.body.clientHeight;
  }
  if (height === 0) {
    height = window.innerHeight;
    if (!isMobile()) {
      height = window.innerHeight > 667 ? window.innerHeight : 667;
    }
  }
  scale = height / width;
  let k = +scale.toFixed(2);
  if (k >= 2.16) {
    k = 2.16;
  } else if (k <= 1.78) {
    k = 1.78;
  }
  return calcs.calcCoord.call(null, ...arguments, k);
};
export default {
  data() {
    return {
      showNoCameraDialog: false,
      topHeiht: 0,
      isBig: isBigScreen(),
      isSmall: isSmallScreen(),
      scale: scale,
      currentLanguage: 0,
      showPopup: false,
      languageList: ["English", "Français", "Español"],
      cL: calcCoord({ minTop: 23.5, maxTop: 15.5 }).top + "px",
      cT: calcCoord({ minTop: 23.5, maxTop: 33.5 }).top + "px",
      cB: calcCoord({ minTop: 20, maxTop: 40 }).top + "px",
      cTs: calcCoord({ minTop: 20, maxTop: 30 }).top + "px", // title fontsize
      cTb: calcCoord({ minTop: 15, maxTop: 15 }).top + "px", // title bottom
      cCs: calcCoord({ minTop: 10, maxTop: 20 }).top + "px", // content
      pageHeight: "",
      _isMobile: false,
      scale: 0,
      gestureList: [
        {
          code: "0",
          title: "strings.sittingGesture.title",
          subTitle: "strings.sittingGesture.subTitle",
          path: "",
          image: homeGestureImg2
        },
        {
          code: "1",
          title: "strings.lyingGesture.title",
          subTitle: "strings.lyingGesture.subTitle",
          path: "",
          image: homeGestureImg1
        }
      ]
    };
  },
  components: {
    lightButton
  },
  methods: {
    clickGlobalPopup() {
      this.showPopup = !this.showPopup;
    },
    clickLanguage(index) {
      this.showPopup = false;
      this.currentLanguage = index;
      let lang = "zh";
      if (index === 0) {
        lang = "en";
      } else if (index === 1) {
        lang = "fr";
      } else if (index === 2) {
        lang = "es";
      }
      this.$i18n.locale = lang;
      localStorage.setItem("lang", lang);
    },
    clickGestureItem(val) {
      let lying = Number(val.code);
      let usagetrackingkey = "";
      if (this.$route.query.usagetrackingkey != null) {
        usagetrackingkey = this.$route.query.usagetrackingkey;
      }
      let query = {
        lying: lying
      }
      if (usagetrackingkey) {
        query.usagetrackingkey = usagetrackingkey;
      }
      this.$router.push({
        path: "/introduce",
        query: query
      });
    }
  },
  created() {
    // document.body.addEventListener(
    //   "touchmove",
    //   function (e) {
    //     e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果)
    //   },
    //   { passive: false }
    // ); //passive 参数不能省略，用来兼容ios和android
    let { scale } = getSystemInfo();
    if (scale > 1 && scale < 2) {
      this.scale = 1 - (scale - 1) / 100;
      console.log(this.scale);
    }
    let lang = localStorage.getItem("lang");
    if (lang) {
      this.$i18n.locale = lang;
    } else {
      this.$i18n.locale = "en";
    }
    if (this.$i18n.locale == "en") {
      this.currentLanguage = 0;
    } else if (this.$i18n.locale == "fr") {
      this.currentLanguage = 1;
    } else if (this.$i18n.locale == "es") {
      this.currentLanguage = 2;
    }
    this._isMobile = isMobile();
    if (!isMobile()) {
      document.getElementsByTagName("body")[0].style.minWidth = "750px";
      this.topHeiht = calcCoord({ minTop: 459, maxTop: 571.3 }).top;
      this.topHeiht = 521.3;
    } else {
      this.topHeiht = calcCoord({ minTop: 918, maxTop: 1142.6 }).top;
    }

    if (!this._isMobile) {
      this.topHeiht = this.topHeiht + "px";
      this.cL = calcCoord({ minTop: 23.5, maxTop: 25.5 }).top + "px";
      this.cT = calcCoord({ minTop: 23.5, maxTop: 33.5 }).top + "px";
      this.cB = calcCoord({ minTop: 20, maxTop: 40 }).top + "px";
      this.cTs = calcCoord({ minTop: 20, maxTop: 30 }).top + "px"; // title fontsize
      this.cTb = calcCoord({ minTop: 15, maxTop: 15 }).top + "px"; // title bottom
      this.cCs = calcCoord({ minTop: 10, maxTop: 20 }).top + "px"; // content
    } else {
      this.topHeiht = this.topHeiht / 75 + "rem";
      this.cL = calcCoord({ minTop: 47, maxTop: 51 }).top / 75 + "rem";
      this.cT = calcCoord({ minTop: 47, maxTop: 67 }).top / 75 + "rem";
      this.cB = calcCoord({ minTop: 40, maxTop: 80 }).top / 75 + "rem";
      this.cTs = calcCoord({ minTop: 40, maxTop: 60 }).top / 75 + "rem"; // title fontsize
      this.cTb = calcCoord({ minTop: 30, maxTop: 30 }).top / 75 + "rem"; // title bottom
      this.cCs = calcCoord({ minTop: 20, maxTop: 40 }).top / 75 + "rem"; // content
    }
  },
  mounted() {
    this.$nextTick(() => {
      new DevicePixelRatio().init();
    });
    window.onresize = () => {
      return (() => {})();
    };
  }
};
</script>

<style lang="scss" scoped>
.page {
  background: #000;
  display: flex;
  justify-content: center;
  height: 100%;
}
.pc {
  min-height: calc(var(--vh, 1vh) * 100);
  align-items: center;
  .main_content {
    width: 375px;
    min-height: 667px;
    background: url("../assets/images/gesture/massage-entry-fullbg.png")
      no-repeat top center;
    background-size: 100% 100%;
    // background: #ffffff;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 30px;
    .global_box {
      width: 31px;
      position: absolute;
      right: 9px;
      top: 10px;
      z-index: 10;
      .global_img {
        width: 100%;
      }

      .popup-box {
        width: 70px;
        height: 75px;
        position: absolute;
        right: -4.5px;
        top: 36px;
        padding-top: 6px;
        box-sizing: border-box;
        overflow: hidden;
        border-radius: 6px;
        .popup_bg {
          position: absolute;
          left: 0;
          top: 0;
          width: 70px;
        }
        .poup-item {
          position: relative;
          height: 22.5px;
          font-size: 10px;
          font-family: Source Han Sans SC;
          font-weight: 500;
          color: #303030;
          line-height: 22.5px;
          display: flex;
          align-items: center;
          justify-content: start;
          cursor: pointer;
          img {
            width: 7px;
            margin-left: 9.5px;
            margin-right: 5.5px;
          }
          div {
            width: 7px;
            margin-left: 9.5px;
            margin-right: 5.5px;
          }
          &.active {
            color: #f68682;
          }
        }
      }
    }
    .top {
      position: relative;
      width: 100%;
      height: 480px;
      // height: calc(var(--vh, 1vh) * 100);
      // background-size: 100% 100%;

      overflow: hidden;
      .page_bg {
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
      }

      .page_title {
        font-size: 21px;
        font-family: Source Han Sans SC;
        font-weight: bold;
        color: #f68682;
        line-height: 30px;
        // -webkit-text-stroke: 1px #fff9fb;
        // text-stroke: 1px #fff9fb;
        width: 100%;
        position: absolute;
        left: 0;
        top: 58px;
        z-index: 2;
      }
      .picture-box {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: calc(var(--vh, 1vh) * 100);
        .page_bg2 {
          width: 100%;
          position: absolute;
          left: 0;
          top: 50px;
        }

        .page_tips {
          font-size: 12px;
          color: #7d7c7a;
          text-align: left;
          word-wrap: break-word;
          hyphens: auto;
          &.page_tips_1 {
            position: absolute;
            top: 165px;
            left: 50px;
            width: 130px;
          }
          &.page_tips_2 {
            position: absolute;
            width: 215px;
            left: 155px;
            top: 356px;
          }
          &.page_tips_3 {
            position: absolute;
            width: 265px;
            left: 55px;
            top: 445px;
          }
        }
      }
      &.small {
        .page_title {
          top: 20px;
        }
        .page_bg2 {
          width: 60%;
          position: absolute;
          left: 20%;
          top: 30px;
        }
        .page_tips {
          font-size: 10px;
          &.page_tips_1 {
            position: absolute;
            top: 96px;
            left: calc(20% + 27.4987px);
            width: 130.0012px;
          }
          &.page_tips_2 {
            position: absolute;
            width: 215px;
            left: calc(20% + 92px);
            top: 212px;
          }
          &.page_tips_3 {
            position: absolute;
            width: 265px;
            left: calc(20% + 30px);
            top: 264px;
          }
        }
      }
    }
    .bottom {
      flex: 1;
      width: 375px;
      // height: 150px;
      display: flex;
      justify-content: center;
      align-items: center;
      // position: absolute;
      // left: 0;
      // bottom: 0;
      .gesture_select_box {
        .gesture_title {
          font-size: 22px;
          font-family: Source Han Sans SC;
          font-weight: bold;
          color: #f68682;
          line-height: 30px;
          width: 100%;
          margin: 40px auto 9px auto;
        }
        .gesture_list_box {
          width: 345px;
          margin: 0 auto;
          .gesture_item_box {
            height: 168px;
            padding-bottom: 12px;
            border-radius: 12px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 -7px 21px rgba(176, 170, 163, 0.45);
            margin-bottom: 14px;
            color: #ffffff;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: end;
            align-items: center;
            cursor: pointer;
            .img {
              width: 100%;
              height: 100%;
              position: absolute;
              left: 0;
              bottom: 0;
            }
            .title {
              font-size: 22px;
              line-height: 30px;
              position: relative;
              font-weight: bold;
            }
            .sub_title {
              font-size: 12px;
              line-height: 20px;
              position: relative;
            }
          }
        }
      }

      .bottomBtn {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        .bottom-tips {
          margin-top: 10px;
          font-size: 12px;
          color: #999999;
        }
      }
    }
  }
}

.mobile {
  .main_content {
    width: 10rem;
    min-height: calc(var(--vh, 1vh) * 100);
    background: url("../assets/images/gesture/massage-entry-fullbg.png")
      no-repeat top center;
    background-size: 100% 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.8rem;
    .global_box {
      width: 0.8267rem;
      position: absolute;
      right: 0.24rem;
      top: 0.1333rem;
      z-index: 10;
      .global_img {
        width: 100%;
      }

      .popup-box {
        width: 1.8667rem;
        height: 2rem;
        position: absolute;
        right: -0.12rem;
        top: 0.96rem;
        padding-top: 0.16rem;
        box-sizing: border-box;
        overflow: hidden;
        border-radius: 0.16rem;
        .popup_bg {
          position: absolute;
          left: 0;
          top: 0;
          width: 1.8667rem;
        }
        .poup-item {
          position: relative;
          height: 0.6rem;
          font-size: 0.2667rem;
          font-family: Source Han Sans SC;
          font-weight: 500;
          color: #303030;
          line-height: 0.6rem;
          display: flex;
          align-items: center;
          justify-content: start;
          cursor: pointer;
          img {
            width: 0.1867rem;
            margin-left: 0.2533rem;
            margin-right: 0.1467rem;
          }
          div {
            width: 0.1867rem;
            margin-left: 0.2533rem;
            margin-right: 0.1467rem;
          }
          &.active {
            color: #f68682;
          }
        }
      }
    }
    .top {
      position: relative;
      width: 100%;
      height: 12.8rem;
      overflow: hidden;
      .page_bg {
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
      }

      .page_title {
        font-size: 0.56rem;
        font-family: Source Han Sans SC;
        font-weight: bold;
        color: #f68682;
        line-height: 0.8rem;
        // -webkit-text-stroke: 0.0267rem #fff9fb;
        // text-stroke: 0.0267rem #fff9fb;
        width: 100%;
        position: absolute;
        left: 0;
        top: 1.5467rem;
        z-index: 2;
      }
      .picture-box {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: calc(var(--vh, 1vh) * 100);
        .page_bg2 {
          width: 100%;
          position: absolute;
          left: 0;
          top: 1.3333rem;
        }

        .page_tips {
          font-size: 0.2933rem;
          color: #7d7c7a;
          text-align: left;
          font-weight: bold;
          white-space: pre-line;
          &.page_tips_1 {
            position: absolute;
            top: 4.4rem;
            left: 1.3333rem;
            width: 3.4667rem;
          }
          &.page_tips_2 {
            position: absolute;
            width: 5.7333rem;
            left: 4.1333rem;
            top: 9.4933rem;
          }
          &.page_tips_3 {
            position: absolute;
            width: 7.0667rem;
            left: 1.4667rem;
            top: 11.8667rem;
          }
        }
      }
      &.small {
        .page_bg2 {
          width: 80%;
          position: absolute;
          left: 10%;
          top: 0.8rem;
        }
        .page_tips {
          font-size: 0.2667rem;
          &.page_tips_1 {
            position: absolute;
            top: 3.3067rem;
            left: calc(10% + 1.0667rem);
            width: 3.4667rem;
          }
          &.page_tips_2 {
            position: absolute;
            width: 5.7333rem;
            left: calc(10% + 3.2rem);
            top: 7.36rem;
          }
          &.page_tips_3 {
            position: absolute;
            width: 7.0667rem;
            left: calc(10% + 1.0667rem);
            top: 9.28rem;
          }
        }
      }
    }
    .bottom {
      flex: 1;
      width: 10rem;
      // height: 4rem;
      display: flex;
      justify-content: center;
      align-items: center;
      // position: absolute;
      // left: 0;
      // bottom: 0;
      .gesture_select_box {
        .gesture_title {
          font-size: 0.5867rem;
          font-family: Source Han Sans SC;
          font-weight: bold;
          color: #f68682;
          line-height: 0.8rem;
          width: 100%;
          margin: 1.0667rem auto 0.24rem auto;
        }
        .gesture_list_box {
          width: 9.2rem;
          margin: 0 auto;
          .gesture_item_box {
            height: 4.48rem;
            padding-bottom: 0.32rem;
            border-radius: 0.32rem;
            position: relative;
            overflow: hidden;
            box-shadow: 0 -0.1867rem 0.56rem rgba(176, 170, 163, 0.45);
            margin-bottom: 0.3733rem;
            color: #ffffff;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: end;
            align-items: center;
            cursor: pointer;
            .img {
              width: 100%;
              height: 100%;
              position: absolute;
              left: 0;
              bottom: 0;
            }
            .title {
              font-size: 0.5867rem;
              line-height: 0.8rem;
              position: relative;
              font-weight: bold;
            }
            .sub_title {
              font-size: 0.32rem;
              line-height: 0.5333rem;
              position: relative;
            }
          }
        }
      }

      .bottomBtn {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        .bottom-tips {
          margin-top: 0.2667rem;
          font-size: 0.32rem;
          color: #999999;
        }
      }
    }

    &.big {
      .top {
        flex: none;
      }
      .bottom {
        max-height: none;
      }
    }
  }
}
</style>