<template>
  <div id="mobile" class="index" :class="showNav || showOrder ? 'hidden' : ''">
    <HomeLoad v-show="showloading" :bg="'bg'" :loading="loading"></HomeLoad>

    <Nav
      v-if="showNav"
      @closeMobileNav="closeMobileNav"
      @toViewSwiper="toViewSwiper"
    ></Nav>
    <img
      v-show="!showNav"
      :src="require('@/assets/mobile/nav.png')"
      class="nav_btn"
      alt=""
      srcset=""
      @click="showNav = true"
    />
    <div ref="mySwiper" class="swiper-container mySwiper">
      <div v-show="!showloading" class="swiper-wrapper" style="height: 100vh;">
        <div class="swiper-slide m-home">
          <img
            :src="require('@/assets/partTwo/btn.png')"
            class="playBtn"
            alt=""
            srcset=""
            @click="showVideoBox = true"
          />
          <img
            :src="require('@/assets/partOne/age.png')"
            class="ageTip"
            alt=""
            @click="openArgument('ageTips')"
          />

          <!-- <div class="orderBox" @click="showOrder = true"></div> -->
          <div class="orderBox">
            <div class="order_btn" @click="showOrder = true"></div>
          </div>
          <!-- <div class="req" @click="showLand = true"></div> -->
        </div>

        <div class="swiper-slide mobile_news">
          <div :data-background="bg_two" class="innerBox swiper-lazy">
            <NewList :news="newsList" :data="dataList"></NewList>
          </div>
        </div>

        <div class="swiper-slide mobile_world">
          <div :data-background="world_bg" class="world_bg swiper-lazy">
            <img
              :data-src="world_cloud"
              class="world_cloud swiper-lazy"
              alt=""
            />
            <img
              :data-src="require('@/assets/mobile/story.png')"
              class="story swiper-lazy"
              alt=""
            />
            <div class="content">
              <img
                :data-src="require('@/assets/mobile/world_borderBottom.png')"
                class="world_borderBottom swiper-lazy"
                alt=""
              />
              <img
                :data-src="require('@/assets/mobile/world_borderTop.png')"
                class="world_borderTop swiper-lazy"
                alt=""
              />
              <div :class="activeIndex === 2 ? 'feedInOne' : ''">
                <p>
                  曾经容纳世间无穷乐趣的梦乐园,因为真理之书的失
                </p>
                <p>
                  窃散落而迅速衰败。
                </p>
              </div>
              <p :class="activeIndex === 2 ? 'feedInTwo' : ''">
                前任乐园管理员用真理之书的残页,召唤出了——
              </p>
              <div :class="activeIndex === 2 ? 'feedInThree' : ''">
                <p>“从今天起,这座乐园就属于你了!”</p>
                <p>“?!”</p>
                <p>“赶紧想办法重建乐园!”</p>
                <p>“……”</p>
              </div>
              <div :class="activeIndex === 2 ? 'feedInFour' : ''">
                <p>「虽然突兀,虽然荒诞,但也不妨试着感受一下,</p>
                <p>也许您会在将来体验到无与伦比的乐趣。</p>
                <p>这里是为疲劳之人准备的软椅,是为伤心之人建造的</p>
                <p>乐园。</p>
              </div>
              <div :class="activeIndex === 2 ? 'feedInFive' : ''">
                <p>请睁开双眼,今夜的烟火只为特别的您所准备。</p>
                <p>就此离开,也许会有遗憾……」</p>
                <p>欢迎来到梦乐园,梦幻与魔法永不落幕!</p>
              </div>
            </div>
          </div>
        </div>

        <!-- <div class="swiper-slide mobile_characters">
          <div class="content">
            <img
              :data-src="swiper_bg"
              class="swiper_bg swiper-lazy"
              alt=""
              srcset=""
            />
            <transition name="fade">
              <div
                v-if="changeActive"
                class="bg"
                :style="{ backgroundImage: 'url(' + characterArr[2].bg + ')' }"
              ></div>
            </transition>
            <transition name="fade">
              <img
                v-if="changeActive"
                :src="characterArr[2].dialogue_bg"
                class="dialogue_bg"
                alt=""
              />
            </transition>
            <div class="desBox">
              <div class="preview">
                CHARACTER PREVIEW
              </div>
              <div class="introduce">
                <div class="character_name">
                  {{ characterArr[2].name }}
                </div>
                <div class="cv_name">
                  <div
                    v-if="characterArr[2].audio"
                    class="changeBtn"
                    @click="changeLan"
                  >
                    <div v-show="lan === 'jp'" class="lan">日</div>
                    <div
                      v-lazy:background-image="
                        require('../assets/mobile/changeBtn.png')
                      "
                      class="btn"
                    ></div>
                    <div v-show="lan === 'cn'" class="lan">中</div>
                  </div>
                  <a v-if="!characterArr[2].audio" class="text">敬请期待</a>
                  <a v-if="characterArr[2].audio" class="text"
                    >CV:{{
                      lan === "jp"
                        ? characterArr[2].cv_name
                        : characterArr[2].cv_name_cn
                    }}</a
                  >
                  <a
                    v-if="characterArr[2].audio"
                    class="voice"
                    @click="togglePlay"
                  >
                    <img
                      :src="
                        play
                          ? require('@/assets/partFour/vioce.gif')
                          : require('@/assets/partFour/vioce.png')
                      "
                      alt=""
                  /></a>
                </div>
              </div>
              <div class="dialogue">
                <p class="text">
                  {{ characterArr[2].dialogue }}
                </p>
              </div>
            </div>
            <div
              :data-background="require('@/assets/mobile/swiper.png')"
              class="swiper swiper-lazy"
            >
              <div
                :data-background="require('@/assets/mobile/prev.png')"
                class="prev swiper-lazy"
                @click="prev()"
              ></div>
              <div
                :data-background="require('@/assets/mobile/next.png')"
                class="next swiper-lazy"
                @click="next()"
              ></div>
              <ul class="characterList">
                <li
                  v-for="(item, index) in activeArr"
                  :key="index"
                  class="character-item"
                >
                  <img
                    v-if="index == 2 && activeIndex >= 2"
                    :src="require('@/assets/mobile/checked.png')"
                    class="active_img"
                    alt=""
                  />
                  <img
                    v-if="activeIndex >= 2"
                    :src="item.miniPic"
                    alt=""
                    @click="changeCharacter(index)"
                  />
                </li>
              </ul>
              <img
                v-if="activeIndex >= 2"
                :src="characterArr[2].team_bg"
                alt=""
                class="teamPic"
              />
            </div>
          </div>
        </div> -->

        <div class="swiper-slide mobile_characters">
          <div id="swiper-container2" class="swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide contentBox">
                <div class="content">
                  <img
                    :data-src="swiper_bg"
                    class="swiper_bg swiper-lazy"
                    alt=""
                    srcset=""
                  />
                  <transition name="fade">
                    <div
                      v-if="changeActive"
                      class="bg"
                      :style="{
                        backgroundImage: 'url(' + characterArr[2].bg + ')',
                      }"
                    ></div>
                  </transition>
                  <transition name="fade">
                    <img
                      v-if="changeActive"
                      :src="characterArr[2].dialogue_bg"
                      class="dialogue_bg"
                      alt=""
                    />
                  </transition>
                  <div class="desBox">
                    <div class="preview">
                      CHARACTER PREVIEW
                    </div>
                    <div class="introduce">
                      <div class="character_name">
                        {{ characterArr[2].name }}
                      </div>
                      <div class="cv_name">
                        <div
                          v-if="characterArr[2].audio"
                          class="changeBtn"
                          @click="changeLan"
                        >
                          <div v-show="lan === 'jp'" class="lan">日</div>
                          <div
                            v-lazy:background-image="
                              require('../assets/mobile/changeBtn.png')
                            "
                            class="btn"
                          ></div>
                          <div v-show="lan === 'cn'" class="lan">中</div>
                        </div>
                        <a v-if="!characterArr[2].audio" class="text"
                          >敬请期待</a
                        >
                        <a v-if="characterArr[2].audio" class="text"
                          >CV:{{
                            lan === "jp"
                              ? characterArr[2].cv_name
                              : characterArr[2].cv_name_cn
                          }}</a
                        >
                        <a
                          v-if="characterArr[2].audio"
                          class="voice"
                          @click="togglePlay"
                        >
                          <img
                            :src="
                              play
                                ? require('@/assets/partFour/vioce.gif')
                                : require('@/assets/partFour/vioce.png')
                            "
                            alt=""
                        /></a>
                      </div>
                    </div>
                    <div class="dialogue">
                      <p class="text">
                        {{ characterArr[2].dialogue }}
                      </p>
                    </div>
                  </div>
                  <div
                    :data-background="require('@/assets/mobile/swiper.png')"
                    class="swiper swiper-lazy"
                  >
                    <div
                      :data-background="require('@/assets/mobile/prev.png')"
                      class="prev swiper-lazy"
                      @click="prev()"
                    ></div>
                    <div
                      :data-background="require('@/assets/mobile/next.png')"
                      class="next swiper-lazy"
                      @click="next()"
                    ></div>
                    <ul class="characterList">
                      <li
                        v-for="(item, index) in activeArr"
                        :key="index"
                        class="character-item"
                      >
                        <img
                          v-if="index == 2 && activeIndex >= 2"
                          :src="require('@/assets/mobile/checked.png')"
                          class="active_img"
                          alt=""
                        />
                        <img
                          v-if="activeIndex >= 2"
                          :src="item.miniPic"
                          alt=""
                          @click="changeCharacter(index)"
                        />
                      </li>
                    </ul>
                    <img
                      v-if="activeIndex >= 2"
                      :src="characterArr[2].team_bg"
                      alt=""
                      class="teamPic"
                    />
                  </div>
                </div>
                <nuxt-link
                  class="listItem"
                  :to="{ name: 'terms' }"
                  target="_blank"
                >
                  <span>《用戶協議》及《用戶隱私條例》 </span>
                </nuxt-link>
                <img
                  :data-src="require('@/assets/footer/starlinear.png')"
                  class="starLine_logo swiper-lazy"
                  alt=""
                />
                <img
                  :data-src="require('@/assets/footer/lunaring_logo.png')"
                  class="lunaring_logo swiper-lazy"
                  alt=""
                />
                <img
                  :data-src="require('@/assets/footer/fearless.png')"
                  class="fearless_logo swiper-lazy"
                  alt=""
                />

                <!-- <img
                    :data-src="require('@/assets/footer/fearless.png')"
                    class="fearless_logo swiper-lazy"
                    alt=""
                  /> -->
                <p class="argularTxt small mt">
                  © STARLINEAR(HK) LTD.
                </p>
                <p class="argularTxt small">
                  © LUNARING CO., LTD.
                </p>
              </div>
            </div>
            <div class="swiper-scrollbar">
              <div class="swiper-scrollbar-drag"></div>
            </div>
            <span
              class="swiper-notification"
              aria-live="assertive"
              aria-atomic="true"
            ></span>
          </div>
        </div>

        <!-- <div class="swiper-slide mobile_footer">
          <div
            :data-background="require('@/assets/footer/pc_bg.jpg')"
            class="ulList swiper-lazy"
          >
            <p class="listTitle">关注官方账号,获取游戏最新资讯!</p>
            <ul class="list">
              <li
                v-for="(item, index) in contactList"
                :key="index"
                class="item"
              >
                <a v-if="item.href" :href="item.href" target="_blank">
                  <img :data-src="item.src" alt="" class="swiper-lazy" />
                </a>
                <div v-else :class="item.id">
                  <img
                    :data-src="item.src"
                    alt=""
                    class="swiper-lazy"
                    @click="enter(item.id)"
                  />
                  <a
                    v-if="showQQ && item.id == 'QQ'"
                    href="https://jq.qq.com/?_wv=1027&k=BgdhvKj5"
                    target="_blank"
                    rel="noopener noreferrer"
                    :style="{
                      backgroundImage:
                        'url(' + require('@/assets/footer/qq_bg.png') + ')',
                    }"
                    class="qqNum"
                    @click="leaveFn(item.id)"
                    >官方⑤群:819827942</a
                  >
                  <img
                    v-if="showCode && item.id == 'wechat'"
                    :src="require('@/assets/footer/code.png')"
                    class="code"
                    alt=""
                    @click="leaveFn(item.id)"
                  />
                </div>
              </li>
            </ul>
          </div>
          <div
            :data-background="require('@/assets/footer/footer_bg1.jpg')"
            class="arguments swiper-lazy"
          >
            <ul class="argumentList">
              <li
                v-for="(item, index) in argumentList"
                :key="index"
                class="item"
              >
                <p
                  v-if="item.argumentTitle"
                  class="txt"
                  @click="openArgument(item.argumentTitle)"
                >
                  {{ item.txt }}
                </p>
                <p v-else class="txt" @click="showContact = true">
                  {{ item.txt }}
                </p>
              </li>
            </ul>
            <div class="contentTxt">
              <a
                href="https://beian.miit.gov.cn/#/Integrated/index"
                target="_blank"
                rel="noopener noreferrer"
                ><p class="boldTxt">沪ICP备20012597号-1</p></a
              >
              <p class="boldTxt mb">
                沪网文(2020) 2195-180号
              </p>
              <a
                href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=31010402009137"
                target="_blank"
                rel="noopener noreferrer"
              >
                <p class="boldTxt">沪公网安备31010402009137号</p></a
              >
              <p class="boldTxt">
                增值电信业务许可证:沪B2-20200829
              </p>
              <p class="argularTxt mt">国家反诈中心提示:接到“96110”来电,</p>
              <p class="argularTxt">
                意味着你可能正在遭受电信网络诈骗犯罪分子的侵害,
              </p>
              <p class="argularTxt mb">
                请立即接听!
              </p>
            </div>
            <div class="advice">
              <p class="argularTxt">
                健康游戏忠告:
              </p>
              <p class="argularTxt">抵制不良游戏,拒绝盗版游戏。</p>
              <p class="argularTxt">注意自我保护,谨防受骗上当。</p>
              <p class="argularTxt">适度游戏益脑,沉迷游戏伤身。</p>
              <p class="argularTxt">合理安排时间,享受健康生活。</p>
              <p class="argularTxt mt">本游戏适合16岁或以上玩家。</p>
            </div>
            <p class="argularTxt small mt">
              © STARLINEAR CO., LTD. ALL RIGHTS RESERVED
            </p>
            <p class="argularTxt small">
              © LUNARING CO., LTD. ALL RIGHTS RESERVED
            </p>
            <img
              :data-src="require('@/assets/footer/starline.png')"
              class="starLine_logo swiper-lazy"
              alt=""
            />
            <img
              :data-src="require('@/assets/footer/lunaring.png')"
              class="lunaring_logo swiper-lazy"
              alt=""
            />
          </div>
        </div> -->
      </div>
    </div>
    <audio
      ref="myAudio"
      controls="controls"
      :src="lan === 'cn' ? characterArr[2].audio : characterArr[2].audio_jp"
    ></audio>
    <div
      v-show="activeIndex !== 4"
      class="swiper-button-next swiper_btn _mobile"
    ></div>
    <div
      v-show="activeIndex === 4"
      class="swiper-button-prev swiper_btn _mobile btn-hidden"
    ></div>
    <VideoBox
      v-if="showVideoBox"
      :bg="'bg'"
      @closeViedoBox="closeViedoBox"
    ></VideoBox>
    <Order v-if="showOrder" :bg="'bg'" @closeOrder="closeOrder"></Order>
    <Land v-if="showLand" :bg="'bg'" @closeLand="closeLand"></Land>
    <Contact
      v-if="showContact"
      :bg="'bg'"
      @closeContact="closeContact"
    ></Contact>
    <Argument
      v-if="showArgument"
      :bg="'bg'"
      :argument-title="argumentTitle"
      @closeArgument="closeArgument"
    ></Argument>
  </div>
</template>

<script>
import Swiper from "swiper";
import { getIp, getData } from "@/api/data.js";

export default {
  name: "Mobile",
  components: {
    Nav: () => import("@/components/m-nav.vue"),
    HomeLoad: () => import("@/components/Home_load.vue"),
    Order: () => import("@/components/order.vue"),
    Land: () => import("@/components/land.vue"),
    VideoBox: () => import("@/components/VideoBox.vue"),
    NewList: () => import("../components/newsList.vue"),
  },
  async asyncData({ req, store }) {
    const [d1, d2] = await Promise.all([getIp().then(), getData().then()]);
    store.commit("storageData/addHeaders", d1.data.ip);
    const newsList = {
      last: d2.data.news,
      notice: [],
      activity: [],
      trends: [],
    };
    d2.data.news.forEach((element) => {
      // element.time = element.time.substring(0, 10);
      if (element.types === 1) {
        newsList.notice.push(element);
      }
      if (element.types === 2) {
        newsList.activity.push(element);
      }
      if (element.types === 3) {
        newsList.trends.push(element);
      }
    });
    return { d1, dataList: d2.data, newsList };
    // return { d1 };
  },
  data() {
    return {
      play: false,
      mySwiper: "",
      activeIndex: 0,
      active_character: 2,
      swiper_bg: "https://cdn.star-linear.com/resource/dream/m/swiper_bg.png",
      trailer_bg: "https://cdn.star-linear.com/resource/dream/m/trailer_bg.jpg",
      bg_two: require("@/assets/mobile/trailer_bg.png"),
      bg_two_light: "../assets/partTwo/bg_two_light.png",
      world_bg: "https://cdn.star-linear.com/resource/dream/m/world_bg.jpg",
      world_cloud:
        "https://cdn.star-linear.com/resource/dream/m/world_cloud.png",
      character_name: "",
      characterArr: [
        {
          name: "贝汀那",
          cv_name: "高桥广树",
          cv_name_cn: "梁达伟",
          team_bg: require("@/assets/partFour/demian_team.png"),
          name_bg: require("@/assets/partFour/bethina_name.png"),
          miniPic: require("@/assets/partFour/bethina.png"),
          bg: "https://cdn.star-linear.com/resource/dream/m/bethina_bg.jpg",
          dialogue: "拂晓骑兵团成员之一,思维有些跳脱,让人捉摸不透。",
          dialogue_bg: require("@/assets/mobile/bethina_dialogue.png"),
          audio:
            "https://cdn.star-linear.com/voice/cv/Bethina_CN_202272517489.mp3",
          audio_jp:
            "https://cdn.star-linear.com/voice/cv/Bethina_JP_2022725174810.mp3",
        },
        {
          name: "奇琪蒂",
          cv_name: "下野纮",
          team_bg: require("@/assets/partFour/demian_team.png"),
          name_bg: require("@/assets/partFour/kikidi_name.png"),
          miniPic: require("@/assets/partFour/kikidi.png"),
          bg: "https://cdn.star-linear.com/resource/dream/m/kikidi_bg.jpg",
          dialogue: "神秘的少年。看似友好的笑容下藏着什么呢?",
          dialogue_bg: require("@/assets/mobile/kikidi_dialogue.png"),
          audio: "",
        },
        {
          name: "德米安",
          cv_name: "日野聪",
          cv_name_cn: "杨超然",
          team_bg: require("@/assets/partFour/demian_team.png"),
          name_bg: require("@/assets/partFour/demian_name.png"),
          miniPic: require("@/assets/partFour/demian.png"),
          bg: "https://cdn.star-linear.com/resource/dream/m/demian_bg.png",
          dialogue: "拂晓骑兵团的团长,同时也是洛维斯的王子。",
          dialogue_bg: require("@/assets/mobile/demian_dialogue.png"),
          audio:
            "https://cdn.star-linear.com/voice/cv/demian_CN_2022725174811.mp3",
          audio_jp: "https://cdn.star-linear.com/voice/cv/demian_JP.mp3",
        },
        {
          name: "伊斯雷尔",
          cv_name: "佐藤拓也",
          team_bg: require("@/assets/partFour/isreall_team.png"),
          name_bg: require("@/assets/partFour/isreall_name.png"),
          miniPic: require("@/assets/mobile/isreall.png"),
          bg: "https://cdn.star-linear.com/resource/dream/m/isreall_bg.jpg",
          dialogue: "塔吉玛的掌管者。为人不苟言笑,做事雷厉风行。",
          dialogue_bg: require("@/assets/mobile/isreall_dialogue.png"),
          audio: "",
        },
        {
          name: "瑟琉",
          cv_name: "福山润",
          team_bg: require("@/assets/partFour/selieu_team.png"),
          name_bg: require("@/assets/partFour/selieu_name.png"),
          miniPic: require("@/assets/partFour/selieu.png"),
          bg: "https://cdn.star-linear.com/resource/dream/m/selieu_bg.jpg",
          dialogue: "统治精灵的王,让精灵们彻底与外界隔开。讨厌争端。",
          dialogue_bg: require("@/assets/mobile/selieu_dialogue.png"),
          audio: "",
        },
        {
          name: "奥菲利亚",
          cv_name: "中原麻衣",
          cv_name_cn: "魏欣琛",
          team_bg: require("@/assets/partFour/demian_team.png"),
          name_bg: require("@/assets/partFour/ophelia_name.png"),
          miniPic: require("@/assets/partFour/ophelia.png"),
          bg: "https://cdn.star-linear.com/resource/dream/m/ophelia_bg.jpg",
          dialogue: "拂晓骑兵团成员之一,骑术、剑术等均为顶尖水准。",
          dialogue_bg: require("@/assets/mobile/ophelia_dialogue.png"),
          audio:
            "https://cdn.star-linear.com/voice/cv/Ophelia_CN_2022725174811.mp3",
          audio_jp: "https://cdn.star-linear.com/voice/cv/Ophelia_JP.mp3",
        },
      ],
      contactList: [
        {
          src: require("@/assets/footer/sina.png"),
          href: "https://weibo.com/p/1006067514307100/",
          id: "sina",
        },
        {
          src: require("@/assets/footer/wechat.png"),
          href: "",
          id: "wechat",
        },
        {
          src: require("@/assets/footer/QQ.png"),
          href: "",
          id: "QQ",
        },
        {
          src: require("@/assets/footer/bilibi.png"),
          href: "https://space.bilibili.com/1988649931/dynamic",
          id: "bilibi",
        },
      ],
      argumentList: [
        {
          txt: "用户协议",
          argumentTitle: "userAgreement",
        },
        {
          txt: " 平台协议",
          argumentTitle: "platformAgreement",
        },
        {
          txt: "隐私政策",
          argumentTitle: "privacyPolicy",
        },
        {
          txt: "联系我们",
          href: "",
        },
      ],
      activeArr: [],
      changeActive: true,
      showOrder: false,
      showLand: false,
      showNav: false,
      showVideoBox: false,
      showArgument: false,
      showContact: false,
      count: 0,
      loading: 0,
      precent: 0,
      imglength: 0,
      imgs: [
        require("@/assets/mobile/loading.png"),
        require("@/assets/mobile/loading_line.png"),
        "https://cdn.star-linear.com/resource/dream/m/home_bg.jpg",
        "https://cdn.star-linear.com/resource/dream/order.png",
        "https://cdn.star-linear.com/resource/dream/m/trailer_bg.jpg",
        require("@/assets/mobile/scroll.png"),
        require("@/assets/partOne/age.png"),
      ],
      intervalId: null,
      showloading: true,
      height: 0,
      showCode: false,
      showQQ: false,
      ip: "",
      newsList: {
        last: [
          {
            id: "e045okE2caPEhvWjUn01--8M9Rdb71bYimnXP7XGqQ",
            title: "雾境序列萤火虫动漫游戏嘉年华直参信息",
            type: 3,
            type_text: "动态",
            time: "2021-12-24 18:35",
          },
          {
            id: "9e340zcgZHM91LWJ92mD-tsQ57mHgvDaDvkzJjMafQ",
            title: "【极羽号电台】#1 - “雾语者”测试Q&A",
            type: 3,
            type_text: "动态",
            time: "2021-10-21 20:21",
          },
          {
            id: "7b19GsB-wK4SqYMjM595-qjLJ5PCIfeE6x_9ep5hqg",
            title: "「雾语者测试」官方测试交流群",
            type: 1,
            type_text: "公告",
            time: "2021-09-13 17:38",
          },
          {
            id: "2f04BbZtroXNJPmrOUW5yeGsfLpPLpXvvSXWC72gNg",
            title: "“雾语者测试”激活&安装流程",
            type: 1,
            type_text: "公告",
            time: "2021-09-06 17:22",
          },
          {
            id: "74549PFKN64ee74za-NVz3aalqwlKsploeHPOjDT3Q",
            title: "“雾语者测试”定档&招募截止预告",
            type: 1,
            type_text: "公告",
            time: "2021-08-30 16:25",
          },
          {
            id: "83ceB4SZqDLa4p8hWt-uBpso3q3I_Eo0T6iMkjYj_Q",
            title: "“雾语者测试”招募",
            type: 1,
            type_text: "公告",
            time: "2021-07-21 20:09",
          },
          {
            id: "3acbAIGSf8PgGuNfJUPVwOF2VN3HHItjDGmObXnUzQ",
            title: "实机玩法演示公开",
            type: 1,
            type_text: "公告",
            time: "2021-07-16 20:09",
          },
          {
            id: "fba2pOxNyGkSs7hhqhkAS8NyIc49gP69J956iwTGiw",
            title: "官方预约开启",
            type: 1,
            type_text: "公告",
            time: "2021-07-16 20:04",
          },
          {
            id: "9d158Ke6eepRMkE42XZbehfzPBr9gN9QqibeBC6tYQ",
            title: "《雾境序列》将于TapTap发布会亮相",
            type: 3,
            type_text: "动态",
            time: "2021-07-08 12:11",
          },
          {
            id: "2c49amId60Ju8xV6GiMu5BSArPmVaE2GfVuWFuXquA",
            title: "雾境序列CP28直参信息",
            type: 3,
            type_text: "动态",
            time: "2021-06-08 19:42",
          },
        ],
        notice: [
          {
            id: "7b19GsB-wK4SqYMjM595-qjLJ5PCIfeE6x_9ep5hqg",
            title: "「雾语者测试」官方测试交流群",
            type: 1,
            type_text: "公告",
            time: "2021-09-13 17:38",
          },
          {
            id: "2f04BbZtroXNJPmrOUW5yeGsfLpPLpXvvSXWC72gNg",
            title: "“雾语者测试”激活&安装流程",
            type: 1,
            type_text: "公告",
            time: "2021-09-06 17:22",
          },
          {
            id: "74549PFKN64ee74za-NVz3aalqwlKsploeHPOjDT3Q",
            title: "“雾语者测试”定档&招募截止预告",
            type: 1,
            type_text: "公告",
            time: "2021-08-30 16:25",
          },
          {
            id: "83ceB4SZqDLa4p8hWt-uBpso3q3I_Eo0T6iMkjYj_Q",
            title: "“雾语者测试”招募",
            type: 1,
            type_text: "公告",
            time: "2021-07-21 20:09",
          },
          {
            id: "3acbAIGSf8PgGuNfJUPVwOF2VN3HHItjDGmObXnUzQ",
            title: "实机玩法演示公开",
            type: 1,
            type_text: "公告",
            time: "2021-07-16 20:09",
          },
          {
            id: "fba2pOxNyGkSs7hhqhkAS8NyIc49gP69J956iwTGiw",
            title: "官方预约开启",
            type: 1,
            type_text: "公告",
            time: "2021-07-16 20:04",
          },
        ],
        activity: [],
        trends: [
          {
            id: "e045okE2caPEhvWjUn01--8M9Rdb71bYimnXP7XGqQ",
            title: "雾境序列萤火虫动漫游戏嘉年华直参信息",
            type: 3,
            type_text: "动态",
            time: "2021-12-24 18:35",
          },
          {
            id: "9e340zcgZHM91LWJ92mD-tsQ57mHgvDaDvkzJjMafQ",
            title: "【极羽号电台】#1 - “雾语者”测试Q&A",
            type: 3,
            type_text: "动态",
            time: "2021-10-21 20:21",
          },
          {
            id: "9d158Ke6eepRMkE42XZbehfzPBr9gN9QqibeBC6tYQ",
            title: "《雾境序列》将于TapTap发布会亮相",
            type: 3,
            type_text: "动态",
            time: "2021-07-08 12:11",
          },
          {
            id: "2c49amId60Ju8xV6GiMu5BSArPmVaE2GfVuWFuXquA",
            title: "雾境序列CP28直参信息",
            type: 3,
            type_text: "动态",
            time: "2021-06-08 19:42",
          },
        ],
      },
      // dataList: {
      //   banner: [
      //     {
      //       id: 11,
      //       img:
      //         "https://cdn.star-linear.com/website/upload/banner/612ca2ab71ef6九宫格改尺寸.png",
      //       jump_url:
      //         "https://ms.star-linear.com/#/newsDetail?id=03f9DDrpEZezUEgNe2Tz6oVp-xYxFYOWZZg9Xvxtkw",
      //     },
      //     {
      //       id: 9,
      //       img:
      //         "https://cdn.star-linear.com/website/upload/banner/60f259f828575预约开启_974X660.png",
      //       jump_url:
      //         "https://ms.star-linear.com/#/newsDetail?id=c5d27C8ZhquZYeN5PBAr8m9KUWRCo-KQzLEa2XhlPg",
      //     },
      //   ],
      // },
      lan: "cn",
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    },
  },
  watch: {
    count(val) {
      if (val === this.imglength) {
        console.log("over");
        // this.showloading = false;
      }
    },
  },
  mounted() {
    if (
      !(
        navigator.userAgent.match(/Android/i) ||
        navigator.userAgent.match(/webOS/i) ||
        navigator.userAgent.match(/iPad/i) ||
        navigator.userAgent.match(/iPhone/i) ||
        navigator.userAgent.match(/iPod/i)
      )
    ) {
      this.$router.push({ path: "/" });
    }

    if (window.location.href.indexOf("#") > 0) {
      // window.location.href = window.location.href.split("#")[0];
      history.pushState({}, "", window.location.href.split("#")[0]);
    }

    this.activeArr = this.characterArr.slice(0, 5);
    this.ip = this.$store.state.storageData.headers["x-real-ip"];

    const mySwiper1 = new Swiper(".mySwiper", {
      initialSlide: this.activeIndex,
      notNextTick: true,
      direction: "vertical",
      setWrapperSize: true,
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      // effect: "fade",
      mousewheel: true,
      mousewheelControl: true,
      slidesPerView: 1,
      resistanceRatio: 0,
      resizeObserver: true,
      height: document.documentElement.clientHeight,
      observer: true,
      observeParents: true,
      speed: 600,
      lazy: {
        loadPrevNext: true,
        loadPrevNextAmount: 1,
        loadOnTransitionStart: true,
      },
      on: {
        slideChange: () => {
          const swiper = this.$refs.mySwiper.swiper;
          this.activeIndex = swiper.activeIndex;
        },
        slideChangeTransitionStart: () => {
          // const swiper = this.$refs.mySwiper.swiper;
          // this.activeIndex = swiper.activeIndex;
          // this.mySwiper.lazy.loadInSlide(this.activeIndex);
        },
      },
    });
    this.mySwiper = mySwiper1;

    const that = this;

    this.footerSwiper = new Swiper("#swiper-container2", {
      direction: "vertical",
      slidesPerView: "auto", // 设置slider容器能够同时显示的slides数量
      freeMode: true, // 动量反弹。slides通过惯性滑动到边缘时,无法反弹。
      mousewheel: true,
      nested: true,
      speed: 600,
      observeParents: true,
      observer: true,
      breakpoints: {
        320: {
          // 当屏幕宽度大于等于320
          freeMode: true,
        },
        768: {
          // 当屏幕宽度大于等于768
          freeMode: true,
        },
        1280: {
          // 当屏幕宽度大于等于1280
          freeMode: false,
        },
      },
      // 当在container2中滚到最下方,或者最上面的时候都会开启container1的鼠标滚轴控制
      on: {
        reachEnd() {
          // 回调函数,当Swiper切换到最后一个Slide时执行(长页面滑动到底部的时候)
          // mySwiper1.mousewheel.enable(); // 开启container1的滚轴控制
        },
        progress(progress) {
          if (progress < 0.01) {
            that.mySwiper.mousewheel.enable();
          }
        },
      },
    });

    if (this.$route.params.id) {
      this.toViewSwiper(this.$route.params.id);
    } else {
      this.activeIndex = 0;
    }

    this.height = document.documentElement.clientHeight;
    window.addEventListener("resize", this.swiperInit);

    if (JSON.stringify(this.$route.params) !== "{}") {
      this.showloading = false;
    } else {
      this.preload();
      // this.loadNumber();
    }
    this.indexData();
  },
  destroyed() {
    window.removeEventListener("resize", this.swiperInit);
  },
  methods: {
    indexData() {
      const source = this.$route.query.source;
      getData(
        {
          source,
          ip: this.ip,
        }
        // ,this.headers
      ).then((res) => {
        // this.orderSuccess = true;
        console.log(res);
      });
    },
    swiperInit() {
      this.height = document.documentElement.clientHeight;

      const that = this;
      that.mySwiper.destroy();
      this.$nextTick(() => {
        const mySwiper1 = new Swiper(".mySwiper", {
          // eslint-disable-line no-unused-vars
          initialSlide: this.activeIndex,
          notNextTick: true,
          direction: "vertical",
          setWrapperSize: true,
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
          },
          slidesPerView: 1,
          resistanceRatio: 0,
          resizeObserver: true,
          height: document.documentElement.clientHeight,
          observeParents: true,
          observer: true,
          mousewheel: true,
          mousewheelControl: true,
          speed: 600,
          lazy: {
            loadPrevNext: true,
            loadOnTransitionStart: true,
            loadPrevNextAmount: 1,
          },
          on: {
            slideChange: () => {
              const swiper = this.$refs.mySwiper.swiper;
              that.activeIndex = swiper.activeIndex;
            },
          },
        });
        that.mySwiper = mySwiper1;
      });
    },
    toViewSwiper(activeIndex) {
      this.mySwiper.lazy.loadInSlide(activeIndex);
      // const that = this;
      this.mySwiper.slideTo(activeIndex, 600, false);
      this.activeIndex = activeIndex;
      this.showNav = false;
    },
    prev() {
      this.play = false;
      this.changeActive = false;
      const prev = this.characterArr.pop(); // 删除最后一个 添加到一个位置
      this.characterArr.unshift(prev);
      this.activeArr = this.characterArr.slice(0, 5);
      setTimeout(() => {
        this.changeActive = true;
      }, 150);
    },
    next() {
      this.changeActive = false;
      this.play = false;

      const next = this.characterArr.shift(); // 删除最后一个 添加到一个位置
      this.characterArr.push(next);
      this.activeArr = this.characterArr.slice(0, 5);
      setTimeout(() => {
        this.changeActive = true;
      }, 150);
    },
    changeCharacter(index) {
      this.play = false;
      this.changeActive = false;
      if (index < 2) {
        const sum = 2 - index;
        const prev = this.characterArr.splice(-sum);
        this.characterArr = prev.concat(this.characterArr);
      } else {
        const num = index - 2;
        const next = this.characterArr.splice(0, num);
        this.characterArr = this.characterArr.concat(next);
      }
      this.activeArr = this.characterArr.slice(0, 5);
      setTimeout(() => {
        this.changeActive = true;
      }, 150);
    },
    closeMobileNav() {
      this.showNav = false;
    },
    closeViedoBox() {
      this.showVideoBox = false;
    },
    closeOrder() {
      this.showOrder = false;
    },
    closeLand() {
      this.showLand = false;
    },
    closeContact() {
      this.showContact = false;
    },
    closeArgument() {
      this.showArgument = false;
      this.swiperInit();
    },
    openArgument(txt) {
      this.showArgument = true;
      this.argumentTitle = txt;
      this.mySwiper.detachEvents();
    },
    preload() {
      this.imglength = this.imgs.length;
      if (this.count === this.imglength) return;

      for (const img of this.imgs) {
        const image = new Image();
        image.src = img;
        if (image.complete) {
          this.count++;
          const percentNum = Math.floor((this.count / this.imglength) * 100);
          this.percent = percentNum;
          // this.imgs.this.preload();
          // console.log("complete", this.percent);
          continue;
        }
        image.onload = () => {
          this.count++;
          // 计算图片加载的百分数,绑定到percent变量
          const percentNum = Math.floor((this.count / this.imglength) * 100);
          this.percent = percentNum;
          // console.log("onload", this.percent);
        };
      }

      this.loadNumber();
    },
    loadNumber() {
      this.intervalId = setInterval(() => {
        if (this.percent > this.loading) {
          this.loading++;
        } else {
          setTimeout(() => {
            this.showloading = false;
          }, 200);
          window.clearInterval(this.intervalId);
          this.intervalId = null;
        }
      }, 20);
    },
    enter(id) {
      if (id === "QQ") {
        this.showQQ = true;
      } else {
        this.showCode = true;
      }
    },
    leaveFn(id) {
      console.log(id);
      if (id === "QQ") {
        this.showQQ = false;
        console.log(1111);
      } else {
        this.showCode = false;
      }
    },
    togglePlay() {
      const audio = this.$refs.myAudio;
      if (this.play) {
        audio.pause();
        this.play = false;
        return;
      } else {
        audio.play();
      }
      const playPromiser = audio.play();
      this.play = true;

      audio.onended = () => {
        console.log(playPromiser);
        // onended可以检测语音是否播完
        // dosometing
        this.play = false;
      };
    },
    changeLan() {
      this.lan === "cn" ? (this.lan = "jp") : (this.lan = "cn");
      if (this.play) {
        this.play = false;
        setTimeout(() => {
          this.togglePlay();
        }, 0);
      }
    },
  },
};
</script>

<style lang="scss">
@import "@/assets/scss/mobile.scss";
</style>