<template>
  <div class="page" :class="{ mobile: _isMobile, pc: !_isMobile }">
    <div class="main_content" id="main" :class="{ small: _isMobile && isSmall, big: _isMobile && isBig }">
      <div class="briefsummary-box">
        <div class="briefsummary-content" :style="{ height: briefsummaryHeight }">
          <img class="bg" src="../assets/images/gesture/massage-entry-fullbg.png" />
          <div class="briefsummary-main-box" :class="{
              smallScreen: _isMobile && isSmall,
              big: _isMobile && isBig,
              lie: lying == 1,
            }">
            <div class="top-text" v-if="lying == 0">{{ $t("strings.sittingGestureIntroduce.title") }}</div>
            <div class="top-text-1" v-if="lying == 0">{{ $t("strings.sittingGestureIntroduce.subTitle") }}</div>
            <div class="top-text" v-if="lying == 1">{{ $t("strings.lyingGestureIntroduce.title") }}</div>
            <div class="top-text-1" v-if="lying == 1">{{ $t("strings.lyingGestureIntroduce.subTitle") }}</div>
            <div class="summary-wireframe-box" v-if="lying == 0">
              <img class="wireframe" src="../assets/images/gesture/summary/summaryWireframe.png" />
              <div class="summary-points points-top-left">
                <div class="points-content">
                  <div class="no">1.</div>
                  <div class="points-text">{{ $t("strings.sittingGestureIntroduce.suggestedText1") }}</div>
                </div>
                <div class="points-image">
                  <img class="line" src="../assets/images/gesture/summary/summarylinelefttop.png" />
                </div>
              </div>
              <div class="summary-points points-top-right">
                <div class="points-content">
                  <div class="no">2.</div>
                  <div class="points-text">{{ $t("strings.sittingGestureIntroduce.suggestedText2") }}</div>
                </div>
                <div class="points-image">
                  <img class="line" src="../assets/images/gesture/summary/summaryrighttop.png" />
                </div>
              </div>
              <div class="summary-points points-left-bottom">
                <div class="points-content">
                  <div class="no">3.</div>
                  <div class="points-text">{{ $t("strings.sittingGestureIntroduce.suggestedText3") }}</div>
                </div>
                <div class="points-image">
                  <img class="line" src="../assets/images/gesture/summary/summaryleftbottom.png" />
                </div>
              </div>
              <div class="summary-points points-right-bottom">
                <div class="points-content">
                  <div class="no">4.</div>
                  <div class="points-text">{{ $t("strings.sittingGestureIntroduce.suggestedText4") }}</div>
                </div>
                <div class="points-image">
                  <img class="line" src="../assets/images/gesture/summary/summaryrightbottom.png" />
                </div>
              </div>
            </div>
            <div class="summary-wireframe-box" v-if="lying === 1">
              <img class="wireframe" src="../assets/images/gesture/summary/summaryWireframeLie.png" />
              <div class="summary-points points-1">
                <div class="points-content">
                  <div class="no">1.</div>
                  <div class="points-text">{{ $t("strings.lyingGestureIntroduce.suggestedText1") }}</div>
                </div>
                <div class="points-image">
                  <img class="line" src="../assets/images/gesture/summary/summarylinelie1.png" />
                </div>
              </div>
              <div class="summary-points points-2">
                <div class="points-content">
                  <div class="no">2.</div>
                  <div class="points-text">{{ $t("strings.lyingGestureIntroduce.suggestedText2") }}</div>
                </div>
                <div class="points-image">
                  <img class="line" src="../assets/images/gesture/summary/summarylinelie2.png" />
                </div>
              </div>
              <div class="summary-points points-3">
                <div class="points-content">
                  <div class="no">3.</div>
                  <div class="points-text">{{ $t("strings.lyingGestureIntroduce.suggestedText3") }}</div>
                </div>
                <div class="points-image">
                  <img class="line" src="../assets/images/gesture/summary/summarylinelie3.png" />
                </div>
              </div>
              <div class="summary-points points-4">
                <div class="points-content">
                  <div class="no">4.</div>
                  <div class="points-text">{{ $t("strings.lyingGestureIntroduce.suggestedText4") }}</div>
                </div>
                <div class="points-image">
                  <img class="line" src="../assets/images/gesture/summary/summarylinelie4.png" />
                </div>
              </div>
              <div class="summary-points points-5">
                <div class="points-content">
                  <div class="no">5.</div>
                  <div class="points-text">{{ $t("strings.lyingGestureIntroduce.suggestedText5") }}</div>
                </div>
                <div class="points-image">
                  <img class="line" src="../assets/images/gesture/summary/summarylinelie5.png" />
                </div>
              </div>
            </div>
            <div class="bottom-box"></div>
            <div class="botton-box" v-if="lying === 0">
              <light-button :text="$t('strings.homeButtonText')" @click="clickAuthCamera"></light-button>
              <div class="tips-text"></div>
            </div>
            <div class="botton-box" v-if="lying === 1">
              <light-button :text="$t('strings.homeButtonText')" @click="clickAuthCamera"></light-button>
              <div class="tips-text">{{ $t("strings.lyingGestureIntroduce.tipsText") }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="no_camera_dialog" v-if="showNoCameraDialog">
        <div class="no_camera_dialog_mask"></div>
        <div class="no_camera_dialog_content">
          <div class="no_camera_dialog_title">{{ $t("strings.cameraText") }}</div>
          <div class="no_camera_dialog_text_content">{{ $t("strings.cameraText1") }}</div>
          <div class="no_camera_dialog_button" @click="clickConfirm">
            <img class="no_camera_dialog_button_bg" src="../assets/images/gesture/light-btn-bg.png" alt srcset />
            <div class="no_camera_dialog_button_text">{{ $t("strings.cameraButtonText") }}</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";

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);
};
var handleTouchmove = function (e) {
  e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果)
};
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,
      lying: 0
    };
  },
  components: {
    lightButton
  },
  methods: {
    clickGlobalPopup() {
      this.showPopup = !this.showPopup;
    },
    setLanguagePack() {
      let lang = "en";
      if (this.currentLanguage === 0) {
        lang = "en";
      } else if (this.currentLanguage === 1) {
        lang = "fr";
      } else if (this.currentLanguage === 2) {
        lang = "es";
      }
      localStorage.setItem("lang", lang);
      let _languagePack = {
        tipsString: {
          initInitial: "请调整姿势",
          sittingUnrecognition: "未识别到宝宝，请根据屏幕上的宝宝贴纸模拟动作",
          sittingBabyneckloc: "请用肘关节支撑宝宝颈部",
          sittingBabyhead: "请勿用手掌固定宝宝头部",
          sittingBabybackloc: "请将前臂顺着宝宝背部",
          sittingUpleft: "请抬高左手臂",
          sittingUpright: "请抬高右手臂",
          sittingDownleft: "请放低左手臂",
          sittingDownright: "请放低右手臂",
          sittingHeadupassdown: "请保持宝宝头部高于臀部",
          sittingBabystright: "请保持宝宝耳肩臀在同一直线",
          sittingBabyheadloc: "请确保宝宝头部正对妈妈乳房，不宜过高",
          nobabysittingBabyneckloc: "实际哺乳时，请注意用肘关节支撑宝宝颈部",
          nobabysittingHeadupassdown: "实际哺乳时，请保持宝宝头部高于臀部",
          nobabysittingBabystright: "实际哺乳时，请保持宝宝耳肩臀一条直线",
          lyingUnrecognition: "未识别到宝宝，请根据屏幕上的宝宝贴纸模拟动作",
          lyingKeepadpos: "请保持正侧面对宝宝",
          lyingKeeplying: "请保持身体正侧侧躺，请勿仅靠手臂支撑头部",
          lyingBabyhead: "请勿用手掌固定宝宝头部",
          lyingNobabyback: "请用手臂托住宝宝背部，确保彼此胸腹相贴",
          lyingBabystright: "请保持宝宝耳肩臀在同一直线",
          lyingBabyheadloc: "请确保宝宝头部正对妈妈乳房，不宜过高",
          nobabylyingBabyheadloc:
            "实际哺乳时，请确保宝宝头部正对妈妈乳房，不宜过高",
          nobabylyingBabystright: "实际哺乳时，请保持宝宝耳肩臀同一直线",
          /// 坐姿建议
          sittingSuggest: [
            "请采用舒适姿势，确保与宝宝始终胸腹相贴",
            "宝宝嘴巴尽量包裹住乳晕",
            "使宝宝下巴紧贴乳房，张嘴角度大于100度",
            "随时点击右上角指导图示调整含乳姿势",
            "放松肩膀",
            "妈妈抱宝宝的手，腰部和脚有支撑",
            "保持放松，直到哺乳结束"
          ],

          // 卧姿建议
          lyingSuggest: [
            "请时刻注意宝宝鼻息通畅",
            "不要挤压胸部释放空间，应使宝宝臀部紧贴妈妈腹部",
            "宝宝嘴巴尽量包裹住乳晕",
            "使宝宝下巴紧贴乳房，张嘴角度大于100度",
            "随时点击右上角指导图示调整含乳姿势",
            "可用垫子支撑妈妈头部，但位置不宜过高",
            "可用靠垫支撑腰部、在两膝关节间放置垫子缓解压力",
            "保持放松，直到哺乳结束"
          ]
        },
        commonmemsg: {
          initialMassage:
            "请与屏幕保持1米左右距离使身体进入轮廓线，5秒后开始识别"
        },
        sittingMsg: {
          babyneckloc: "请用肘关节支撑宝宝颈部",
          babyhead: "请勿用手掌固定宝宝头部",
          babybackloc: "请将前臂顺着宝宝背部",
          upleft: "请抬高左手臂",
          upright: "请抬高右手臂",
          downleft: "请放低左手臂",
          downright: "请放低右手臂",
          headupassdown: "请保持宝宝头部高于臀部",
          babystright: "请保持宝宝耳肩臀在同一直线",
          babyheadloc: "请确保宝宝头部正对妈妈乳房，不宜过高"
        },
        sittingMsgPart: {
          babyneckloc: "请用肘关节支撑宝宝颈部",
          babyhead: "请勿用手掌固定宝宝头部",
          babybackloc: "请将前臂顺着宝宝背部",
          headupassdown: "请保持宝宝头部高于臀部",
          babystright: "请保持宝宝耳肩臀在同一直线",
          babyheadloc: "请确保宝宝头部正对妈妈乳房，不宜过高"
        },
        lyingMsg: {
          keepadpos: "请保持正侧面对宝宝",
          keeplying: "请保持躺平",
          babyhead: "请勿用手掌固定宝宝头部",
          nobabyback: "请用手臂托住宝宝背部，确保彼此胸腹相贴",
          babystright: "请保持宝宝耳肩臀在同一直线",
          babyheadloc: "请确保宝宝头部正对妈妈乳房，不宜过高"
        },
        lyingMsgPart: {
          babyhead: "请勿用手掌固定宝宝头部",
          nobabyback: "请用手臂托住宝宝背部，确保彼此胸腹相贴",
          babystright: "请保持宝宝耳肩臀在同一直线",
          babyheadloc: "请确保宝宝头部正对妈妈乳房，不宜过高"
        },
        successmsg: {
          recordMessage: "现在可以开始哺乳了！3秒后将自动开始计时",
          nobabyRecord: "您已掌握喂养姿势，期待您和宝宝一起来体验哺乳计时功能",
          suggest: "请及时点击右上角指导图示调整",
          posSuccess: "您的姿势正确，请继续保持"
        },
        strings: {
          suggestTitle: "在开始哺乳的时候可以保持:",
          suggestText1:
            "1.在哺乳过程中，应采用妈妈和宝宝都舒适的姿势，确保与宝宝始终胸腹相贴。",
          suggestText2:
            "2.请让宝宝嘴巴尽量包裹住乳晕，下巴紧贴乳房，张嘴角度大于100度。",
          suggestText3: "3.请放松肩膀，用垫子或枕头支撑抱宝宝的手，腰部和脚。",
          suggestText4: "4.全程请保持放松，愉悦的状态，直到宝宝主动吐出乳头。",
          lyingSuggestText1:
            "1.在哺乳过程中，请时刻避免乳房闷到宝宝，不要挤压胸部释放空间，应使宝宝臀部紧贴妈妈腹部，自然留有空隙。",
          lyingSuggestText2:
            "2.妈妈可在头部下方垫上垫子用以支撑，但位置不宜过高。在背部放上靠垫支撑腰部，保持腿部放松，自然屈曲，也可在两膝关节间放置垫子缓解压力。",
          suggestConfirmText: "知道了",
          discardReasonTitle: "放弃的原因是...",
          discardReason1: "不知道怎么用",
          discardReason2: "担心我的个人隐私",
          discardReason3: "觉得没有用处",
          mainTipsText:
            "请在安全环境安全设备使用本功能。在使用过程中，我们不会存储您的图像。",
          guidance: "指导",
          briefSummaryTitleFront: "恭喜您在",
          briefSummaryTitleAfter: "秒内完成了本次姿势矫正",
          sitMainPointsText1: "婴儿头高臀低，妈妈能看到婴儿的表情",
          sitMainPointsText2: "妈妈和婴儿应该腹胸相贴",
          sitMainPointsText3: "婴儿的头枕于妈妈手肘处，不要用手固定婴儿头部",
          sitMainPointsText4: "婴儿的耳、肩、臀成一条直线",
          sitMainPointsLyingText1: "婴儿头高臀低，妈妈能看到婴儿的表情",
          sitMainPointsLyingText2: "妈妈和婴儿应该腹胸相贴",
          sitMainPointsLyingText3: "婴儿的耳、肩、臀成一条直线",
          sitMainPointsLyingText4:
            "妈妈的一只手可以支撑婴儿的背部，另一只手可枕于妈妈的头下",
          sitMainPointsLyingText5:
            "注意婴儿鼻息通畅。不要挤压胸部释放空间，应使婴儿臀部靠近妈妈的腹部，从而使婴儿鼻尖与妈妈乳房有空隙",
          sitMainPointsConfirmText: "好 的",
          momLeft: "当未检测到您,将自动停止计时后续流程,停留5s后跳转至结束页面",
          successStatusTips: "您的姿势正确，请继续保持大约20秒",
          errorTitle: "错误",
          keyErrorText: "密钥禁止使用",
          originErrorText: "不允许CORS",
          noCameraErrorText: "相机未授权"
        }
      };
      let _englishLanguagePack = {
        tipsString: {
          initInitial: "Please adjust your posture",
          sittingUnrecognition:
            "No baby detected. Please follow the on-screen instructions",
          sittingBabyneckloc: "Make sure baby's neck is on your elbow",
          sittingBabyhead: "Do not restrict baby's head with your hands",
          sittingBabybackloc:
            "Make sure your forearm is supporting baby's back",
          sittingUpleft: "Raise your left arm",
          sittingUpright: "Raise your right arm",
          sittingDownleft: "Lower your left arm",
          sittingDownright: "Lower your right arm",
          sittingHeadupassdown:
            "Keep baby's head in higher position than the rest of the body",
          sittingBabystright:
            "Keep baby's ear, shoulder and butt at the same level",
          sittingBabyheadloc:
            "Make sure baby is facing the breast at proper height",
          nobabysittingBabyneckloc:
            "During actual breastfeeding, make sure baby's neck is on your elbow",
          nobabysittingHeadupassdown:
            "During actual breastfeeding, keep baby's head in higher position than the rest of the body",
          nobabysittingBabystright:
            "During actual breastfeeding, keep baby's ear, shoulder and butt at the same level",
          lyingUnrecognition:
            "No baby recognized, please simulate the action according to the baby sticker on the screen",
          lyingKeepadpos: "Please keep the front side facing the baby",
          lyingKeeplying:
            "Please lie on your side and do not support your head only with your arms",
          lyingBabyhead: "Please do not use the palm to fix the baby's head",
          lyingNobabyback:
            "Please use your arms to support the baby's back and make sure that the chest and abdomen are close to each other",
          lyingBabystright:
            "Please keep baby's ears, shoulders and hips in a straight line",
          lyingBabyheadloc:
            "Please make sure the baby's head is facing the mother's breast, not too high",
          nobabylyingBabyheadloc:
            "When actually breastfeeding, please make sure the baby's head is facing the mother's breast, not too high",
          nobabylyingBabystright:
            "When actually breastfeeding, please keep the baby's ears, shoulders and hips in the same line",
          /// 坐姿建议
          sittingSuggest: [
            "Adjust to a comfortable posture, and keep baby very close to you at all times",
            "Make sure baby is latched properly (mouth should fully cover the nipple and areola)",
            "Keep baby's chin close to your breast, and mouth fully covering the nipple and areola",
            "Tap top right icon to view more info",
            "Relax your shoulder",
            "There should be support to your hand, waist and feet when holding baby",
            "Keep relaxed until the end of session"
          ],

          // 卧姿建议
          lyingSuggest: [
            "Please always pay attention to the baby's smooth breath",
            "Do not squeeze the chest to release space, should make the baby buttocks close to the mother's abdomen",
            "Try to wrap your baby's mouth around the areola",
            "Make the baby chin close to the breast, mouth Angle more than 100 degrees",
            "Click the guide icon in the upper right corner to adjust the breast holding position at any time",
            "Available cushion support mother's head, but the position should not be too high",
            "Use cushion to support waist, cushion is placed between two knee joints to relieve pressure",
            "Stay relaxed until the nursing is over"
          ]
        },
        commonmemsg: {
          initialMassage:
            "Keep one meter away from the camera, and fit your body into the guide line. Session starts in 5 seconds…",
          slogan: ""
        },
        sittingMsg: {
          babyneckloc: "Make sure baby's neck is on your elbow",
          babyhead: "Do not restrict baby's head with your hands",
          babybackloc: "Make sure your forearm is supporting baby's back",
          upleft: "Raise your left arm",
          upright: "Raise your right arm",
          downleft: "Lower your left arm",
          downright: "Lower your right arm",
          headupassdown:
            "Keep baby's head in higher position than the rest of the body",
          babystright: "Keep baby's ear, shoulder and butt at the same level",
          babyheadloc: "Make sure baby is facing the breast at proper height"
        },
        sittingMsgPart: {
          babyneckloc: "Make sure baby's neck is on your elbow",
          babyhead: "Do not restrict baby's head with your hands",
          babybackloc: "Make sure your forearm is supporting baby's back",
          headupassdown:
            "Keep baby's head in higher position than the rest of the body",
          babystright: "Keep baby's ear, shoulder and butt at the same level",
          babyheadloc: "Make sure baby is facing the breast at proper height"
        },

        lyingMsg: {
          keepadpos: "Please keep the front side facing the baby",
          keeplying: "Please lie flat",
          babyhead: "Please do not use the palm to fix the baby's head",
          nobabyback:
            "Please use your arms to support the baby's back and make sure that the chest and abdomen are close to each other",
          babystright:
            "Please keep baby's ears, shoulders and hips in a straight line",
          babyheadloc:
            "Please make sure the baby's head is facing the mother's breast, not too high"
        },
        lyingMsgPart: {
          babyhead: "Please do not use the palm to fix the baby's head",
          nobabyback:
            "Please use your arms to support the baby's back and make sure that the chest and abdomen are close to each other",
          babystright:
            "Please keep baby's ears, shoulders and hips in a straight line",
          babyheadloc:
            "Please make sure the baby's head is facing the mother's breast, not too high"
        },
        successmsg: {
          recordMessage:
            "You may start breastfeeding now! Timer starts in 3 seconds…",
          nobabyRecord:
            "You have learned the correct posture. You may try this AI coach with your baby next time",
          suggest: "Tap top right icon to view more info",
          posSuccess: "Your posture is correct. Please keep it going"
        },
        strings: {
          suggestTitle: "During actual breastfeeding:",
          suggestText1:
            "Adjust to a comfortable posture, and keep baby very close to you at all times",
          suggestText2:
            "Make sure baby is latched properly (mouth should fully cover the nipple and areola); keep baby's chin close to your breast, and mouth fully covering the nipple and areola",
          suggestText3:
            "There should be support to your hand, waist and feet when holding baby",
          suggestText4: "Keep relaxed until the end of session",
          lyingSuggestText1:
            "1. In the process of breastfeeding, please always avoid the breast stuffy to the baby, do not squeeze the chest to release the space, should make the baby buttocks close to the mother's abdomen, natural space.",
          lyingSuggestText2:
            "2. Mother can put a cushion under her head for support, but the position should not be too high. Put a cushion on your back to support your waist, keep your legs relaxed and flex naturally, or place a cushion between your knees to relieve pressure.",
          suggestConfirmText: "OK",
          discardReasonTitle: "Reasons to give up?",
          discardReason1: "Not sure how to use it",
          discardReason2: "Concern about my personal privacy",
          discardReason3: "Do not think it is helpful",
          mainTipsText:
            "Your images and videos will only be used for AI coach recognition. They will not be stored.",
          guidance: "Tips",
          briefSummaryTitleFront:
            "Congratulations! You have completed the session in ",
          briefSummaryTitleAfter: " seconds",
          sitMainPointsText1:
            "Keep baby's head in higher position so you can see baby's face",
          sitMainPointsText2: "Keep baby very close to you",
          sitMainPointsText3:
            "Keep baby's neck on your elbow, and do not restrict baby's head with your hand",
          sitMainPointsText4:
            "Keep baby's ear, shoulder and butt at the same level",
          sitMainPointsLyingText1:
            "The baby's head is high and the hips are low. The mother can see the baby's expression",
          sitMainPointsLyingText2:
            "Mother and baby should be close to each other",
          sitMainPointsLyingText3:
            "A baby's ears, shoulders and hips form a straight line",
          sitMainPointsLyingText4:
            "One of the mother's hands can support the baby's back, the other hand can rest under the mother's head",
          sitMainPointsLyingText5:
            "Notice that the baby's breath is smooth. Do not squeeze the chest to release space, should make the baby's buttocks close to the mother's abdomen, so that the baby's nose tip and mother's breast have a gap",
          sitMainPointsConfirmText: "OK",
          momLeft:
            "No person detected. The finish page will be shown after 5 seconds",
          successStatusTips:
            "Correct! Please keep the posture for about 20 seconds",
          errorTitle: "Error",
          keyErrorText: "Key Forbidden",
          originErrorText: "Not allowed by CORS",
          noCameraErrorText: "Camera not detected"
        }
      };
      let _frenchLanguagePack = {
        tipsString: {
          initInitial: "Veuillez ajuster votre posture",
          sittingUnrecognition:
            "Aucun bébé détecté. Veuillez suivre les instructions à l'écran",
          sittingBabyneckloc:
            "Assurez-vous que le cou de bébé est sur votre coude",
          sittingBabyhead: "Ne limitez pas la tête de bébé avec vos mains",
          sittingBabybackloc:
            "Assurez-vous que votre avant-bras soutient le dos de bébé",
          sittingUpleft: "Levez votre bras gauche",
          sittingUpright: "Levez votre bras droit",
          sittingDownleft: "Abaissez votre bras gauche",
          sittingDownright: "Abaissez votre bras droit",
          sittingHeadupassdown:
            "Gardez la tête de bébé en position plus haute que le reste du corps",
          sittingBabystright:
            "Gardez l'oreille, l'épaule et les fesses de bébé au même niveau",
          sittingBabyheadloc:
            "Assurez-vous que bébé est face au sein à la bonne hauteur",
          nobabysittingBabyneckloc:
            "Pendant l'allaitement, assurez-vous que le cou du bébé est sur votre coude",
          nobabysittingHeadupassdown:
            "Pendant l'allaitement, gardez la tête de bébé en position plus haute que le reste du corps",
          nobabysittingBabystright:
            "Pendant l'allaitement, gardez l'oreille, l'épaule et les fesses de bébé au même niveau",
          lyingUnrecognition:
            "Bébé non identifié, s’il vous plaît simuler l’action en fonction de l’autocollant bébé sur l’écran",
          lyingKeepadpos: "S’il vous plaît garder le côté positif sur le bébé",
          lyingKeeplying:
            "Veuillez rester couché sur le côté droit du corps. Ne soutenez pas la tête uniquement par les bras",
          lyingBabyhead: "Ne pas fixer la tête de bébé avec la paume",
          lyingNobabyback:
            "Veuillez tenir le bébé sur le dos avec les bras, assurez-vous que les deux sont collés thoraco-ventral",
          lyingBabystright:
            "S’il vous plaît garder bébé oreille épaule hanche dans la même ligne droite",
          lyingBabyheadloc:
            "S’il vous plaît assurez-vous que la tête du bébé est sur le sein de la mère, pas trop élevé",
          nobabylyingBabyheadloc:
            "En allaitant réellement, veuillez vous assurer que la tête du bébé est sur le sein de la mère, ne devrait pas être trop élevé",
          nobabylyingBabystright:
            "Lorsque l’allaitement réel, s’il vous plaît garder l’oreille de bébé épaule hanche la même ligne droite",
          /// 坐姿建议
          sittingSuggest: [
            "Ajustez-vous à une posture confortable et gardez bébé très près de vous à tout moment",
            "Assurez-vous que le bébé prend correctement le sein (la bouche doit couvrir entièrement le mamelon et l'aréole)",
            "Gardez le menton de bébé près de votre sein, sa bouche couvrant entièrement le mamelon et l'aréole",
            "Appuyez sur l'icône en haut à droite pour afficher plus d'informations",
            "Détendez votre épaule",
            "Votre main, votre taille et vos pieds doivent être soutenus lorsque vous tenez bébé",
            "Restez détendu jusqu'à la fin de la séance"
          ],
          // 卧姿建议
          lyingSuggest: [
            "Gardez toujours un œil sur le nez de bébé",
            "Ne pas presser la poitrine pour libérer l’espace, devrait faire les hanches du bébé près de l’abdomen de la mère",
            "Bouche de bébé envelopper autant que possible l’aréole",
            "Faites le menton du bébé contre le sein et ouvrez l’angle de la bouche plus de 100 degrés",
            "Ajuster la posture contenant du lait en cliquant sur l’image supérieure droite à tout moment",
            "Coussin disponible pour soutenir la tête de maman, mais ne doit pas être placé trop haut",
            "Disponible avec un coussin pour soutenir la taille, un coussin placé entre les deux genoux pour soulager la pression",
            "Restez détendu jusqu’à la fin de l’allaitement"
          ]
        },
        commonmemsg: {
          initialMassage:
            "Tenez-vous à un mètre de la caméra et placez votre corps dans la ligne de guidage. La session démarre dans 5 secondes…"
        },
        sittingMsg: {
          babyneckloc: "Assurez-vous que le cou de bébé est sur votre coude",
          babyhead: "Ne limitez pas la tête de bébé avec vos mains",
          babybackloc:
            "Assurez-vous que votre avant-bras soutient le dos de bébé",
          upleft: "Levez votre bras gauche",
          upright: "Levez votre bras droit",
          downleft: "Abaissez votre bras gauche",
          downright: "Abaissez votre bras droit",
          headupassdown:
            "Gardez la tête de bébé en position plus haute que le reste du corps",
          babystright:
            "Gardez l'oreille, l'épaule et les fesses de bébé au même niveau",
          babyheadloc:
            "Assurez-vous que bébé est face au sein à la bonne hauteur"
        },
        sittingMsgPart: {
          babyneckloc: "Assurez-vous que le cou de bébé est sur votre coude",
          babyhead: "Ne limitez pas la tête de bébé avec vos mains",
          babybackloc:
            "Assurez-vous que votre avant-bras soutient le dos de bébé",
          headupassdown:
            "Gardez la tête de bébé en position plus haute que le reste du corps",
          babystright:
            "Gardez l'oreille, l'épaule et les fesses de bébé au même niveau",
          babyheadloc:
            "Assurez-vous que bébé est face au sein à la bonne hauteur"
        },
        lyingMsg: {
          keepadpos: "S’il vous plaît garder le côté positif sur le bébé",
          keeplying: "Veuillez rester couché à plat",
          babyhead: "Ne pas fixer la tête de bébé avec la paume",
          nobabyback:
            "Veuillez tenir le bébé sur le dos avec les bras, assurez-vous que les deux sont collés thoraco-ventral",
          babystright:
            "S’il vous plaît garder bébé oreille épaule hanche dans la même ligne droite",
          babyheadloc:
            "S’il vous plaît assurez-vous que la tête du bébé est sur le sein de la mère, pas trop élevé"
        },
        lyingMsgPart: {
          babyhead: "Ne pas fixer la tête de bébé avec la paume",
          nobabyback:
            "Veuillez tenir le bébé sur le dos avec les bras, assurez-vous que les deux sont collés thoraco-ventral",
          babystright:
            "S’il vous plaît garder bébé oreille épaule hanche dans la même ligne droite",
          babyheadloc:
            "S’il vous plaît assurez-vous que la tête du bébé est sur le sein de la mère, pas trop élevé"
        },
        successmsg: {
          recordMessage:
            "Vous pouvez commencer à allaiter maintenant ! La minuterie démarre dans 3 secondes…",
          nobabyRecord:
            "Vous avez appris la bonne posture. Vous pouvez essayer cet entraîneur AI avec votre bébé la prochaine fois",
          suggest:
            "Appuyez sur l'icône en haut à droite pour afficher plus d'informations",
          posSuccess: "Votre posture est correcte. Vous pouvez continuer"
        },
        strings: {
          suggestTitle: "Pendant l'allaitement:",
          suggestText1:
            "Ajustez-vous à une posture confortable et gardez bébé très près de vous à tout moment",
          suggestText2:
            "Assurez-vous que le bébé prend correctement le sein (la bouche doit couvrir entièrement le mamelon et l'aréole); gardez le menton de bébé près de votre sein, sa bouche couvrant entièrement le mamelon et l'aréole",
          suggestText3:
            "Votre main, votre taille et vos pieds doivent être soutenus lorsque vous tenez bébé",
          suggestText4: "Restez détendu jusqu'à la fin de la séance",
          lyingSuggestText1:
            "1. Dans le processus d’allaitement, s’il vous plaît éviter les seins étouffés au bébé tout le temps, ne pas presser la poitrine pour libérer l’espace, devrait faire les hanches du bébé serré contre l’abdomen de la mère, laisser un espace naturellement.",
          lyingSuggestText2:
            "2.La mère peut être appuyée par un coussin sous la tête, mais la position ne doit pas être trop élevée. Placez des coussins sur le dos pour soutenir la taille. Gardez les jambes détendues et la flexion naturelle. Vous pouvez également placer des coussins entre les genoux pour soulager la pression.",
          suggestConfirmText: "OK.",
          discardReasonTitle: "Raisons d'abandonner?",
          discardReason1: "Je ne sais pas comment l'utiliser",
          discardReason2: "Inquiétude pour ma vie privée",
          discardReason3: "Je ne pense pas que c'est utile",
          mainTipsText:
            "Vos images et vidéos ne seront utilisées que pour la reconnaissance des coachs IA. Elles ne seront pas stockés.",
          guidance: "des astuces",
          briefSummaryTitleFront:
            "Toutes nos félicitations! Vous avez terminé la session en ",
          briefSummaryTitleAfter: " secondes",
          sitMainPointsText1:
            "Gardez la tête de bébé en position haute pour que vous puissiez voir le visage de bébé",
          sitMainPointsText2: "Gardez bébé très près de vous",
          sitMainPointsText3:
            "Gardez le cou de bébé sur votre coude et ne limitez pas la tête de bébé avec votre main",
          sitMainPointsText4:
            "Gardez l'oreille, l'épaule et les fesses de bébé au même niveau",
          sitMainPointsLyingText1:
            "Poussette avec tête haute et hanche basse, maman peut voir l’expression du bébé",
          sitMainPointsLyingText2:
            "Les mamans et les bébés devraient être collés sur la poitrine ventrale",
          sitMainPointsLyingText3:
            "L’oreille, l’épaule et la hanche du bébé en ligne droite",
          sitMainPointsLyingText4:
            "Une main de la mère peut soutenir le dos du bébé, l’autre main peut être placée sous la tête de la mère",
          sitMainPointsLyingText5:
            "Faites attention au nez dégagé du bébé. Ne pas presser la poitrine pour libérer l’espace, les hanches du bébé devraient être près de l’abdomen de la mère, de sorte que le bout du nez du bébé a un espace avec le sein de la mère",
          sitMainPointsConfirmText: "OK",
          momLeft:
            "Aucune personne détectée. La page d'arrivée s'affichera après 5 secondes",
          successStatusTips:
            "Corriger! Veuillez garder la posture pendant environ 20 secondes",
          errorTitle: "Erreur",
          keyErrorText: "Interdire l'utilisation des clés",
          originErrorText: "Cors not allowed",
          noCameraErrorText: "Caméra non détectée"
        }
      };
      let _spanishLanguagePack = {
        tipsString: {
          initInitial: "Por favor, ajuste su postura",
          sittingUnrecognition:
            "Ningún bebé detectado. Siga las instrucciones mostradas en pantalla",
          sittingBabyneckloc:
            "Asegúrese de que el cuello del bebé esté sobre su codo",
          sittingBabyhead: "No restrinja la cabeza del bebé con las manos",
          sittingBabybackloc:
            "Asegúrese de que su antebrazo esté sosteniendo la espalda del bebé",
          sittingUpleft: "Levante su brazo izquierdo",
          sittingUpright: "Levante su brazo derecho",
          sittingDownleft: "Baje su brazo izquierdo",
          sittingDownright: "Baje su brazo derecho",
          sittingHeadupassdown:
            "Mantenga la cabeza del bebé en una posición más alta que el resto del cuerpo",
          sittingBabystright:
            "Mantenga la oreja, el hombro y el trasero del bebé al mismo nivel",
          sittingBabyheadloc:
            "Asegúrese de que el bebé esté frente al pecho a la altura adecuada",
          nobabysittingBabyneckloc:
            "Durante la lactancia real, asegúrese de que el cuello del bebé esté sobre su codo.",
          nobabysittingHeadupassdown:
            "Durante la lactancia real, mantenga la cabeza del bebé en una posición más alta que el resto del cuerpo",
          nobabysittingBabystright:
            "Durante la lactancia real, mantenga la oreja, el hombro y el trasero del bebé al mismo nivel",
          lyingUnrecognition:
            "Bebé no identificado, simule la acción de acuerdo con la pegatina del bebé en la pantalla",
          lyingKeepadpos: "Por favor, mantenga el lado derecho hacia el bebé.",
          lyingKeeplying:
            "Por favor, mantén tu cuerpo en el lado positivo. No apoyes la cabeza solo con los brazos",
          lyingBabyhead: "No use la palma para fijar la cabeza del bebé",
          lyingNobabyback:
            "Por favor, sostenga la espalda del bebé con los brazos, asegúrese de que se peguen mutuamente torácico-ventral",
          lyingBabystright:
            "Por favor, mantenga el bebé orejas hombro cadera en la misma línea recta",
          lyingBabyheadloc:
            "Por favor, asegúrese de que la cabeza del bebé está en el pecho de la madre, no debe ser demasiado alto",
          nobabylyingBabyheadloc:
            "Cuando la lactancia real, asegúrese de que la cabeza del bebé está en el pecho de la madre, no debe ser demasiado alto",
          nobabylyingBabystright:
            "Cuando la lactancia real, mantenga por favor la misma línea recta del bebé orejas hombro cadera",
          /// 坐姿建议
          sittingSuggest: [
            "Tome una postura cómoda y mantén al bebé muy cerca de usted en todo momento",
            "Asegúrese de que el bebé esté bien sujeto (la boca debe cubrir completamente el pezón y la areola)",
            "Mantenga la barbilla del bebé cerca de su seno y la boca cubriendo completamente el pezón y la areola",
            "Toque el icono superior derecho para ver más información",
            "Relaje su hombro",
            "Debe haber apoyo en su mano, su cintura y sus pies al sostener al bebé",
            "Manténgase relajada hasta el final de la sesión"
          ],
          // 卧姿建议
          lyingSuggest: [
            "Por favor, siempre preste atención a la nariz del bebé",
            "No apriete el pecho para liberar el espacio, debe hacer que las caderas del bebé se ajusten al abdomen de la madre",
            "La boca del bebé trata de envolver la areola",
            "Mantenga la mandíbula del bebé cerca del pecho y el ángulo de apertura de la boca más de 100 grados",
            "Haga clic en la ilustración superior derecha en cualquier momento para ajustar la postura con leche",
            "La almohadilla está disponible para apoyar la cabeza de la mamá, pero la posición no debe ser demasiado alta",
            "Disponible con cojines para apoyar la cintura, cojines entre las rodillas para aliviar la presión",
            "Manténgase relajado hasta el final de la lactancia"
          ]
        },
        commonmemsg: {
          initialMassage:
            "Manténgase a un metro de distancia de la cámara y coloque su cuerpo en la línea. La sesión comienza en 5 segundos..."
        },
        sittingMsg: {
          babyneckloc: "Asegúrese de que el cuello del bebé esté sobre su codo",
          babyhead: "No restrinja la cabeza del bebé con las manos",
          babybackloc:
            "Asegúrese de que su antebrazo esté sosteniendo la espalda del bebé",
          upleft: "Levante su brazo izquierdo",
          upright: "Levante su brazo derecho",
          downleft: "Baje su brazo izquierdo",
          downright: "Baje su brazo derecho",
          headupassdown:
            "Mantenga la cabeza del bebé en una posición más alta que el resto del cuerpo",
          babystright:
            "Mantenga la oreja, el hombro y el trasero del bebé al mismo nivel",
          babyheadloc:
            "Asegúrese de que el bebé esté frente al pecho a la altura adecuada"
        },
        sittingMsgPart: {
          babyneckloc: "Asegúrese de que el cuello del bebé esté sobre su codo",
          babyhead: "No restrinja la cabeza del bebé con las manos.",
          babybackloc:
            "Asegúrese de que su antebrazo esté sosteniendo la espalda del bebé",
          headupassdown:
            "Mantenga la cabeza del bebé en una posición más alta que el resto del cuerpo",
          babystright:
            "Mantenga la oreja, el hombro y el trasero del bebé al mismo nivel",
          babyheadloc:
            "Asegúrese de que el bebé esté frente al pecho a la altura adecuada"
        },
        lyingMsg: {
          keepadpos: "Por favor, mantenga el lado derecho hacia el bebé.",
          keeplying: "Quédate acostado.",
          babyhead: "No use la palma para fijar la cabeza del bebé",
          nobabyback:
            "Por favor, sostenga la espalda del bebé con los brazos, asegúrese de que se peguen mutuamente torácico-ventral",
          babystright:
            "Por favor, mantenga el bebé orejas hombro cadera en la misma línea recta",
          babyheadloc:
            "Por favor, asegúrese de que la cabeza del bebé está en el pecho de la madre, no debe ser demasiado alto"
        },
        lyingMsgPart: {
          babyhead: "No use la palma para fijar la cabeza del bebé",
          nobabyback:
            "Por favor, sostenga la espalda del bebé con los brazos, asegúrese de que se peguen mutuamente torácico-ventral",
          babystright:
            "Por favor, mantenga el bebé orejas hombro cadera en la misma línea recta",
          babyheadloc:
            "Por favor, asegúrese de que la cabeza del bebé está en el pecho de la madre, no debe ser demasiado alto"
        },
        successmsg: {
          recordMessage:
            "¡Puede comenzar a darle el pecho ahora! El temporizador comienza en 3 segundos...",
          nobabyRecord:
            "Ha aprendido la postura correcta. Puede probar este asistente de IA con su bebé la próxima vez",
          suggest: "Toque el icono superior derecho para ver más información",
          posSuccess: "Su postura es correcta. Por favor, sigua así"
        },
        strings: {
          suggestTitle: "Durante la lactancia real:",
          suggestText1:
            "Tome una postura cómoda y mantén al bebé muy cerca de usted en todo momento",
          suggestText2:
            "Asegúrese de que el bebé esté bien sujeto (la boca debe cubrir completamente el pezón y la areola); mantenga la barbilla del bebé cerca de su seno y la boca cubriendo completamente el pezón y la areola",
          suggestText3:
            "Debe haber apoyo en su mano, su cintura y sus pies al sostener al bebé",
          suggestText4: "Manténgase relajada hasta el final de la sesión",
          lyingSuggestText1:
            "1.En el proceso de lactancia, por favor evite el pecho soplan al bebé en todo momento, no apriete el pecho para liberar el espacio, debe hacer que las caderas del bebé se ajusten al abdomen de la madre, dejando un espacio vacío natural.",
          lyingSuggestText2:
            "2.La madre puede ser apoyada con una almohadilla debajo de la cabeza, pero no en una posición demasiado alta. Coloque cojines en la espalda para apoyar la cintura. Mantenga las piernas relajadas y flexiones naturales. También puede colocar cojines entre las rodillas para aliviar la presión.",
          suggestConfirmText: "DE ACUERDO",
          discardReasonTitle: "Razones para rendirse?",
          discardReason1: "No estoy segura de cómo usarlo",
          discardReason2: "Preocupación por mi privacidad",
          discardReason3: "No creo que sea útil",
          mainTipsText:
            "Sus imágenes y videos solo se utilizarán para el reconocimiento del asistente de IA. No se almacenarán.",
          guidance: "consejos",
          briefSummaryTitleFront: "¡Felicidades! Has completado la sesión en ",
          briefSummaryTitleAfter: " segundos",
          sitMainPointsText1:
            "Mantenga la cabeza del bebé en una posición más alta para que pueda ver la cara del bebé",
          sitMainPointsText2: "Mantenga al bebé muy cerca de usted",
          sitMainPointsText3:
            "Mantenga el cuello del bebé sobre su codo y no restrinja la cabeza del bebé con su mano",
          sitMainPointsText4:
            "Mantenga la oreja, el hombro y el trasero del bebé al mismo nivel",
          sitMainPointsLyingText1:
            "Cabeza de bebé alta y cadera baja, mamá puede ver la expresión del bebé",
          sitMainPointsLyingText2: "La madre y el bebé deben estar en el pecho",
          sitMainPointsLyingText3:
            "Orejas, hombros y caderas del bebé en una línea recta",
          sitMainPointsLyingText4:
            "Una mano de la madre puede apoyar la espalda del bebé y la otra mano puede estar bajo la cabeza de la madre",
          sitMainPointsLyingText5:
            "Tenga cuidado de que el bebé respira bien. No apretar el pecho para liberar el espacio, mantenga las caderas del bebé cerca del abdomen de la madre, de modo que la punta de la nariz del bebé tenga un espacio vacío con el pecho de la madre",
          sitMainPointsConfirmText: "DE ACUERDO",
          momLeft:
            "No se detectó ninguna persona. La página de finalización se mostrará después de 5 segundos",
          successStatusTips:
            "¡Correcto! Mantenga la postura durante unos 20 segundos",
          errorTitle: "Error",
          keyErrorText: "Desactivar la clave",
          originErrorText: "CORS no permite",
          noCameraErrorText: "Cámara no detectada"
        }
      };
      switch (this.currentLanguage) {
        case 0:
          localStorage.setItem(
            "languagePack",
            JSON.stringify(_englishLanguagePack)
          );
          break;
        case 1:
          localStorage.setItem(
            "languagePack",
            JSON.stringify(_frenchLanguagePack)
          );
          break;
        case 2:
          localStorage.setItem(
            "languagePack",
            JSON.stringify(_spanishLanguagePack)
          );
          break;
        // case 3:
        //   _prefs.setString("languagePack", json.encode(_spanishLanguagePack));
        //   break;
        default:
      }
    },

    clickConfirm() {
      this.showNoCameraDialog = false;
    },
    async clickAuthCamera() {
      this.setLanguagePack();
      if (this.showNoCameraDialog) {
        this.showNoCameraDialog = false;
      }
      let { camera } = await authCamera(0);
      console.log(import.meta.env);

      if (camera) {
        let apiKey = "DLAB-customername-12345687";
        let env = import.meta.env.VITE_TRACKING_ENV;
        console.log(env);
        let aiParams = {
          env: env,
          apiKey: apiKey,
          region: "apac"
        };
        localStorage.setItem("aiParams", JSON.stringify(aiParams));
        let openDev = this.$route.query.openDev;
        localStorage.setItem(
          "completeUrl",
          "https://bfai-service-apac-uat.d-lab-services.danone.com/demo/#/complete"
        );
        localStorage.setItem("incompleteUrl", document.URL);
        let url =
          "https://bfai-service-apac-uat.d-lab-services.danone.com/sdk/#/?lying=" +
          this.lying;
        if (openDev) {
          url = url + "&openDev=true";
        }
        window.location.href = url;
      } else {
        this.showNoCameraDialog = true;
      }
    },
    /**
     * 添加触摸监听
     */
    addTouchmoveListener() {
      document.body.addEventListener("touchmove", handleTouchmove, {
        passive: false
      }); //passive 参数不能省略，用来兼容ios和android
    },
    /**
     * 移除触摸监听
     */
    removeTouchmoveListener() {
      document.body.removeEventListener("touchmove", handleTouchmove, {
        passive: false
      });
    }
  },
  created() {
    let lying = 0; // 默认0 为坐姿
    if (this.$route.query.lying != null) {
      lying = ~~this.$route.query.lying;
    }
    this.lying = lying;
    let { scale } = getSystemInfo();
    if (scale > 1 && scale < 2) {
      this.scale = 1 - (scale - 1) / 100;
      console.log(this.scale);
    }
    console.log(this.$i18n.locale);
    let lang = localStorage.getItem("lang");
    if (lang) {
      this.$i18n.locale = lang;
    }
    if (this.$i18n.locale == "zh") {
      this.$i18n.locale = "en";
    } else 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
    }
    if (
      this._isMobile &&
      document.body.clientHeight >= document.body.clientWidth
    ) {
      // 竖屏
      this.addTouchmoveListener();
    }
  },
  mounted() {
    this.$nextTick(() => {
      new DevicePixelRatio().init();
    });
    window.onresize = () => {
      return (() => {
        // 判断横竖屏
        let width = document.documentElement.clientWidth;
        let height = document.documentElement.clientHeight;
        if (width > height) {
          this.removeTouchmoveListener();
        } else {
          this.addTouchmoveListener();
        }
      })();
    };
  },
  unmounted() {
    this.removeTouchmoveListener();
  }
};
</script>

<style lang="scss" scoped>
.page {
  background: #000;
  display: flex;
  justify-content: center;
  height: 100%;
}
.pc {
  height: calc(var(--vh, 1vh) * 100);
  align-items: center;
  .main_content {
    width: 375px;
    height: 667px;
    background: #ffffff;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .briefsummary-box {
      position: absolute;
      top: 0px;
      left: 0px;
      right: 0px;
      bottom: 0px;
      z-index: 99;
      overflow: hidden;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      .briefsummary-content {
        width: 100%;
        height: 100%;
        position: relative;
        .bg {
          width: 100%;
          height: 100%;
        }
      }
    }

    .briefsummary-main-box {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;

      .top-text {
        width: 349px;
        font-size: 21px;
        font-family: Source Han Sans SC;
        font-weight: bold;
        color: #f57e79;
        margin: 45.5px auto 10px auto;
        // -webkit-text-stroke: 1px #fff;
        // text-stroke: 1px #ffffff;
        text-align: center;
      }
      .top-text-1 {
        width: 340px;
        font-size: 15px;
        font-family: Source Han Sans SC;
        font-weight: bold;
        color: #fd8882;
        margin: 0 auto 11px auto;
        height: 112px;
        text-align: center;
      }
      .top-text-2 {
        font-size: 29px;
        font-family: Source Han Sans SC;
        font-weight: bold;
        color: #f57e79;
        margin: 0 auto 52px auto;
        width: 100%;
        text-align: center;
      }

      .summary-wireframe-box {
        width: 298px;
        height: 262px;
        margin: 0 auto;
        position: relative;

        .wireframe {
          width: 298px;
          height: 262px;
        }
        .summary-points {
          .no {
            font-size: 19px;
            font-family: Source Han Sans SC;
            font-weight: bold;
            color: #fd8882;
            line-height: 21px;
            position: absolute;
            left: 0;
          }

          &.points-top-left {
            width: 160px;
            position: absolute;
            left: -31.5px;
            top: -17px;
            .points-text {
              width: 160px;
            }
            .points-image {
              position: absolute;
              left: 15px;
              top: 10px;
            }
            .line {
              width: 221px;
            }
          }

          &.points-top-right {
            width: 100px;
            position: absolute;
            right: 4px;
            top: -17.5px;
            .points-text {
              width: 100px;
            }
            .points-image {
              position: absolute;
              left: -5px;
              top: 65px;
            }
            .line {
              width: 42px;
            }
          }
          &.points-left-bottom {
            width: 150px;
            position: absolute;
            left: -32px;
            bottom: -68px;
            .points-text {
              width: 150px;
            }
            .points-image {
              position: absolute;
              left: 25px;
              top: -57.5px;
            }
            .line {
              width: 56px;
            }
          }
          &.points-right-bottom {
            width: 150px;
            position: absolute;
            right: -9px;
            bottom: -72px;
            .points-text {
              width: 150px;
            }
            .points-image {
              position: absolute;
              left: 15px;
              top: -60px;
            }
            .line {
              width: 29px;
            }
          }
        }
        .points-content {
          padding-left: 20px;
          .points-text {
            width: 160px;
            height: 58px;
            font-size: 13.5px;
            font-family: Source Han Sans SC;
            font-weight: bold;
            color: #919191;
            line-height: 21px;
            text-align: left;
            word-wrap: break-word;
            hyphens: auto;
          }
        }
      }
      .bottom-box {
        height: 130px;
        flex-shrink: 0;
      }
      .botton-box {
        display: flex;
        position: absolute;
        left: 0;
        bottom: 20px;
        width: 100%;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .tips-text {
          height: 22px;
          font-size: 12px;
          font-weight: 400;
          color: #919191;
          line-height: 12px;
          margin-top: 12px;
        }
      }
      .slide_up {
        opacity: 1 !important;
        transition: opacity 0.8s ease;
      }
      &.big {
        .top-text {
          margin: 45.5px auto 10px auto;
        }
        .top-text-1 {
          margin: 0 auto 75px auto;
        }
        .botton-box {
          bottom: 60px;
          .tips-text {
            margin-top: 22px;
          }
        }
      }
      &.smallScreen {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        .top-text {
          margin: 0 auto;
        }
        .top-text-1 {
          margin: 0 auto;
        }
        .top-text-2 {
          margin: 0 auto 11px auto;
        }
      }

      &.lie {
        .top-text {
          margin-top: 20px;
        }
        .top-text-1 {
          line-height: 14px;
          margin: 0 auto 38px auto;
        }
        .points-content {
          .points-text {
            font-size: 10px;
            line-height: 14px;
            padding-top: 6px;
          }
        }

        .top-text-1 {
          font-size: 13px;
          height: 128px;
        }
        .top-text-2 {
          margin: 0 auto 96.5px auto;
        }
        .summary-wireframe-box {
          width: 359px;
          height: 181px;
          .wireframe {
            width: 359px;
            height: 181px;
          }

          .summary-points {
            &.points-1 {
              width: 150px;
              position: absolute;
              left: 0;
              top: -69px;
              .points-text {
                width: 150px;
              }
              .points-image {
                position: absolute;
                left: 25.5px;
                top: 75px;
              }
              .line {
                width: 17.5px;
              }
            }

            &.points-2 {
              width: 107.5px;
              position: absolute;
              right: 3px;
              top: -69px;
              .points-text {
                width: 87.5px;
              }
              .points-image {
                position: absolute;
                left: -58px;
                top: 27.5px;
              }
              .line {
                width: 50px;
              }
            }
            &.points-3 {
              width: 108px;
              position: absolute;
              right: 2.5px;
              top: 55.5px;
              .points-text {
                width: 83px;
              }
              .points-image {
                position: absolute;
                top: 20px;
                left: 8px;
              }
              .line {
                width: 1px;
              }
            }

            &.points-4 {
              width: 121.5px;
              position: absolute;
              left: 2px;
              bottom: -79px;
              .points-text {
                width: 121.5px;
              }
              .points-image {
                position: absolute;
                left: 27px;
                top: -64.5px;
              }
              .line {
                width: 35.5px;
              }
            }

            &.points-5 {
              width: 200px;
              position: absolute;
              right: 2.5px;
              bottom: -79px;
              .points-text {
                width: 188px;
              }
              .points-image {
                position: absolute;
                left: 43px;
                top: -63px;
                height: 50.5px;
                width: 1px;
                overflow: hidden;
              }
              .line {
                width: 1px;
              }
            }
          }
        }
        &.smallScreen {
          .top-text-2 {
            margin: 0 auto 66px auto;
          }
        }
      }
    }

    .no_camera_dialog {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 99;
      &_mask {
        position: absolute;
        left: 0;
        top: 0;
        width: 100vw;
        height: calc(var(--vh, 1vh) * 100);
        background: rgba(0, 0, 0, 0.5);
        z-index: 0;
      }
      &_content {
        width: 296.5px;
        min-height: 248px;
        background: #ffffff;
        border-radius: 8px;
        z-index: 1;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        box-sizing: border-box;
        padding: 22px 0 32px 0;
      }
      &_title {
        font-size: 23px;
        line-height: 1.2;
        font-family: Source Han Sans SC;
        font-weight: 500;
        color: #000000;
        width: 228px;
        text-align: center;
        margin-bottom: 26px;
      }
      &_text_content {
        width: 250px;
        text-align: left;
        font-size: 20px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #010101;
        line-height: 33px;
        margin-bottom: 41.5px;
      }
      &_button {
        width: 215.5px;
        height: 34.5px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        &_bg {
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
        }
        &_text {
          font-size: 16.5px;
          font-family: Source Han Sans SC;
          font-weight: 500;
          color: #ffffff;
          z-index: 1;
        }
      }
    }
  }
}

.mobile {
  .main_content {
    width: 10rem;
    height: calc(var(--vh, 1vh) * 100);
    background: #ffffff;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    .briefsummary-box {
      position: absolute;
      top: 0rem;
      left: 0rem;
      right: 0rem;
      bottom: 0rem;
      z-index: 99;
      overflow: hidden;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      .briefsummary-content {
        width: 100%;
        height: 100%;
        position: relative;
        .bg {
          width: 100%;
          height: 100%;
        }
      }
    }

    .briefsummary-main-box {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;

      .top-text {
        width: 9.3067rem;
        font-size: 0.56rem;
        font-family: Source Han Sans SC;
        font-weight: bold;
        color: #f57e79;
        margin: 1.2133rem auto 0.2667rem auto;
        // -webkit-text-stroke: 0.0267rem #fff;
        // text-stroke: 0.0267rem #ffffff;
        text-align: center;
      }
      .top-text-1 {
        width: 9.0667rem;
        font-size: 0.4rem;
        font-family: Source Han Sans SC;
        font-weight: bold;
        color: #fd8882;
        margin: 0 auto 0.2933rem auto;
        height: 2.1333rem;
        text-align: center;
      }
      .top-text-2 {
        font-size: 0.7733rem;
        font-family: Source Han Sans SC;
        font-weight: bold;
        color: #f57e79;
        margin: 0 auto 1.3867rem auto;
        width: 100%;
        text-align: center;
      }

      .summary-wireframe-box {
        width: 7.9467rem;
        height: 6.9867rem;
        margin: 0 auto;
        position: relative;

        .wireframe {
          width: 7.9467rem;
          height: 6.9867rem;
        }
        .summary-points {
          .no {
            font-size: 0.5067rem;
            font-family: Source Han Sans SC;
            font-weight: bold;
            color: #fd8882;
            line-height: 0.56rem;
            position: absolute;
            left: 0;
          }

          &.points-top-left {
            width: 4.2667rem;
            position: absolute;
            left: -0.84rem;
            top: -0.4533rem;
            .points-text {
              width: 4.2667rem;
            }
            .points-image {
              position: absolute;
              left: 0.4rem;
              top: 0.2667rem;
            }
            .line {
              width: 5.8933rem;
            }
          }

          &.points-top-right {
            width: 2.6667rem;
            position: absolute;
            right: 0.1067rem;
            top: -0.4667rem;
            .points-text {
              width: 2.6667rem;
            }
            .points-image {
              position: absolute;
              left: -0.1333rem;
              top: 1.7333rem;
            }
            .line {
              width: 1.12rem;
            }
          }
          &.points-left-bottom {
            width: 4rem;
            position: absolute;
            left: -0.8533rem;
            bottom: -1.8133rem;
            .points-text {
              width: 4rem;
            }
            .points-image {
              position: absolute;
              left: 0.6667rem;
              top: -1.5333rem;
            }
            .line {
              width: 1.4933rem;
            }
          }
          &.points-right-bottom {
            width: 4rem;
            position: absolute;
            right: -0.24rem;
            bottom: -1.92rem;
            .points-text {
              width: 4rem;
            }
            .points-image {
              position: absolute;
              left: 0.4rem;
              top: -1.6rem;
            }
            .line {
              width: 0.7733rem;
            }
          }
        }
        .points-content {
          padding-left: 0.5333rem;
          .points-text {
            width: 4.2667rem;
            height: 1.5467rem;
            font-size: 0.36rem;
            font-family: Source Han Sans SC;
            font-weight: bold;
            color: #919191;
            line-height: 0.56rem;
            text-align: left;
            word-wrap: break-word;
            hyphens: auto;
          }
        }
      }
      .bottom-box {
        height: 3.4667rem;
        flex-shrink: 0;
      }
      .botton-box {
        display: flex;
        position: absolute;
        left: 0;
        bottom: 0.5333rem;
        width: 100%;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .tips-text {
          height: 0.5867rem;
          font-size: 0.32rem;
          font-weight: 400;
          color: #919191;
          line-height: 0.32rem;
          margin-top: 0.32rem;
        }
      }
      .slide_up {
        opacity: 1 !important;
        transition: opacity 0.8s ease;
      }
      &.big {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .top-text {
          margin: 1.2133rem auto 0.2667rem auto;
        }
        .top-text-1 {
          margin: 0 auto 2rem auto;
        }
        .botton-box {
          position: relative;
          bottom: 1.6rem;
          margin-top: 2.1333rem;
          .tips-text {
            margin-top: 0.5867rem;
          }
        }
      }
      &.smallScreen {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        .top-text {
          margin: 0 auto;
        }
        .top-text-1 {
          margin: 0 auto;
        }
        .top-text-2 {
          margin: 0 auto 0.2933rem auto;
        }
      }

      &.lie {
        .top-text {
          margin-top: 0.5333rem;
        }

        .top-text-1 {
          font-size: 0.3467rem;
          height: 3.4133rem;
          line-height: 0.3733rem;
          margin: 0 auto 1.0133rem auto;
        }
        .points-content {
          .points-text {
            font-size: 0.2667rem;
            line-height: 0.3733rem;
            padding-top: 0.16rem;
          }
        }
        .top-text-2 {
          margin: 0 auto 2.5733rem auto;
        }
        .summary-wireframe-box {
          width: 9.5733rem;
          height: 4.8267rem;
          .wireframe {
            width: 9.5733rem;
            height: 4.8267rem;
          }

          .summary-points {
            &.points-1 {
              width: 4rem;
              position: absolute;
              left: 0;
              top: -1.84rem;
              .points-text {
                width: 4rem;
              }
              .points-image {
                position: absolute;
                left: 0.68rem;
                top: 2rem;
              }
              .line {
                width: 0.4667rem;
              }
            }

            &.points-2 {
              width: 2.8667rem;
              position: absolute;
              right: 0.08rem;
              top: -1.84rem;
              .points-text {
                width: 2.3333rem;
              }
              .points-image {
                position: absolute;
                left: -1.5467rem;
                top: 0.7333rem;
              }
              .line {
                width: 1.3333rem;
              }
            }
            &.points-3 {
              width: 2.88rem;
              position: absolute;
              right: 0.0667rem;
              top: 1.48rem;
              .points-text {
                width: 2.2133rem;
              }
              .points-image {
                position: absolute;
                top: 0.5333rem;
                left: 0.2133rem;
              }
              .line {
                width: 0.0267rem;
              }
            }

            &.points-4 {
              width: 3.24rem;
              position: absolute;
              left: 0.0533rem;
              bottom: -2.1067rem;
              .points-text {
                width: 3.24rem;
              }
              .points-image {
                position: absolute;
                left: 0.72rem;
                top: -1.72rem;
              }
              .line {
                width: 0.9467rem;
              }
            }

            &.points-5 {
              width: 5.3333rem;
              position: absolute;
              right: 0.0667rem;
              bottom: -2.1067rem;
              .points-text {
                width: 5.0133rem;
              }
              .points-image {
                position: absolute;
                left: 1.1467rem;
                top: -1.68rem;
                height: 1.3467rem;
                width: 0.0267rem;
                overflow: hidden;
              }
              .line {
                width: 0.0267rem;
              }
            }
          }
        }
        &.smallScreen {
          .top-text-2 {
            margin: 0 auto 1.76rem auto;
          }
        }
      }
    }
    .no_camera_dialog {
      position: fixed;
      left: 0;
      top: 0;
      width: 100vw;
      height: calc(var(--vh, 1vh) * 100);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 99;
      &_mask {
        position: absolute;
        left: 0;
        top: 0;
        width: 100vw;
        height: calc(var(--vh, 1vh) * 100);
        background: rgba(0, 0, 0, 0.5);
        z-index: 0;
      }
      &_content {
        width: 7.9067rem;
        min-height: 6.6133rem;
        background: #ffffff;
        border-radius: 0.2133rem;
        z-index: 1;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        box-sizing: border-box;
        padding: 0.5867rem 0 0.8533rem 0;
      }
      &_title {
        font-size: 0.6133rem;
        line-height: 1.2;
        font-family: Source Han Sans SC;
        font-weight: 500;
        color: #000000;
        width: 6.08rem;
        text-align: center;
        margin-bottom: 0.6933rem;
      }
      &_text_content {
        width: 6.6667rem;
        text-align: left;
        font-size: 0.5333rem;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #010101;
        line-height: 0.88rem;
        margin-bottom: 1.1067rem;
      }
      &_button {
        width: 5.7467rem;
        height: 0.92rem;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        &_bg {
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
        }
        &_text {
          font-size: 0.44rem;
          font-family: Source Han Sans SC;
          font-weight: 500;
          color: #ffffff;
          z-index: 1;
        }
      }
    }

    &.big {
    }
  }
}
// 横屏
@media only screen and (orientation: landscape) {
  .page {
    &.mobile {
      height: auto;
      .main_content {
        min-height: calc(var(--vh, 1vh) * 100) !important;
        .briefsummary-box {
          overflow: unset;
          position: relative;
          .briefsummary-content {
            height: auto;
          }
        }
      }
    }
  }
}
// 竖屏
@media only screen and (orientation: portrait) {
}
</style>
